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

新学vue，参考别人封装弹出层组件。好用！1.你需要先建一个弹出框的模板：//首先创建一

新学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弹出框组件封装实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！