Reuse Quasar Dialog plugin with custom component on another component

问题

I'm taking the first steps with Quasar.

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

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

import { Dialog } from "quasar";

export function ModalWindow(CustomComponent) {

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

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>

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.

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>

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>

I get on de console:

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

回答1:

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

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

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')
  }
}

and propagate onOk and onCancel events appropriately.

For instance, summarizing everything:

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

来源：https://stackoverflow.com/questions/58557479/reuse-quasar-dialog-plugin-with-custom-component-on-another-component

标签

Vue.js

Quasar