使用vue-cli封装一个可自定义的弹框组件
1.编写弹框样式的组件。2.弹框页面逻辑的处理。3.全局挂载到vue这个对象上,方便全局调用4.调用第一步编写名为confirm的页面,弹框的样式可在此页面自定义<template><div class="modal" v-if="isShow"><div class="main"><p class="msg">{{tex...
·
1.编写弹框样式的组件。
2.弹框页面逻辑的处理。
3.全局挂载到vue这个对象上,方便全局调用
4.调用
第一步编写名为confirm的页面,弹框的样式可在此页面自定义
<template>
<div class="modal" v-if="isShow">
<div class="main">
<p class="msg">{{text.msg}}</p>
<div class="btnBox">
<span @click="close">{{text.btn.no}}</span>
<span @click="ok"">{{text.btn.ok}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
isShow:true,
text:{
type:'提示',
msg:'',
btn:{
ok:'确定',
no:'取消'
},
}
}
},
methods:{
close(){
this.isShow=false;
},
ok(){
this.isShow=false;
},
}
}
</script>
<style scoped>
.modal{
position: absolute;
width:100%;
height:100%;
background: rgba(0,0,0,0.89);
top:0;
left:0;
z-index:99;
}
.main{
position: absolute;
width:80%;
height:3.7rem;
background: url(xxx.png)no-repeat left center;
background-size:100% 100%;
left:10%;
top:50%;
margin-top:-1.85rem;
color:#fff;
padding:0.72rem 1.03rem;
}
.msg{
font-size:0.32rem;
font-weight:500;
color:rgba(48,197,171,1);
}
.btnBox{
display: flex;
justify-content: space-between;
margin-top:0.88rem;
}
.btnBox span{
display: inline-block;
width:1.51rem;
height:0.62rem;
line-height: 0.62rem;
background: url(xxx.png)no-repeat left center;
background-size:100% 100%;
font-weight:500;
color:rgba(48,197,171,1);
font-size:0.33rem;
}
.btnBox span:last-child{
background: url(xxx.png)no-repeat left center;
background-size:100% 100%;
color:rgba(212,255,249,1);
}
</style>
第二步编写名为confirm的js文件,用于编写弹框事件处理逻辑,此处以两个按钮(确定,取消)为例
import Vue from 'vue';
import confirm from 'xxx/confirm.vue';
let confirmConstructor = Vue.extend(confirm);
let theConfirm = function (text) {
return new Promise((res, rej) => { //promise封装,ok执行resolve,no执行rejectlet
let confirmDom = new confirmConstructor({
el: document.createElement('div')
})
document.body.appendChild(confirmDom.$el); //new一个对象,然后插入body里面
confirmDom.text = text; //为了使confirm的扩展性更强,这个采用对象的方式传入,所有的字段都可以根据需求自定义
confirmDom.ok = function () {
res()
confirmDom.isShow = false
}
confirmDom.close = function () {
rej()
confirmDom.isShow = false
}
})
}
export default theConfirm;
//暴露出去,别忘记挂载到vue的原型上
// => 在main.js里面先引入 import theConfirm from './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')
// })
第三步在main.js页面挂载此弹框组件
//公共 弹框组件
import theConfirm from './assets/lib/confirm.js'
Vue.prototype.$confirm = theConfirm;
第四步,调用示例
**html**
<button @click="delete"></button>
**js**
delete(){
this.$confirm({
type:'提示',
msg:'您确定不再关注该客户吗?',
btn:{
ok:'确定',
no:'取消'
}
}).then(() => {
//点击确定之后的处理
}).catch(() => {
Toast({
message:'异常',
position: 'middle',
duration: 1000
});
})
更多推荐
已为社区贡献3条内容
所有评论(0)