新学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="tMsg"></div><div class="footb font_s"><divclass="foot_l borderlf borderTop"@click="cancel"v-if="text.cancel":style="text.cancelValStyle">{{text.btn.cancelVal}}</div><divclass="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 '../components/mack';let confirmConstructor = Vue.extend(confirm);let theConfirm = function (text) {return new Promise((res, rej) => {//promise封装，ok执行resolve，no执行rejectletlet confirmDom = new confirmConstructor({el: document.createElement('div')})document.body.appendChild(confirmDom.$el); //new一个对象，然后插入body里面confirmDom.text = Object.assign({},confirmDom.text, text); //为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义confirmDom.cancel = function () {console.log("点击的ok")confirmDom.isShow = false;res("确认")}confirmDom.confirm = function () {console.log("点击的取消")confirmDom.isShow = false;rej("取消")}})}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() {deleteaas() {this.$confirm({title: "adddssssaaa",mesg: "您确定不再关注该客户吗？",cntMsg: '<div class="helAA">你好</div>',cancelValStyle: {color: "red" },btn: {confirmVal: "确a定",cancelVal: "取a消"}}).then((res) => {console.log("yes",res);//点击确定之后的处理}).catch((err) => {console.log("no",err);});}}
导入
在前辈的基础上写的，只做小分享用。
