概述

在vue学习中，我们会用到大量弹窗来实现业务的交互，比如，弹窗提醒删除，添加，通知，修改，等等相关长用的类型，在今天我们写一个弹窗组件开发，如果想学习vueui组件的开发，请关注我们的ui组件库ZMZUI，搜索zmzui即可，也可关注我们的网站点击上方git地址进行源码下载！

messgeBox.vue

主要的样式展示在这里。

<template>
    <transition name="messagebox-fade" @after-leave="handleAfterLeave">
        <div class="zmz-messageBox" v-if="visible">
            <div class="zmz-messageBoxsection">
                <div class="zmz-messageBoxheader—title" :class="{ 'is-center': titleCenter }">{{ title }}</div>
            </div>
            <div class="zmz-messageBoxbody" :class="{ 'is-center': contentCenter }"><i v-if="type != ''" :class="[typeClass]"></i>{{ content }}</div>
            <zmz-button size="small" @click="handleAction('yes')" :class="{'is-left':bottonCenter=='left','is-right':bottonCenter=='right'}">{{ yesBtnText }}</zmz-button>
            <zmz-button type="confirm" @click="handleAction('cancel')" :class="{'is-left':bottonCenter=='left','is-right':bottonCenter=='right'}" size="small">{{ cancelBtnText }}</zmz-button>
        </div>
        </div>
    </div>
</transition>
</template>

<script>
export default {
    name: 'MyConfirm',
    data() {
        return {
            visible: false,
            title: '',
            content: '',
            yesBtnText: '确定',
            cancelBtnText: '取消',
            type: '',
            promiseStatus: null,
            contentCenter: false,
            titleCenter: false,
            bottonCenter: '' 
        }
    },
    computed: {
        typeClass() {
            return this.type  ? zmz-icon--${&nbsp;this.type&nbsp;} : '';
        }
    },
    watch: {
        visible: function(curVal) {}
    },
    mounted () {
    },
    methods: {
        handleAfterLeave() {
            this.$el.parentNode.removeChild(this.$el);
        },
        confirm() {
            let _this = this;
            this.visible = true;
            return new Promise(function(resolve, reject) {
                _this.promiseStatus = { resolve, reject };
            });
        },
        handleAction(action) {
            this.visible = false;
            if (action == 'yes') {
                this.promiseStatus && this.promiseStatus.resolve();
            } else {
                this.promiseStatus && this.promiseStatus.reject();
            }
        }
    }
};
</script>

messgeBox.js

用来出来弹窗的显示与消失，点击显示插入dom,消失移除dom

import Vue from 'vue'
import Confirm from './main.vue'
const ConfirmBox = Vue.extend(Confirm);
function confirm(title, content , options){
  if (typeof title === 'object') {
    options = title;
    title = '';
  } else if (title === undefined) {
    title = '';
  }
  options = Object.assign({
    title: title,
    content: content,
  }, options);
  let instance = new ConfirmBox({
    data: options
  }).$mount();
  document.body.appendChild(instance.$el);
  return instance.confirm();
};
export default confirm

在需要的地方加载引入

import messgeBox from './assets/messgeBox.js'
Vue.prototype.$confirm= messgeBox ;

在需要的地方写入具体操作变量查看zmzui

this.$confirm('提示', '此操作将删除该文件, 是否继续？', {
    type: 'warning'
}).then(() => {
    // 点是
    console.log('是')
}).catch(() => {
    // 点否
    console.log('否')
})