如何将插槽与 Quasar 对话框插件自定义组件一起使用？

Question

我想为 Quasar 对话框制作一个自定义组件。在该组件内部，我想使用插槽，但我不确定该怎么做。

这是我的 CustomDialogComponent.vue，我在其中定义了一个 cancelBtn 插槽和一个 confirmBtn 插槽：

    <template>
      <!-- notice dialogRef here -->
      <q-dialog ref="dialogRef" @hide="onDialogHide">
        <q-card class="q-dialog-plugin">
          <q-card-section>
            <strong>{{ title }}</strong>
          </q-card-section>
          <q-card-section>
            <slot name="cancelBtn" @click="handleCancelClick"></slot>
            <slot name="confirmBtn" @click="handleConfirmClick"></slot>
          </q-card-section>
        </q-card>
      </q-dialog>
    </template>
    
    <script setup lang="ts">
    import { PropType } from 'vue';
    import { useDialogPluginComponent } from 'quasar';
    
    defineProps({
      title: {
        type: String,
        required: false,
        default: 'Alert',
      },
    });
    
    defineEmits([
      ...useDialogPluginComponent.emits,
    ]);
    
    const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
      useDialogPluginComponent();
    
    const handleConfirmClick = () => {
      console.log('Confirm Button Clicked');
      onDialogOK();
    };
    
    const handleCancelClick = () => {
      console.log('Cancel Button Clicked');
      onDialogCancel();
    };
    </script>

并且 Quasar docs 显示我可以通过 $q.dialog({ ... }) 对象调用它。道具等都设置在该对象内。所以这看起来像这样：

    <template>
      <div @click="showDialog">Show The Dialog</div>
    </template>
    
    <script setup lang="ts">
    import { useQuasar } from 'quasar';
    import CustomDialogComponent from 'src/components/CustomDialogComponent.vue'
    
    const $q = useQuasar();
    
    const showDialog = () => {
      $q.dialog({
        component: CustomDialogComponent,
    
        // props forwarded to your custom component
        componentProps: {
          title: 'Alert title goes here',
        },
      })
    };
    </script>

但是对话框对象中没有属性可供我传递到我的插槽中。那么我在哪里可以传入我在 CustomDialogComponent.vue 中创建的 cancelBtn 和 confirmBtn 插槽？

Answer 1

我直接问了，显然目前没有办法使用插槽。他们可能会在以后添加此功能。

如何将插槽与 Quasar 对话框插件自定义组件一起使用？

How do I use slots with a Quasar Dialog Plugin custom component?

quasar-framework