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