前言

最近项目需要做个通用的confirm弹窗,因为项目使用的是elementui,所以打算使用el-dialog来做完成这个功能。

el-dialog需要在vue文件的template中引用,如果每个页面都引用实在是太麻烦了,所以这边基于el-dialog二次封装一个可以通过指令调用的confirm弹窗组件。

组件Demo

index.vue

<template>
    <el-dialog
        :close-on-click-modal="false"
        title="提示"
        :visible.sync="show"
        class="ss-message"
        width="520px"
        @closed="closed()"
    >
        <div class="dialog-body">
            <p v-if="title" class="title">
                <span>{{ title }}</span>
            </p>
            <p v-if="tip" class="tip">{{ tip }}</p>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="show = false">取消</el-button>
            <el-button type="primary" @click="confirm()">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "ssMessage",
    props: {
        show: Boolean,
        title: String,
        tip: String,
    }
}
</script>

index.js

import Vue from "vue"
import component from "./index.vue"
import ElementUI from "element-ui";

Vue.use(ElementUI);

// 引入组件的.vue文件创建构造器
let constructor = Vue.extend(component)

// 渲染并且随后挂载
let instance = new constructor().$mount()

instance.show = false

let message = (params) => {
    instance.title = params.title  // 弹窗标题
    instance.tip = params.tip      // 弹窗内容

    instance.show = true

    // 新增到DOM节点
    document.body.appendChild(instance.$el) 

    // 点击确定按钮触发
    instance.confirm = () => {
        params.confirm(instance)
    }

    // 关闭后移除该节点
    instance.closed = () => {
        document.body.removeChild(instance.$el)
    }
}

// 注册组件
export default {
    install() {
        if (!Vue.$ssMessage) {
            Vue.$ssMessage = message
        }
        Vue.mixin({
            created() {
                this.$ssMessage = Vue.$ssMessage
            }
        })
    }
}

使用方法

this.$ssMessage({
    title: "确定删除此条信息吗?",
    tip: "注:此操作不可逆,请谨慎使用!",
    confirm: instance => {
        // 这边的confirm由index.vue中确认按钮触发
        // 关闭弹窗
        instance.show = false
    }
})

项目中使用的API

构造:Vue.extend()

挂载:vm.$mount()

注册:install()