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 '../components/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.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: '
你好
',
        cancelValStyle: {
      color: "red" },
        btn: {
     
          confirmVal: "确a定",
          cancelVal: "取a消"
        }
      })
        .then((res) => {
     
          console.log("yes",res);
          //点击确定之后的处理
        })
        .catch((err) => {
     
          console.log("no",err);
        });
    }
  }

导入

在前辈的基础上写的，只做小分享用。