useDialogPluginComponent

这个组合式用于 Dialog 插件调用自定义组件，它会提供组件与插件之间所有必要的通讯。

用法

import { useDialogPluginComponent } from 'quasar'

setup() {
  const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()

  // dialogRef      - 一个应用于 QDialog 的 Vue ref
  // onDialogHide   - 用作处理 QDialog 上 @hide 事件的函数
  // onDialogOK     - 用于处理对话框 "ok" 结果的函数
  //                    示例: onDialogOK() - 无载荷参数
  //                    示例: onDialogOK({ /*.../* }) - 带有载荷参数
  // onDialogCancel - 用于处理对话框 "cancel" 结果的函数

  return {
    dialogRef,
    onDialogHide,
    onDialogOK,
    onDialogCancel
  }
}

完整示例

<template>
  <!-- 注意这里的 dialogRef -->
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <!--
        ... 内容
        ... 使用 q-card-section ？
      -->

      <!-- 按钮控件示例 -->
      <q-card-actions align="right">
        <q-btn color="primary" label="OK" @click="onOKClick" />
        <q-btn color="primary" label="Cancel" @click="onCancelClick" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
import { useDialogPluginComponent } from 'quasar'

export default {
  props: {
    // ...您的自定义 props
  },

  emits: [
    // 必须的; 需要声明一些您的组件会通过 useDialogPluginComponent() 触发的事件
    ...useDialogPluginComponent.emits
  ],

  setup () {
    // 必须的; useDialogPluginComponent 只能在 setup() 内调用
    const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
    // dialogRef      - 一个应用于 QDialog 的 Vue ref
    // onDialogHide   - 用作处理 QDialog 上 @hide 事件的函数
    // onDialogOK     - 用于处理对话框 "ok" 结果的函数
    //                    示例: onDialogOK() - 无载荷参数
    //                    示例: onDialogOK({ /*.../* }) - 带有载荷参数
    // onDialogCancel - 用于处理对话框 "cancel" 结果的函数

return {
      // 这是必需的；
      // 需要将这些（ useDialogPluginComponent() 中的内容）
      // 注入到 vue 范围内，以供 vue html 模板使用
      dialogRef,
      onDialogHide,

      // 我们在 vue html 模板中使用的其他方法；
      // 这些是我们示例的一部分（因此不是必需的）
      onOKClick() {
        // 在点击确定时，必须
        // 调用 onDialogOK（可选载荷参数）
        onDialogOK()
        // 或者使用载荷参数：onDialogOK({ ... })
        // ...并且它还会自动隐藏对话框
      },

      // 我们可以直接传递 onDialogCancel
      onCancelClick: onDialogCancel
    }
  }
}
</script>