vue封装一个简单的弹出框

<template>
  <div id="tip_alertModal">
    <div class="t-alert-mask"></div>
    <div class="t-alert-container">
      <div class="t-alert-title">
        <span>
          {{title}}
        </span>
        <img @click="close" src="../../../static/images/alert/guanbi.png" alt="">
      </div>
      <div class="t-alert-content">
        <span class="content-text">
          {{content}}
        </span>
      </div>
      <div class="t-alert-confirm">
        <button @click="confirm">确定</button>
        <!-- 默认是没有取消按钮的，data定义默认true false -->
        <button class="cancel-btn" v-show="cancelBtn" @click="cancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true, // 通过这个属性，控制是否移除dom元素
        title:'', // 顶部标题
        content:'', // 内容
        cancelBtn: false // 取消按钮
      };
    },
    methods: {
      close() {
        // 右上角关闭
        this.a_close && this.a_close();
        this.show = false;
        // 删除判断增加的window属性
        delete window.alertIsShow;
      },
      confirm() {
        // 确定
        this.a_confirm && this.a_confirm();
        this.show = false;
        // 删除判断增加的window属性
        delete window.alertIsShow;
      },
      cancel() {
        // 取消
        this.a_cancel && this.a_cancel();
        this.show = false;
        // 删除判断增加的window属性
        delete window.alertIsShow;
      }
    },
    watch: {
      show(cur, old) {
      	// 通过监控data里的show属性  弹框有三个事件（右上角取消  确定按钮  取消按钮）
      	// 每个事件写了 this.show = false
      	// 当弹框出现的时候 点击任何一个事件  都会触发这里的监控事件  将页面上的弹框Dom移除
        if (cur === false) {
          let tip_alert = document.getElementById('tip_alertModal');
          tip_alert.parentNode.removeChild(tip_alert);
        }
      }
    }
  }
</script>

//定义一个js文件
import Vue from 'vue'; 
import Alert from '@/components/public/alertModal'; //引入刚才写的弹框组件 
let AlertConstructor = Vue.extend(Alert); // 返回一个“扩展实例构造器” 

let AlertModal = (o) => {
  let alertDom = new AlertConstructor({
    el: document.createElement('div'); //将Alert组件挂载到新创建的div上 
  })
  document.body.appendChild(alertDom.$el); //把Alert组件的dom添加到body里 
	
  // 标题
  alertDom.title = o.title || '信息';
  // 单条内容
  alertDom.content = o.content;
  // 关闭按钮
  alertDom.cancelBtn = o.cancelBtn;

  // 弹框三个事件 右上角关闭 确定 取消
  alertDom.a_close = o.close || null;
  alertDom.a_confirm = o.confirm || null;
  alertDom.a_cancel = o.cancel || null;

}
export default AlertModal;


main.js
import alert from '@/common/alertModal' //这里引入的是js文件 
Vue.prototype.$alert = alert;  



//在任意组件调用
<template>
  <div>
    <button @click="operate">点击调用弹框</button>
  </div>
</template>

<script>
export default {
  methods: {
    operate() {
      this.$alert({
        title: '信息',
        content: '登入成功！',
        cancelBtn: true, //这个是启用取消按钮，
        close() {
          // 这里执行点击右上角需要做的事，默认执行关闭弹框
        },
        confirm() {
          // 这里执行点击确定按钮需要做的事，默认执行关闭弹框
        },
        cancel() {
          // 这里执行点击取消按钮需要做的事，默认执行关闭弹框
        }
      })
    }
  }
}
</script>

控制一个页面只显示一个弹窗
methods: {
operate () {
if (!window.alertIsShow) {
// 弹框模板有个 delete window.alertIsShow 是为了弹框关闭之后能再次显示
this.$alert({
title: ‘信息’,
content: ‘登入成功！’,
cancelBtn: true,
close () {
// 这里执行点击右上角需要做的事，默认执行关闭弹框
},
confirm () {
// 这里执行点击确定按钮需要做的事，默认执行关闭弹框
},
cancel () {
// 这里执行点击取消按钮需要做的事，默认执行关闭弹框
}
})
window.alertIsShow = true;
}
}
}

less