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

this.otherText = { ...otherText }; this.showModal = true

; 并且将showModal置为true,然后每次触发的时候新建一个promise对象，里面的异步事件为点击确定和取消的两个点击事件,这里要操作DOM了

this.$refs["sure"].addEventListener("click", () => {
  this.showModal = false;
  resolve("点击了确定");
});

获取确定按钮的DOM元素绑定点击事件，回调里将showModal置为false并且resolve,

this.$refs["cancel"].addEventListener("click", () => {
  this.showModal = false;
  reject("点击了取消");
});

获取取消按钮的DOM绑定点击事件，回调里reject.

遇到的坑

这之前遇到了一个坑，因为第一次已经绑定了点击事件，第二次resolve和reject就会失败，本想取消一下绑定事件，但是因为将整个弹窗

v-show="showModal"

的原因整个DOM被display:none;了就不需要手动解绑了。 第二个是关于用v-if还是v-show来隐藏弹窗,一开始用的是v-if但是发现在这步时

this.showModal = true;
var pms = new Promise((resolve, reject) => {
  this.$refs["sure"].addEventListener.xxx//省略
});
return pms;

将showModal置为true时然后就去绑定事件这时候还没有DOM还没有解析玩DOM树上还没有,要不就得用this.$nextTick增加了复杂度，最后采用了v-show；

关于优先级问题

如果既在组件上用prop传了值(title,sureText之类的)如

<chat-modal" title="xx" sureText="xxx"></chat-modal>

也在方法里传了

this.$refs["chat-modal"].openModal({
  title: "服务小结",
  sureText: "提交并结束",
  cancelText: "取消"
  }).then();

是以方法的优先级为高，在组件内部DOM元素上通过||设置了优先级，比如

<div class="header popModal">{{ otherText.title || title}}</div>

有方法的值取方法的值，没有取props得值。

总结

以上所述是小编给大家介绍的以v-model与promise两种方式实现vue弹窗组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！