vue插件--仿微信小程序showModel实现模态提示窗功能

2023-07-18 13:10:04 371

效果图：

下面是源码：

index.js

importVuefrom'vue';
importmodelfrom'./model.vue';


exportdefault{
install(Vue){

constdefaults={
show:false,
mask:true,
title:'提示',
content:'这是正文',
confirmButton:true,
cancelButton:true,
confirmText:'确认',
cancelText:'取消',
cancelCallBack:()=>{},
confirmCallBack:()=>{}
};

constmodelVueConstructor=Vue.extend(model);

Vue.prototype.$model=(options={})=>{
if(Vue.prototype.$isServer)return;
options=Object.assign({},defaults,options);
letparent=document.body;
letinstance=newmodelVueConstructor({
el:document.createElement('div'),
data:options
});
parent.appendChild(instance.$el);

returninstance;
};

},
};

model.vue




exportdefault{
data(){
return{
show:false,
mask:true,
title:'提示',
content:'这是正文',
confirmButton:true,
cancelButton:true,
confirmText:'确认',
cancelText:'取消',
cancelCallBack:()=>{},
confirmCallBack:()=>{}
};
},
methods:{
cancelClick(){
this.show=false;
this.cancelCallBack();
},
confirmClick(){
this.show=false;
this.confirmCallBack();
}
}
};


.model-container{
width:100%;
height:100vh;
position:fixed;
top:0;
left:0;
z-index:var(--model-index);
display:flex;
justify-content:center;
align-items:center;
.model-main{
position:relative;
z-index:9;
width:80%;
background-color:#ffffff;
border-radius:10px;
overflow:hidden;
text-align:center;
.model-title{
font-size:18px;
color:#333;
width:100%;
padding:18px;
font-weight:bold;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.model-content{
font-size:16px;
color:#666;
padding:10px;
padding-top:0px;
padding-bottom:20px;
}
.model-buttons{
width:100%;
display:flex;
align-items:center;
.button{
flex:1;
padding:18px10px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size:16px;
outline:none;
background-color:#ffffff;
border-top:1pxsolid#f2f2f2;
border-right:1pxsolid#f2f2f2;
&.confirm{
color:var(--theme);
font-weight:bold;
}
&:last-child{
border-right:0;
}
&:active{
background-color:#f2f2f2;
}
}
}
}
.model-mask{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1;
background-color:rgba(0,0,0,0.45);
}
}

通过添加实例方法，把插件添加到vue.prototype上来实现。

在使用之前需要将插件挂载到Vue全局实例上：

main.js

importVueModelfrom'./components/model/index.js';
Vue.use(VueModel);

完成上述条件后，就可以在你的vue项目中使用啦：

this.$model({
show:true,
title:"提示",
content:"提示内容",
cancelButton:true,
confirmCallBack:()=>{
console.log("确认");
},
cancelCallBack:()=>{
console.log("取消");
}
});

总结

到此这篇关于vue插件--仿微信小程序showModel实现模态提示窗的文章就介绍到这了,更多相关微信小程序showModel实现模态提示窗内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

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

vue插件--仿微信小程序showModel实现模态提示窗功能

热门推荐

随机推荐