微客导航 » 文章资讯 » vue弹出框组件封装实例代码

vue弹出框组件封装实例代码

2023-08-10 01:52:04 268

新学vue，参考别人封装弹出层组件。好用！

1.你需要先建一个弹出框的模板：

//首先创建一个mack.vue


//写js


//css

.mack{
position:fixed;
width:100%;
height:100%;
overflow:hidden;
top:0;
left:0;
background:rgba(21,21,21,0.7);
.font_b{
font-size:14/50rem;
color:#231a2f;
}
.font_s{
font-size:12/50rem;
color:#655a72;
}
.borderTop{
border-top:1/50remsolid#e4e4e4;
}
.mackWeb{
background:#ffffff;
width:300/50rem;
min-width:300/50rem;
margin:auto;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
.title{
text-align:center;
padding:15/50rem15/50rem015/50rem;
}
.mesg{
padding:15/50rem;
text-align:center;
}
.footb{
display:inline-table;
width:100%;
.borderlf{
border-right:1/50remsolid#e4e4e4;
}
div{
display:table-cell;
box-sizing:border-box;
text-align:center;
padding:10/50rem0;
}
}
}
}

2.接着你需要一个js：mackjs.js

importVuefrom'vue';
importconfirmfrom'./mack';
letconfirmConstructor=Vue.extend(confirm);
lettheConfirm=function(text){
returnnewPromise((res,rej)=>{//promise封装，ok执行resolve，no执行rejectlet
letconfirmDom=newconfirmConstructor({
el:document.createElement('div')
})
document.body.appendChild(confirmDom.$el);//new一个对象，然后插入body里面
confirmDom.text=Object.assing(confirmDom.text,text);//为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义
confirmDom.ok=function(){
res()
confirmDom.isShow=false
}
confirmDom.close=function(){
rej()
confirmDom.isShow=false
}
})
}
exportdefaulttheConfirm;
//暴露出去，别忘记挂载到vue的原型上
//=>在main.js里面先引入importtheConfirmfrom'./components/confirm/confirm.js'
//=>再挂载Vue.prototype.$confirm=theConfirm;
//在需要的地方直接用以下方法调用即可：
//this.$confirm({
//type:'提示',
//msg:'是否删除这条信息？',
//btn:{
//ok:'yes',
//no:'no'
//}
//}).then(()=>{
//console.log('ok')
//})
//.catch(()=>{
//console.log('no')
//})

-3.你接着需要在main.js导入这个文件

importmacksjsfrom'./assets/mackjs'
Vue.prototype.$confirm=macksjs;

-4.最后在你需要引入的vue文件中直接调用就好了

我是弹出框
methods:{
deleteaas(){
this.$confirm({
title:"addd",
mesg:"您确定不再关注该客户吗？",
cntMsg:'你好

', cancelValStyle:{color:'red'}, btn:{ confirmVal:"确a定", cancelVal:"取a消" } }) .then(()=>{ console.log("yes"); //点击确定之后的处理 }) .catch(()=>{ console.log("no"); }); } }

导入

总结

以上所述是小编给大家介绍的vue弹出框组件封装实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue弹出框组件封装实例代码

热门推荐

随机推荐