开发一个弹窗组件,用户在使用该组件时可以根据项目需要自行设置弹窗的标题栏文本和弹窗显示的内容。同时要求该弹窗具备确定和取消两个按钮,并允许用户自行编写按钮的单击代码。
HTML代码如下:
<div id="app">
<my-dialog
submit-text="提交"
cancel-text="关闭"
v-model="isShow"
@deal="dialogDeal"
>
<template slot="title">
<i class="iconfont iconfont-t"></i>{{dialogTitle}}
</template>
<template slot="content">
<p>内容:<input type="text" /></p>
</template>
</my-dialog>
<button @click="insertEmployee">一</button>
<button @click="deleteEmployeee">二</button>
</div>
JS代码如下:
Vue.component("myDialog",{
template:`
<div class="mask" v-if="isOk">
<div class="dialog">
<div class="title">
<div class="text">
<slot name="title"></slot>
</div>
<div class="close" @click="dialogClose">×</div>
</div>
<div class="content">
<slot name="content"></slot>
</div>
<div class="foot">
<div class="btn cancel" @click="isOk=false">{{cancelText}}</div>
<div class="btn submit" @click="submitClick">{{submitText}}</div>
</div>
</div>
</div>
`,
data(){
return {
isOk:this.value
}
},
props:["value","submitText","cancelText"],
methods:{
//关闭对话框
dialogClose(){
this.isOk=false;
},
//确定按钮的单击事件
submitClick(){
this.$emit("deal")
}
},
watch:{
value(newValue){
this.isOk=newValue;
},
isOk(newValue){
this.$emit("input",newValue);
}
}
})
let vm=new Vue({
el:"#app",
data:{
isShow:false,
dialogTitle:""
},
methods:{
//一
insertEmployee(){
this.dialogTitle="一";
this.isShow=true;
},
//二
deleteEmployeee(){
this.dialogTitle="二";
this.isShow=true;
},
dialogDeal(){
if(this.dialogTitle==="一"){
console.log("一");
}else{
console.log("二")
}
this.isShow=false;
}
}
})