如何使用v-model與promise兩種方式實(shí)現(xiàn)vue彈窗組件

<chat-modal ref="chat-modal" v-model="showModal" cancelText="取消" sureText="確認(rèn)" title="彈窗標(biāo)題" small @on-ok="onOK" @on-cancel="onCancel">
 <p>slot的東西,想向彈窗中添加自定義的內(nèi)容</p>
</chat-modal>
methods: {
 display() {
 this.showModal = true;//交互點(diǎn)擊手動(dòng)觸發(fā)顯示彈窗 
 },
 onOK() {},//點(diǎn)擊確認(rèn)的回調(diào)
 onCancel() {}//點(diǎn)擊取消的回調(diào)
}

<chat-modal ref="chat-modal"></chat-modal>
methods: {
 display() {
 this.$refs["chat-modal"].openModal({
 title: "彈窗標(biāo)題",
 sureText: "確認(rèn)",
 cancelText: "取消"
 }).then(res => {
 //點(diǎn)擊確認(rèn)的回調(diào)
 }, res => {
 //點(diǎn)擊取消的回調(diào)
 })
 }
}

<template>
 <p>
 <p class="shadow" v-show="showModal"></p>
 <p class="modal" :class="{'smSize': otherText.small || small}" v-show="showModal">
 <p class="header">{{ otherText.title || title}}</p>
 <p class="body">
 <slot></slot>
 </p>
 <p class="footer">
 <p class="item success" id="sure" ref="sure" @click="makeSure" v-show="otherText.sureText || sureText">{{ otherText.sureText || sureText }}</p>
 <p class="item red" id="cancel" ref="cancel" @click="makeCancel" v-show="otherText.cancelText || cancelText">{{ otherText.cancelText || cancelText }}</p>
 </p>
 </p>
 </p>
</template>
<script>
//此組件提供兩種調(diào)用方法,可以在組件上v-model一個(gè)表示是否顯示彈窗的對(duì)話框，然后需要的一些值通過(guò)props傳入，然后$emit在組件上@監(jiān)聽(tīng)做回調(diào)
//第二中方法所有的傳值回調(diào)都只需要在組件內(nèi)部的一個(gè)方法調(diào)用然后在組件外部this.$refs[xxx].open調(diào)用然后.then觸發(fā)回調(diào)，比上一種方便些
var initOtherText = {
 sureText: "",
 cancelText: "",
 title: "",
 small: false
};
export default {
 props: {
 title: {
 type: String
 },
 sureText: {
 type: String
 },
 cancelText: {
 type: String
 },
 value: {
 type: Boolean
 },
 small: {
 type: Boolean
 }
 },
 watch: {
 value(newVal) {
 this.showModal = newVal;
 }
 },
 data() {
 return {
 otherText: JSON.parse(JSON.stringify(initOtherText)),
 showModal: this.value
 };
 },
 methods: {
 makeSure() {
 this.$emit("on-ok");
 this.$emit("input", false);
 },
 makeCancel() {
 this.$emit("on-cancel");
 this.$emit("input", false);
 },
 openModal(otherText) {
 this.otherText = { ...otherText };
 this.showModal = true;
 var pms = new Promise((resolve, reject) => {
 this.$refs["sure"].addEventListener("click", () => {
 this.showModal = false;
 resolve("點(diǎn)擊了確定");
 });
 this.$refs["cancel"].addEventListener("click", () => {
 this.showModal = false;
 reject("點(diǎn)擊了取消");
 });
 });
 return pms;
 }
 }
};
</script>
<style lang="scss" scoped>
.shadow {
 background-color: rgba(0, 0, 0, 0.5);
 display: table;
 height: 100%;
 left: 0;
 position: fixed;
 top: 0;
 transition: opacity 0.3s ease;
 width: 100%;
 z-index: 50;
}
.modal {
 display: table-cell;
 vertical-align: middle;
 overflow-x: hidden;
 position: fixed;
 background-color: white;
 box-shadow: rgba(0, 0, 0, 0.33) 0px 2px 8px;
 border-radius: 5px;
 outline: 0px;
 overflow: hidden;
 transition: all 0.3s ease;
 width: 600px;
 height: 400px;
 top: 50%;
 left: 50%;
 margin-top: -200px;
 margin-left: -300px;
}
.header {
 align-items: center;
 background-color: #62a39e;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
 color: #fff;
 font-weight: bold;
 display: -ms-flexbox;
 display: flex;
 height: 3.5rem;
 padding: 0 1.5rem;
 position: relative;
 z-index: 1;
}
.body {
 align-items: center;
 padding: 1.5rem;
}
.footer {
 justify-content: flex-end;
 padding: 1.5rem;
 position: absolute;
 bottom: 0;
 width: 100%;
 float: right;
}
.item {
 color: white;
 text-align: center;
 border-radius: 5px;
 padding: 10px;
 cursor: pointer;
 display: inline-block;
}
.info {
 background-color: #2196f3;
}
.success {
 background-color: #62a39e;
}
.red {
 background-color: #e95358;
}
.smSize {
 height: 200px;
}
</style>

makeSure() {
 this.$emit("on-ok");
 this.$emit("input", false);
 },
makeCancel() {
 this.$emit("on-cancel");
 this.$emit("input", false);
 }

var initOtherText = {
 sureText: "",
 cancelText: "",
 title: "",
 small: false
};
otherText: JSON.parse(JSON.stringify(initOtherText)),

this.$refs["sure"].addEventListener("click", () => {
 this.showModal = false;
 resolve("點(diǎn)擊了確定");
});

this.$refs["cancel"].addEventListener("click", () => {
 this.showModal = false;
 reject("點(diǎn)擊了取消");
});

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

this.$refs["chat-modal"].openModal({
 title: "服務(wù)小結(jié)",
 sureText: "提交并結(jié)束",
 cancelText: "取消"
 }).then();