最近公司有一个后台业务虽然也是写在了现有的后台系统中,但是之后要为这个业务单独拉出来新建一个后台系统,所以现有的后台系统中的vue组件库,就不能用了(因为不知道将来的系统要基于什么组件库,以防给未来移植项目带来麻烦),这次业务中又遇到了弹窗的功能,所以只能手动写一个了(虽然说弹窗组件很简单,也是想自己总结一下,有不对的地方也请指出),一开始用传统的道具、发出但美元是觉得要接两个取消与确认的回调这块的逻辑分散了所以就用了承诺两个回调的方式把两个回调写在了一起,并不一定好,算是提供一种思路吧。
先看最后的调用方式
<强>道具发出美元方式
& lt; chat-modal ref=" chat-modal " v模型=皊howModal cancelText”=叭∠眘ureText=叭啡稀皌itle=暗氨晏狻靶on-ok=拔恢谩盄on-cancel=靶椤北?
& lt; div>槽的东西,想向弹窗中添加自定义的内容& lt;/div>
& lt;/chat-modal>
方法:{
显示(){
这一点。showModal=true;//交互点击手动触发显示弹窗
},>
& lt; chat-modal ref=" chat-modal "祝辞& lt;/chat-modal>
方法:{
显示(){
参。美元(“chat-modal”) .openModal ({
标题:“弹窗标题”,
sureText:“确认”,
cancelText:“取消”
})。然后(res=比;{//点击确认的回调
},res=比;{//点击取消的回调
}）
}
}
第二种方式的好处就是把所有的逻辑都集中到了一个方法里。
提示:样式有些烂…
& lt; template>
& lt; div>
& lt; div类=坝白印眝-show=皊howModal祝辞& lt;/div>
& lt; div类=澳Ｌ?类=" {smSize: otherText。小| |小}" v-show=" showModal”比;
& lt; div类="头"在{{otherText。标题| |标题}}& lt;/div>
& lt; div类=吧硖濉北?
& lt; slot> & lt;/slot>
& lt;/div>
& lt; div类=耙辰拧北?
& lt; div类="项目成功" id="确定" ref="确定" @click=v-show=" otherText“保证”。sureText | |在{{otherText sureText”。sureText | | sureText}} & lt;/div>
& lt; div类="项红色" id=叭∠眗ef=叭∠盄click=v-show=癿akeCancel otherText。cancelText | |在{{otherText cancelText”。cancelText | | cancelText}} & lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>//此组件提供两种调用方法,可以在组件上v模型一个表示是否显示弹窗的对话框,然后需要的一些值通过道具传入,然后释放美元在组件上@监听做回调//第二中方法所有的传值回调都只需要在组件内部的一个方法调用然后在组件外部。参美元[xxx] .open调用然后不要犹豫触发回调,比上一种方便些
var initOtherText={
sureText:“”,
cancelText:“”,
标题:",
小:假
}；
出口默认{
道具:{
标题:{
类型:字符串
},
sureText: {
类型:字符串
},
cancelText: {
类型:字符串
},
价值:{
类型:布尔
},
小:{
类型:布尔
}
},
看:{
值(newVal) {
这一点。showModal=newVal;
}
},
数据(){
返回{
otherText: JSON.parse (JSON.stringify (initOtherText)),
showModal: this.value
}；
},
方法:{
保证(){
美元。排放(“ok”);
这一点。美元发出(“输入”,假);
},
makeCancel () {
美元。排放(“on-cancel”);
这一点。美元发出(“输入”,假);
},
openModal (otherText) {
这一点。otherText={…otherText};
这一点。showModal=true;
经前综合症var=新的承诺((解决,拒绝)=比;{
参。美元(“确定”)。addEventListener(“点击”,()=比;{
这一点。showModal=false;
解决(“点击了确定”);
})；
参。美元(“取消”)。addEventListener(“点击”,()=比;{
这一点。showModal=false;
拒绝(“点击了取消”);
})；
})；
返回经前综合症;
}
}
}；
& lt;/script>
& lt;风格lang=皊css”scoped>
.shadow {
background - color: rgba (0, 0, 0, 0.5);
显示:表;
高度:100%;
左:0;
位置:固定;
上图:0;
过渡:透明度0.3 s缓解;
宽度:100%;
z - index: 50;
}
.modal {
显示:表格单元;
vertical-align:中间;
overflow-x:隐藏;
位置:固定;
背景颜色:白色;
不必:rgba (0, 0, 0, 0.33) 0 px 2 px 8 px;
border - radius: 5 px;
大纲:0 px;
溢出:隐藏;
过渡:所有0.3年代缓解;
宽度:600 px;
身高:400 px;
上图:50%;
左:50%;
margin-top: -200 px;
margin-left: -300 px;
}
.header {
对齐项目:中心;
background - color: # 62 a39e;
不必:0 1 px 1 px rgba (0, 0, 0, 0.16);
颜色:# fff;
粗细:大胆的;
显示:-ms-flexbox;
显示:flex;
高度:3.5快速眼动;
填充:0 1.5快速眼动;
位置:相对;
z - index: 1;
}
.body {
对齐项目:中心;
填充:1.5快速眼动;
}
.footer {
justify-content: flex-end;
填充:1.5快速眼动;
位置:绝对的;
底部:0;
宽度:100%;
浮:正确;
}
.item {
颜色:白色;
text-align:中心;
border - radius: 5 px;
填充:10 px;
光标:指针;
显示:inline-block;
}
info {
background - color: # 2196 f3;
}
.success {
background - color: # 62 a39e;
}
r {
background - color: # e95358;
}
.smSize {
身高:200 px;
}
& lt;/style>
