VUE2实现事件驱动弹窗示例

前几天想了解vue如何写弹窗组件

有以下两种可取的写法：

1.状态管理 如果弹窗组件放在根组件，使用vuex来管理组件的show和hide。放在组件内，通过增加v-show或v-if来控制，可结合slot，定义不同需求的弹窗

2.事件管理 注册一个全局事件来打开弹窗，传入需展示的文字和相关的逻辑控制，可结合promise，实现异步

觉得对用像confirme和propmt这类弹窗，还是事件驱动的好。最好就是能使用promise回调。

于是手痒就写了一个。下面是代码。

propmt.js

import Vue from 'vue'import promptComponent from './prompt.vue' // 引入弹窗的vue文件const promptConstructor = Vue.extend(promptComponent); // 注册组件let instance = new promptConstructor().$mount(''); // 获得组件的实例document.body.appendChild(instance.$el); // 将组件的element插入到body中const Alert = (text,okText)=>{  if(instance.show === true) { //防止多次触发    return;  }  // 为弹窗数据赋值  instance.show = true;   instance.isAlert = true;  instance.okText = okText||'确定';  instance.message = text;  //返回一个promise对象，并为按钮添加事件监听  return new Promise(function(resolve,reject) {    instance.$refs.okBtn.addEventListener('click',function() {      instance.show = false;      resolve(true);    })  })};const Confirm = (text,okText,cancelText)=>{  if(instance.show === true) {    return;  }  instance.show = true;  instance.okText = okText||'确定';  instance.cancelText = cancelText||'取消';  instance.message = text;  return new Promise(function(resolve,reject) {    instance.$refs.cancelBtn.addEventListener('click',function() {      instance.show = false;      resolve(false);    });    instance.$refs.okBtn.addEventListener('click',function() {      instance.show = false;      resolve(true);    })  })};const Prompt = (text,okText,inputType, defaultValue)=>{  if(instance.show === true) {    return;  }  instance.show = true;  instance.isPrompt = true;  instance.okText = okText||'确定';  instance.message = text;  instance.inputType = inputType || 'text';  instance.inputValue = defaultValue || '';  return new Promise(function(resolve,reject) {    instance.$refs.okBtn.addEventListener('click',function() {      instance.show = false;      resolve(instance.inputValue);    })  })};export {Alert,Confirm,Prompt}

prompt.vue

<style lang="less" scoped>  .confirm-enter-active {    transition: all .2s;  }  .confirm-leave-active {    transition: opacity .2s;  }  .confirm-leave-to {    opacity: 0;  }  .confirm-enter {    opacity: 0;  }  .confirm {    position: relative;    font-family: PingFangSC-Regular;    font-size: 17px;    -webkit-user-select: none;    user-select: none;    // 遮罩层样式    .masker {      position: fixed;      top: 0;      left: 0;      width: 100%;      height: 100%;      background-color: rgba(0, 0, 0, .4);      -webkit-transition: opacity .1s linear;      transition: opacity .1s linear;      z-index: 100;    }    // 入库数据错误样式    .box {      position: absolute;      top: 50%;      left: 50%;      width: 72%;      -webkit-transform: translate(-50%, -50%);      transform: translate(-50%, -50%);      text-align: center;      border-radius: 12px;      background-color: #fff;      .message {        height: 97px;        line-height: 24px;        font-family: PingFangSC-Regular;        font-size: 17px;        vertical-align: middle;        color: #999;        letter-spacing: -0.41px;        p {          margin: 20px auto 0 auto;          vertical-align: middle;        }        &::after {          content: '';          height: 100%;        }      }      .prompt {        margin: 20px 0;        width: 100%;        p {          margin: 5px auto;          font-size: 17px;          line-height: 24px;        }        input {          margin: 5px auto;          border: 1px solid #333;          border-radius: 6px;          width: 100px;          height: 30px;          font-size: 14px;          line-height: 20px;          text-align: center;        }      }      .button-group {        a {          width: calc(50% - 0.5px);          text-align: center;          font-size: 17px;          line-height: 43px;          color: blue;        }        .max-width {          width: 100% !important;;        }      }    }  }</style><template>  <transition name="confirm">    <div class="confirm" v-show="show">      <div class="masker" @touchmove.prevent>        <div class="box">          <div class="message" v-if="!isPrompt">            <p>{{message}}</p>          </div>          <div class="prompt" v-if="isPrompt">            <p>{{message}}</p>            <input type="text" v-model="inputValue" v-if="inputType === 'text'" ref="inputEl">            <input type="tel" v-model.number="inputValue" @keydown="enterCheck" v-if="inputType === 'tel'" ref="inputEl">          </div>          <div class="button-group clearfix bd-top">            <a class="bd-right fl" ref="cancelBtn" v-show="!isAlert && !isPrompt">{{cancelText}}</a>            <a class="fr" ref="okBtn" :class="{'max-width': isAlert || isPrompt}">{{okText}}</a>          </div>        </div>      </div>    </div>  </transition></template><script type="text/ecmascript-6">  import {mapState} from 'vuex'  export default{    data() {      return {        show: false,        message: '请输入提示语',        okText: '确定',        cancelText: '取消',        isAlert: false,        isPrompt: false,        inputValue: '',        inputType: ''      }    },    methods: {      // 金额输入框校验      enterCheck(event) {        // 只允许输入数字,删除键,11位数字        if (event.keyCode === 46 || event.keyCode === 8) {          return;        }        if (event.keyCode < 47 || event.keyCode > 58 || event.keyCode === 190) {          event.returnValue = false;        }      },    },    watch: {      show(){        if (this.show) {          this.$nextTick(() => {            console.log(this.$refs.inputEl);            console.log(this.inputType);            this.$refs.inputEl.focus();          });        }      }    }  }</script>