将Quasar Dialog插件与另一个组件上的自定义组件一起重用 [英] Reuse Quasar Dialog plugin with custom component on another component

问题描述

我正在与Quasar一起迈出第一步.

I'm taking the first steps with Quasar.

我想建立一个模态窗口，以便在表单中重复使用.

I want to build a modal window to be reused in forms.

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

I am using Dialog plugin and q-layout in a custom component.

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

However, when I use this custom component in another component the dialog plugin methods do not work.

有什么办法解决这个问题?

Is there any way to solve this?

util/modal.js

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(自定义组件):

modal/ModalWindow.vue (custom component):

    <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:

Call method ModalWindow on a page:

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

到目前为止，它运作良好.

So far it works well.

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

However, as I said,when I use this custom component in another component the dialog plugin methods do not work.

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

render custom component in another component: 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:

Call method ModalWindow on a page:

<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"

推荐答案

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

I recently got into the same error.

我的理解是，当您使用类似的内容时:

My understanding is that, when you use something like:

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

// or

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

CustomComponent必须根据文档直接实现所需的show/hide/...方法.

the CustomComponent must directly implement the required show/hide/... methods, as per documentation.

因此，您必须在每个自定义组件中重复此代码(将其修改为适合您组件的右侧"ref"):

So you have to repeat in each custom component this code (adapting it to the right "ref", specific to your component):

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

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

and propagate onOk and onCancel events appropriately.

例如，总结所有内容:

<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>

这篇关于将Quasar Dialog插件与另一个组件上的自定义组件一起重用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！