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>

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;

<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;
   }
  }
 }

<style lang="less" scoped>
 #tip_alertModal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  .t-alert-mask {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .3);
  }
  .t-alert-container {
   position: absolute;
   top: 50%;
   left: 50%;
   min-width: 240px;
   max-width: 400px;
   height: auto;
   background-color: #fff;
   transform: translate(-50%, -50%);
   border-radius: 4px;
   .t-alert-title {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgba(115, 134, 255, 1);
    border-radius: 4px 4px 0px 0px;
    span {
     position: absolute;
     top: 50%;
     left: 10px;
     font-weight: 500;
     font-size: 16px;
     color: #fff;
     transform: translate(0, -50%);
    }
    img {
     position: absolute;
     top: 50%;
     right: 10px;
     transform: translate(0, -50%);
     cursor: pointer;
    }
   }
   .t-alert-content {
    text-align: center;
    span {
     font-family: PingFangSC-Regular;
     font-weight: 400;
     font-size: 14px;
     color: rgba(51,51,51,1);
    }
    span.content-text {
     display: inline-block;
     width: 100%;
     height: auto;
     font-weight: 400;
     font-size: 14px;
     color: #333;
     padding: 20px 18px;
    }
    .t-content-list {
      min-width: 320px;
      height: auto;
      text-align: left;
     .list-title {
      position: relative;
      padding: 10px 0 10px 10px;
      img {
       display: inline-block;
       position: absolute;
       width: 20px;
       margin-right: 10px;
      }
      span {
       display: inline-block;
       vertical-align: middle;
       padding-left: 31px;
      }
     }
     .list-content {
      width: 100%;
      height: auto;
      ul {
       padding-bottom: 10px;
       li {
        width: 100%;
        height: auto;
        padding-bottom: 10px;
        span {
         vertical-align: top;
        } 
        span.title {
         display: inline-block;
         padding-left: 41px;
         padding-right: 3px;
         text-align: left;
        }
       }
      }
     }
    }
   }
   .t-alert-confirm {
    width: 100%;
    padding-bottom: 17px;
    text-align: center;
    button {
     display: inline-block;
     width: 80px;
     height: 36px;
     border: none;
     background: rgba(115, 134, 255, 1);
     font-weight: 400;
     font-size: 16px;
     color: #fff;
     border-radius: 4px;
     outline: none;
     cursor: pointer;
    }
    .cancel-btn {
     margin-left:20px;
     background:rgba(151,193,234,1);
     font-family: PingFangSC-Regular;
     font-weight: 400;
     font-size: 16px;
     color: rgba(255,255,255,1);  
    }
   }
  }
 }
</style>

<template>
 <transition name="fade">
  <div
    class="v-alert g-center"
    :style="{zIndex}">
   <div
     class="v-cont"
     :class="{shadow:!hideCont}"
     :style="[innerWidth]">
    <div
      v-if="title.trim()"
      :style="[{backgroundColor:bgColorTit,color:cancelCol},titleStyle]"
      class="title g-font18">
     {{title}}
     <span class="title-data">{{titleData}}</span>
    </div>
    <div
      v-if="isCancel"
      class="v-cancel">
     <div
       class="cancel-icon"
       :style="{color:cancelCol}"
       @click="cancel">
      
     </div>
    </div>
    <slot name="slot3"></slot>
    <div
      v-if="!hideCont"
      :style="styles"
      class="content">
     <slot></slot>
    </div>
    <slot name="slot2"></slot>
   </div>
   <div
     class="g-fixed alert-wrap"
     @click="$emit('cancel')"
     :style="{backgroundColor:bgWrapColor}"></div>
  </div>
 </transition>
</template>

<script>
 export default {
  name: "v-alert",
  props: {
   title: {default: ""},
   // titFontSize:{default: '16'},
   bgColorTit: {default: "#40404C"},
   bgColor: {default: "#fff"}, // 背景色
   bgWrapColor: {default: "rgba(42, 47, 59, 0.6)"}, //外套背景色
   cancelCol: {default: "#fff"}, //按钮颜色
   width: {required: true, type: Number}, //宽度
   minWidth: {type: Number, default: 0},
   isCancel: {type: Boolean, default: true}, //是否显示关闭按钮
   titleData: {default: ""},
   hideCont: {type: Boolean, default: false}, //是否隐藏cont
   zIndex: {default: 2000},
   styles: {
    default() {
     return {};
    },
    type: Object
   },
   titleStyle: {
    default() {
     return {};
    },
    type: Object
   },
  },
  components: {},
  computed: {
   innerWidth() {
    let dfu = {
     backgroundColor: this.bgColor
    };
    this.minWidth > 0
     ? dfu.minWidth = `${this.minWidth}px`
     : dfu.width = `${this.width}px`;
    return dfu;
   }
  },
  methods: {
   cancel() {
    this.$emit("cancel");
   }
  },
  mounted() {
   document.addEventListener(
    "keydown",
    event => {
     let keyCode = this.$_lib.getKeycode(event);
     if (keyCode === 'Escape' || keyCode === 27) this.$emit("cancel");
    },
    false
   );
  }
 };
</script>

<style lang="scss"
  rel="stylesheet/scss"
  scoped>
 .v-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  .alert-wrap {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*z-index: 2000;*/
  }
  .v-cont {
   min-width: 100px;
   min-height: 100px;
   background-color: #ffffff;
   position: relative;
   border-radius: 2px;
   .shadow {
    box-shadow: 0 2px 30px rgba(42, 47, 59, 0.2);
   }
   z-index: 2001;
   .title {
    width: 100%;
    line-height: 70px;
    color: #ffffff;
    padding-left: 30px;
   }
   .title-data {
    color: #f8e19a;
   }
   .content {
    padding: 40px;
    /*padding: 60px 40px 50px 40px;*/
    word-wrap: break-word;
    text-align: left;
   }
  }
  .v-cancel {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 70px;
  }
  .cancel-icon {
   position: absolute;
   text-align: center;
   width: 20px;
   height: 20px;
   line-height: 20px;
   right: 20px;
   top: 50%;
   margin-top: -10px;
   color: #ffffff;
   cursor: pointer;
   transition: 200ms;
   &:hover {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
   }
  }
 }
</style>

import VAlert from './v-alert'; //弹窗
export default {
 install(Vue) {
  Vue.component('VAlert', VAlert);
 }
};

<template>
  <v-alert
   v-if="is_alert"
   @cancel="is_alert=false"
   bg-color-tit="#40404C"
   cancel-col="#fff"
   :title="提示"
   :width="680">
   <div></div>
  </v-alert>
</template>