<>强如下所示:
首先我们需要创建确认。vue, confirm.js这两个文件,一个实现dom结构,一个实现相关逻辑
<强> confirm.vue
& lt; template>
& lt; div类=v=癷sShow”比“确认”;
& lt; div类=癱on_box”比;
& lt; div类=吧舷挛摹北?
& lt; h7> {{text.type}} & lt;/h7>
& lt; p> {{text.msg}} & lt;/p>
& lt; div类=癰tn”比;
& lt;跨度@click=" close ()“v=皌ext.btn.no”在{{text.btn.no}} & lt;/span>
& lt;跨越@click=皁k ()“v=皌ext.btn.ok”在{{text.btn.ok}} & lt;/span>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
isShow:没错,
文字:{
类型:“提示”,
味精:“确定删除此条信息吗?’,
btn: {
好:“确定”,
没有:“取消”
},
}
}
},
方法:{
close () {
console.log('关闭”);
},
好(){
console.log(“确定”)
}
}
}
& lt;/script>
& lt; scoped>风格;
确定{background: rgba(0, 0, 0, 0.6);宽度:100%;高度:100%;位置:固定;最高:0;}
.con_box{宽度:75%;高度:22%;背景颜色:白色;位置:绝对;:0;底:0;左:0;右:0;保证金:汽车;border - radius: 5 px;}
.context{填充:10 px;}
.context h7{字体大小:24 px;填充:15 px;}
.context p{字体大小:20 px;填充:35 px 15 px;文本溢出:省略号;溢出:隐藏;空白:nowrap;}}
.btn{填充:15 px; text-align:正确的;}
.btn跨度{填充:10 px 35 px;颜色:白色,border - radius: 5 px;}
.btn跨度:nth-child (1) {background - color: # f1f1f1;颜色:rgb (106、223、223);}
.btn跨度:nth-child (2) {background: rgb (106、223、223);}
& lt;/style>
<强> confirm.js
从“进口Vue Vue ';
从“进口确认。/confirm.vue ';
让confirmConstructor=Vue.extend(确认);
让theConfirm=function(文本){
球员返回新的承诺((res)=比;{//承诺封装,好执行决心,没有执行rejectlet
让confirmDom=new confirmConstructor ({
艾尔:document.createElement (div)
})
document.body.appendChild (confirmDom。el美元);//新建一个对象,然后插入身体里面
confirmDom。文本=文本;//为了使确定的扩展性更强,这个采用对象的方式传入,所有的字段都可以根据需求自定义
confirmDom。好的=function () {
res ()
confirmDom。isShow=false
}
confirmDom。近=function () {
rej ()
confirmDom。isShow=false
}
})
}
出口默认theConfirm;//暴露出去,别忘记挂载到vue的原型上//=比;在主要。js里面先引入进口theConfirm’。/组件/确认/confirm.js”//=比;再挂载Vue.prototype。确认美元=theConfirm;//在需要的地方直接用以下方法调用即可://这个。美元确认({//类型:“提示”,//味精:“是否删除这条信息吗?’,//btn: {//好吧:“是的”,//不:“不”//}//})(()=比;{//console.log(“好”)//})//.catch(()=比;{//console.log(“不”)//})
之前
<强> main.js
//加载Vue构建版本的“进口”命令//(运行时只或独立)被设置在webpack.base。配置一个别名。
从“Vue”进口Vue
导入应用程序从“/App。”
从“进口路由器。/路由器的//这里就是对组件的绑定
从“进口theConfirm。/组件/确认/confirm.js”
Vue.prototype。确认美元=theConfirm;
Vue.config。productionTip=false/* eslint-disable没有新*/新Vue ({
埃尔:“#应用”,
路由器,
组件:{应用},
模板:“& lt; App/祝辞;”
})
之前
<强> helloworld.vue
& lt; template>
& lt; div类=癶ello”比;
& lt;跨度@click=" handMe()在点击一下& lt;/span>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“HelloWorld”,
数据(){
返回{
}
},
方法:{
handMe () {
美元。确认({
类型:“提示”,
味精:“是否删除这条信息吗?’,
btn: {
好:“是的”,
没有:“不”
}
})()=比;{
console.log(“好”)
})
.catch(()=比;{
console.log(“不”)
})
}
}
}
& lt;/script>
& lt; !——“作用域”属性限制CSS添加到该组件只——比;
& lt; scoped>风格;
跨度{字体大小:24 px;}
& lt;/style>
