成都网站建设设计

将想法与焦点和您一起共享

以v-model与promise两种方式实现vue弹窗组件-创新互联

最近公司有一个后台业务虽然也是写在了现有的后台系统中,但是之后要为这个业务单独拉出来新建一个后台系统,所以现有的后台系统中的vue组件库,就不能用了(因为不知道将来的系统要基于什么组件库,以防给未来移植项目带来麻烦),这次业务中又遇到了弹窗的功能,所以只能手动写一个了(虽然说弹窗组件很简单,也是想自己总结一下,有不对的地方也请指出),一开始用传统的props,$emit但是觉得要接两个取消与确认的回调这块的逻辑分散了所以就用了promise两个回调的方式把两个回调写在了一起,并不一定好,算是提供一种思路吧。

创新互联-云计算及IDC服务提供商,涵盖公有云、IDC机房租用、服务器托管、等保安全、私有云建设等企业级互联网基础服务,联系电话:028-86922220

一.概览

先看最后的调用方式

props $emit方式



  
slot的东西,想向弹窗中添加自定义的内容
methods: { display() { this.showModal = true;//交互点击手动触发显示弹窗 }, onOK() {},//点击确认的回调 onCancel() {}//点击取消的回调 }

名称栏目:以v-model与promise两种方式实现vue弹窗组件-创新互联
浏览路径:http://chengdu.cdxwcx.cn/article/gihoj.html