自定义dialog组件插件

自定义dialog组件插件(Quasar2 & VUE3) 目录

场景说明

写法记录

主体Vue页面写法

自定义dialog组件洗发

几个点

1.自定义dialog组件中可以使用created，mounted，以及data()渲染么

2.外部如何传参数给自定义dialog

3.自定义dialog如果返回数据给主体vue页面

4.自定义dialog里面可以写逻辑么

场景说明

例如，在某待缴费列表界面，选中记录后，要进行支付扫码的动作。传统的做法做法可以时写一个div，把微信的付款二维码包含进来，并且事先把div隐藏，然后在用户点击支付的时候，再把这个div显示出来。

但是这样写，总感觉很别扭，不够优雅，这里quasar有一个插件dialog调用的形式（其实也是vue自带的功能），能够通过this.$q.xxxxx写法，通过对话框的形式来打开，然后把结果反馈到主体的vue页面就行了。这里记录一下

写法记录

这里分别参考了官网 quasar1 和quasar2 的两个例子

https://quasar.dev/quasar-plugins/dialog#invoking-custom-component

http://www.quasarchs.com/quasar-plugins/dialog#调用自定义组件

两个的vue版本不同，写法还是有一定区别的

主体Vue页面写法

在quasar2（vue3）的写法中。是要再setup里面来触发dialog

这显然不符合业务，不可能用户一进来 就直接d出扫码dialog的。

于是我参照quasar1.x的写法，试了一下。也是可以在函数中来触发的

src\pages\pay\PayList.vue

<script>
import QCdemo2 from 'src/quasarcomponent/QCdemo2.vue';
...
export default {
...
 methods: {
 ...
  goPay() {
  ...
  this.$q
        .dialog({
          component: QCdemo2,

          // props forwarded to your custom component
          componentProps: {
            username: '周杰伦'
            // ...more..props...
          }
        })
        .onOk(res => {
          console.log('OK');
          console.log(JSON.stringify(res));
        })
        .onCancel(() => {
          console.log('Cancel');
        })
        .onDismiss(() => {
          console.log('Called on OK or Cancel');
        });
     ...


</script>

自定义dialog组件洗发

先贴一下代码

src\quasarcomponent\QCdemo2.vue

这里说明一下。

1.template包的必须是q-dialog
2.必须要有emits声明
3.写法尽量按照官网的写法来写

几个点 1.自定义dialog组件中可以使用created，mounted，以及data()渲染么

可以

2.外部如何传参数给自定义dialog

在调用的时候通过componentProps属性来传

 componentProps: {
            username: '周杰伦'
            // ...more..props...
          }

3.自定义dialog如果返回数据给主体vue页面

可以通过 this.$emit('ok', { 需要传递的数据});的方式 来发射回去

4.自定义dialog里面可以写逻辑么

可以，写法和传统Quasar vue页面的写法没区别