VUE2事件驱动弹窗实现示例

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

有以下两种可取的写法：

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

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

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

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

propmt.js

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">
 <p class="confirm" v-show="show">
 <p class="masker" @touchmove.prevent>
 <p class="box">
 <p class="message" v-if="!isPrompt">
 <p>{{message}}</p>
 </p>
 <p 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">
 </p>
 <p 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>
 </p>
 </p>
 </p>
 </p>
 </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>

main.js