以v-model与promise两种方式实现vue弹窗组件
最近公司有一个后台业务虽然也是写在了现有的后台系统中,但是之后要为这个业务单独拉出来新建一个后台系统,所以现有的后台系统中的vue组件库,就不能用了(因为不知道将来的系统要基于什么组件库,以防给未来移植项目带来麻烦),这次业务中又遇到了弹窗的功能,所以只能手动写一个了(虽然说弹窗组件很简单,也是想自己总结一下,有不对的地方也请指出),一开始用传统的props,$emit但是觉得要接两个取消与确认的回调这块的逻辑分散了所以就用了promise两个回调的方式把两个回调写在了一起,并不一定好,算是提供一种思路吧。 一.概览先看最后的调用方式 props $emit方式slot的东西,想向弹窗中添加自定义的内容
methods: {
display() {
this.showModal = true;//交互点击手动触发显示弹窗
},onOK() {},//点击确认的回调
onCancel() {}//点击取消的回调
}
promise的回调方式
methods: {
display() {
this.$refs["chat-modal"].openModal({
title: "弹窗标题",sureText: "确认",cancelText: "取消"
}).then(res => {
//点击确认的回调
},res => {
//点击取消的回调
})
}
}
第二种方式的好处就是把所有的逻辑都集中到了一个方法里。 二.看下组件的源码tip: 样式有些烂... 首先分析一下第一种方式: 调用者需要在组件外部v-model上绑定一个变量(例中为showModal)来指示弹窗是否显示,显示的时候需要在组件外部手动设置
然后来看promise的方式: 第一种方式传进来的值都通过props来接的,这种方式通过在组件内部定义了另一个对象来接传进来的值, 然后在menthods里定义了一个名为openModal的方法,然后把传进来的一系列参数赋值给组件内部的对象 {
this.showModal = false;
resolve("点击了确定");
});
获取确定按钮的DOM元素绑定点击事件,回调里将showModal置为false并且resolve, {
this.showModal = false;
reject("点击了取消");
});
获取取消按钮的DOM绑定点击事件,回调里reject. 遇到的坑这之前遇到了一个坑,因为第一次已经绑定了点击事件,第二次resolve和reject就会失败,本想取消一下绑定事件,但是因为将整个弹窗 {
this.$refs["sure"].addEventListener.xxx//省略
});
return pms;
将showModal置为true时然后就去绑定事件这时候还没有DOM还没有解析玩DOM树上还没有,要不就得用this.$nextTick增加了复杂度,最后采用了v-show; 关于优先级问题如果既在组件上用prop传了值(title,sureText之类的)如 是以方法的优先级为高,在组件内部DOM元素上通过||设置了优先级,比如 以上所述是小编给大家介绍的以v-model与promise两种方式实现vue弹窗组件。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |