vue自定义提示弹出窗口组件

在使用iview的this.$Modal.confirm提示组件时，很难去修改默认的组件样式，如果自己能定义一个全局的提示组件，那在修改样式以及自定义提示组件、使用i18n多语言方面都会很方便

提示组件：

在components上自定义一个组件

<template>
<transition-group name='fade'>
    <!-- 退出弹窗 -->
    <div class="quit_dialog" key="1" v-if="isQuit" @touchmove.prevent></div>
    <div class="quit_box" v-show="isQuit" key="2">
        <div class="topBox">
            <img src="@/assets/main/tip.png">
            <span class="tip" v-if="title===''">提示</span>
            <span class="tip" v-else>{{title}}</span>
        </div>
        <!-- 没有传值时默认显示 -->
        <div class="quit_title" v-if="content===''">确认执行该操作吗？</div>
        <!-- 传了值时的显示 -->
        <div class="quit_title" v-else>{{content}}</div>
        <button class="cancel_btn" @click="leftClick">取消</button>
        <button class="confirm_btn" @click="rightClick">确认</button>
    </div>
</transition-group>
</template>
<script>
export default {
    name: 'Popup',
    data() {
        return {
            isQuit: false,
            imgUrl: '',
            title: '',
            content: '',
            btnText: '',
            rightText: ''
        }
    },
    methods: {
        leftClick() {
            this.leftBtn()
            this.isQuit = false
        },
        rightClick() {
            this.rightBtn()
            this.isQuit = false
        }
    }
}
</script>
<style lang="less">
// 退出弹窗
.fade-enter,
.fade-leave-active {
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.35s;
}
// 全局弹窗
.quit_dialog {
    background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
}

.quit_box {
    width: 460px;
    background:rgba(0,58,184,0.8);
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -230px;
    margin-top: -190px;
    z-index: 10001;
    border-radius: 10px;
    text-align: center;
    padding: 40px 30px;
    .topBox{
        display: flex;
        align-items: center;
        img{
            width: 24px;
        }
        .tip{
            margin-left:10px;
            font-size: 16px;
            color:#fff;
        }
    }
    .quit_title{
        color: #fff;
        font-size: 16px;
        margin: 10px 0px 30px 0;
    }
    button {
        padding:4px 0px;
        font-size: 16px;
        border-radius: 4px;
        width: 60px;
        text-align: center;
        cursor: pointer;
    }
    .cancel_btn{
        color: #fff;
        border: 1px solid #fff;
        margin-right: 32px;
        background:rgba(158,167,180,0.3);
    }
    .confirm_btn {
        box-shadow: 0px 3px 4px 0px rgba(1, 84, 58, 0.27);
        border: 1px solid #0765F3;
        background-color: rgba(0,58,184,0.8);
        color:#11B8FE;
    }
}
</style>

添加一个js文件，用于写调用该组件的代码：confirm.js

import Vue from 'vue'
import conforms from '@/components/confirmMessage'

const PopupBox = Vue.extend(conforms)

conforms.install = function(data) {
    console.log("shuju ", data)
    let instance = new PopupBox({
        data
    }).$mount()
    document.body.appendChild(instance.$el)
    Vue.nextTick(() => {
        instance.isQuit = true
    // isQuit 和弹窗组件里的isQuit对应，用于控制显隐
    })
}
export default conforms

在main.js中引用该方法，并且保存在vue的原型上，使之可以随地调用

// 引入自定义的confirm弹窗组件
import conforms from './utils/confirm'
Vue.prototype.$conforms = conforms.install

在页面中使用：

linkAreaFunc() {
            if (this.selectAreaid && this.currentImage.id) {
                this.$conforms({
                    content: '确认关联该区域和建筑物吗？',
                    // 确认
                    rightBtn: () => {
                        let para = [{
                            rectTarget: this.selectAreaid,
                            id: this.currentImage.id
                        }]
                        this.addEditorGraphic(para)
                        this.linkAreashow = false
                    },
                    // 取消
                    leftBtn: () => {}
                })        
            } else {
                this.$Message.info('请选择关联区域和建筑物！')
            }
        },

上图中可以定义图片，组件里面的内容，这样可以实现每个地方调用的都是不一样的内容