站长资源网络编程
vue弹出框组件封装实例代码
简介新学vue，参考别人封装弹出层组件。好用！1.你需要先建一个弹出框的模板：//首先创建一个mack.vue
新学vue，参考别人封装弹出层组件。好用！
1.你需要先建一个弹出框的模板：
//首先创建一个mack.vue
<template>
<div class="mack" v-if="isShow">
<div class="mackWeb" :style="text.mackStyle">
<div class="title font_b" v-if="text.title" :style="text.titleStyle">{{text.title.trim()}}</div>
<div class="mesg font_s" v-if="text.mesg" :style="text.mesgStyle">{{text.mesg.trim()}}</div>
<div v-html="text.cntMsg"></div>
<div class="footb font_s">
<div
class="foot_l borderlf borderTop"
@click="cancel"
v-if="text.cancel"
:style="text.cancelValStyle"
>{{text.btn.cancelVal}}</div>
<div
class="foot_r borderTop"
@click="confirm"
v-if="text.confirm"
:style="text.confirmValStyle"
>{{text.btn.confirmVal}}</div>
</div>
</div>
</div>
</template>
//写js
<script>
export default {
data() {
return {
isShow: true,
text: {
title: "",
mesg: "",
cnTmesg: "",
cancel: true,
confirm: true,
mackStyle: null,
titleStyle: null,
mesgStyle:null,
cancelValStyle: null,
confirmValStyle: null,
btn: {
confirmVal: "确定",
cancelVal: "取消"
}
}
};
},
methods: {
cancel() {
this.isShow = false;
},
confirm() {
this.isShow = false;
}
}
};
</script>
//css
<style scoped lang='less'>
.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/50rem solid #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/50rem 15/50rem 0 15/50rem;
}
.mesg {
padding: 15/50rem;
text-align: center;
}
.footb {
display: inline-table;
width: 100%;
.borderlf {
border-right: 1/50rem solid #e4e4e4;
}
div {
display: table-cell;
box-sizing: border-box;
text-align: center;
padding: 10/50rem 0;
}
}
}
}
</style>
2.接着你需要一个js：mackjs.js
import Vue from 'vue';
import confirm from './mack';
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 = Object.assing( 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')
// })
-3.你接着需要在main.js导入这个文件
import macksjs from './assets/mackjs' Vue.prototype.$confirm= macksjs ;
-4.最后在你需要引入的vue文件中直接调用就好了
<button @click="deleteaas">我是弹出框</button>
methods:{
deleteaas() {
this.$confirm({
title: "addd",
mesg: "您确定不再关注该客户吗？",
cntMsg: '<div class="helAA">你好</div>',
cancelValStyle:{color:'red'},
btn: {
confirmVal: "确a定",
cancelVal: "取a消"
}
})
.then(() => {
console.log("yes");
//点击确定之后的处理
})
.catch(() => {
console.log("no");
});
}
}
导入
总结
以上所述是小编给大家介绍的vue弹出框组件封装实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
上一篇：Vue防止白屏添加首屏动画的实例