在另一个组件上重用带有自定义组件的 Quasar Dialog 插件

Question

我正在使用 Quasar 迈出第一步。

我想构建一个模式窗口以在表单中重复使用。

我在自定义组件中使用 Dialog 插件和 q-layout。

但是，当我在另一个组件中使用此自定义组件时，对话框插件方法不起作用。

有没有办法解决这个问题？

util/modal.js

import { Dialog } from "quasar";

export function ModalWindow(CustomComponent) {

    Dialog.create({
        component:CustomComponent,
        ok: {
            push: true
        },
        cancel: {
            color: 'negative'
        },
        persistent: true
    })
}

modal/ModalWindow.vue（自定义组件）：

    <template>
       <q-dialog persistent ref="dialog" @hide="onDialogHide">
         <q-layout view="lhh LpR lff" container style="height: 400px" class="bg-grey-3">       

          <q-toolbar class="bg-primary text-white q-mb-sm">
            <q-toolbar-title>
                <slot name="titelWindow"></slot>
            </q-toolbar-title>
            <q-btn v-close-popup flat round dense icon="close" />
           </q-toolbar>

            <q-form @submit.prevent="submitForm">
                <q-card-section>   
                    <slot></slot>
                </q-card-section>  

                <q-card-actions align="right">
                    <slot name="toolbarBottom"></slot>
                </q-card-actions>
            </q-form>

    </q-layout>
  </q-dialog>
</template>

<script>
export default {
  methods: {
    show () {
      this.$refs.dialog.show()
    },
    hide () {
      this.$refs.dialog.hide()
    },
    onDialogHide () {
      this.$emit('hide')
    }
  }
}
</script>

在页面上调用方法 ModalWindow：

<script>
    import { ModalWindow } from 'src/util/modal'
    import CustomComponent from "components/modal/MyModalWindow.vue"
    export default {    
        methods: {
            showUWin: function(id) {
                ModalWindow(CustomComponent)
            }
        }
    }
</script>

到目前为止，它运行良好。

但是，正如我所说，当我在另一个组件中使用此自定义组件时，对话框插件方法不起作用。

在另一个组件中渲染自定义组件：MyModalForm.vue

<template>
    <MyModalWindow>   
        <!--Dialog's show method doesn't work-->
    </MyModalWindow>  
</template>

<script>
export default {
    name: 'MyModalForm',
    components: {
        'MyModalWindow': require('components/modal/MyModalWindow.vue').default,
    }
}
</script>

在页面上调用方法 ModalWindow：

<script>
    import { ModalWindow } from 'src/util/modal'
    import CustomComponent from "components/modal/MyModalForm.vue"
    export default {    
        methods: {
            showWin: function(id) {
                ModalWindow(CustomComponent)
            }
        }
    }
</script>

我上了控制台：

[Vue warn]: Error in mounted hook: "TypeError: this.$refs.dialog.show
is not a function"

Answer 1

我最近遇到了同样的错误。

我的理解是，当您使用以下内容时：

Dialog.create({
  component: CustomComponent,
  ...
})

// or

this.$q.dialog({
  component: CustomComponent
})

CustomComponent 必须按照文档直接实现所需的显示/隐藏/...方法。

因此，您必须在每个自定义组件中重复此代码（将其调整为正确的“ref”，特定于您的组件）：

methods: {
  show () {
    this.$refs.dialog.show()
  },
  hide () {
    this.$refs.dialog.hide()
  },
  onDialogHide () {
    this.$emit('hide')
  }
}

并适当地传播 onOk 和 onCancel 事件。

例如，总结一切：

<template>
  <MyModalWindow ref="myModalForm" @ok="onOk" /> 
</template>

<script>
export default {
  name: 'MyModalForm',
  components: {
    'MyModalWindow'
  },
  methods: {
    show() {
      this.$refs.myModalForm.show();
    },
    hide() {
      this.$refs.myModalForm.hide();
    },
    onHide() {
      this.$emit('hide');
    },
    onOk() {
      this.$emit('ok');
      this.hide();
    }
  }
}
</script>