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

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>

首先分析一下第一种方式: 调用者需要在组件外部v-model上绑定一个变量(例中为showModal)来指示弹窗是否显示,显示的时候需要在组件外部手动设置

 this.showModal = true 

,组件内部props定义一个属性来接这个值为 value: {type: Boolean} ,同时在组件内部在用声明一个变量用来同步外部传进来的props值 默认值为 showModal: this.value (内部声明的值也叫了showModal)，在watch中监听进行同步

 watch: { value(newVal) { this.showModal = newVal } }

;然后把组件内部的这个showModal值绑定在需要显示或者隐藏的DOM元素上。向外抛出事件的时候是在点击组件内部的确定与关闭按钮时候

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

this.$emit("on-ok");this.$emit("on-cancel"); 

这两句的是向外抛出事件在组件外部@接一下然后写自己需要的回调函数。这时就可以实现弹窗的显示与隐藏了，你可能发现并没有一句代码去设置this.showModal = false;弹窗就隐藏了。主要是因为这几句代码 v-model = ‘showModal’ 和 组件内部的

props: {value: {type: Boolean}} this.$emit("input", false)

。v-model其实是vue的语法糖,

<chat-modal v-model="showModal"> 

其实可以写为

<chat-modal :value="showModal" @input="showModal = arguments[0]">

所以要求我们在组件内部必须规定props的名字必须为value, 然后在组件内部触发确定或者取消的时候在组件内部触发

this.$emit("input", false) 

这样实现了直接隐藏弹窗而不必打扰用户让用户在组件外部在手动将showModal置为false.

然后来看promise的方式： 第一种方式传进来的值都通过props来接的，这种方式通过在组件内部定义了另一个对象来接传进来的值,

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

然后在menthods里定义了一个名为openModal的方法,然后把传进来的一系列参数赋值给组件内部的对象