update：更新

src/locale/lanres/components/components_BO_CN_base.ts

@@ -335,6 +335,10 @@ function getLocaleResourceBase(){
         loadMore: 'མང་ཙམ་བླུགས་རོགས།',
         noMore: 'དེ་ལས་མང་བ་མི་འདུག'
       },
+      appmessagebox: {
+        ok: 'ངོས་འཛིན་',
+        cancel: 'མེད་པར་བཟོ་བ་',
+      },
       diskFileUpload:{
         fileDrag: 'ཡིག་ཆ་འདིར་དྲུད་།，ཡང་ན་',
         clickUpload: 'སྣོན་ནས་ཡར་སྐུར་དགོས།',

src/locale/lanres/components/components_en_US_base.ts

@@ -345,6 +345,10 @@ function getLocaleResourceBase(){
         loadMore: 'Load more',
         noMore: 'No more'
       },
+      appmessagebox: {
+        ok: "OK",
+        cancel: "Cancel"
+      },
       diskFileUpload:{
         fileDrag: 'Drag the file here, or',
         clickUpload: 'Click on the upload',

src/locale/lanres/components/components_zh_CN_base.ts

@@ -346,6 +346,10 @@ function getLocaleResourceBase(){
         loadMore: '加载更多',
         noMore: '没有更多了'
       },
+      appmessagebox: {
+        ok: "确 认",
+        cancel: "取 消"
+      },
       diskFileUpload:{
         fileDrag: '将文件拖到此处，或',
         clickUpload: '点击上传',

src/utils/app-message-box/app-message-box.less

+.app-modal-ok {
+    .ivu-modal-header {
+        padding-left: 32px;
+        padding-top: 28px;
+        border-bottom: 0;
+        .header {
+            text-align: left;
+            line-height: 26px;
+            height: auto;
+            color: #333333;
+            font-weight: 600;
+            font-size: 18px;
+            i {
+                font-size: 24px;
+                position: relative;
+                top: 1px;
+                margin-right: 8px;
+            }
+        }
+    }
+    .ivu-modal-body {
+      padding: 0 32px 0 68px;
+      color: #707070;
+      .content {
+        line-height: 1.5;
+        font-size: 16px;
+      }
+      >.body-icon {
+          height: 40px;
+          i {
+            font-size: 24px;
+            position: relative;
+            top: 1px;
+            margin-right: 8px;
+            display: block;
+            position: absolute;
+            left: 32px;
+            top: 40px;
+          }
+      }
+    }
+    .ivu-modal-footer {
+      border-top: 0;
+      padding: 24px 32px 24px 18px;
+      .ivu-btn {
+        width: 80px;
+        height: 34px;
+        font-size: 15px;
+      }
+      .ivu-btn-primary {
+        color: rgb(187,218,254);
+      }
+      .ivu-btn-default {
+        color: rgb(157,157,157);
+      }
+    }
+
+    .info {
+        i {
+            color: #2d8cf0;
+        }
+    }
+    .success {
+        i {
+            color: rgb(25,190,107);
+        }
+    }
+    .warning {
+        i {
+            color: #f90;
+        }
+    }
+    .error {
+        i {
+            color: #ed4014;
+        }
+    }
+    .question {
+      i {
+        color: #DADADA
+      }
+    }
+}

src/utils/app-message-box/app-message-box.ts

+import { Subject } from 'rxjs';
+import Vue from 'vue';
+import { MessageBoxOptions } from './interface/message-box-options';
+import appMessageBox from "./app-message-box.vue";
+import i18n from '@/locale';
+import store from '@/store';
+
+/**
+ * 提示信息
+ *
+ * @export
+ * @class AppMessageBox
+ */
+export class AppMessageBox {
+    /**
+     * 唯一实例
+     *
+     * @private
+     * @static
+     * @memberof AppMessageBox
+     */
+    private static readonly instance = new AppMessageBox();
+
+    /**
+     * vue 实例
+     *
+     * @private
+     * @type {Vue | null}
+     * @memberof AppModal
+     */
+    private vueExample: Vue | null = null;
+
+
+    /**
+     * 引用对象
+     *
+     * @private
+     * @type {*}
+     * @memberof AppMessageBox
+     */
+    private refs: any;
+
+    /**
+     * 获取唯一实例
+     *
+     * @static
+     * @return {*}  {AppMessageBox}
+     * @memberof AppMessageBox
+     */
+    public static getInstance(): AppMessageBox {
+        return AppMessageBox.instance;
+    }
+
+
+    /**
+     * 打开提示信息
+     *
+     * @param {*} options
+     * @return {*}
+     * @memberof AppMessageBox
+     */
+    public open(options: any): Subject<any> {
+        return this.createVueExample(options)
+    }
+
+    /**
+     * 创建vue 实例
+     *
+     * @private
+     * @param {ModalConfirmOptions} opt
+     * @return {*}  {Subject<any>}
+     * @memberof AppMessageBox
+     */
+    private createVueExample(opt: MessageBoxOptions): Subject<any> {
+        const self: any = this;
+        try {
+            let props = { ...opt };
+            this.vueExample = new Vue({
+                store: store,
+                i18n: i18n,
+                render(h) {
+                    return h(appMessageBox, { props, class: opt.customClass });
+                }
+            }).$mount();
+            document.body.appendChild(this.vueExample.$el);
+            this.refs = this.vueExample.$children[0];
+            return this.refs.getSubject();
+        } catch (error) {
+            console.error(error);
+            return new Subject<any>();
+        }
+    }
+
+    /**
+     * 关闭
+     *
+     * @memberof AppMessageBox
+     */
+    public close() {
+        if (this.refs) {
+            this.refs.close();
+        }
+    }
+
+    /**
+     * @description 销毁临时vue对象
+     * @memberof AppModal
+     */
+    destroyVueExample() {
+        if (this.vueExample) {
+            this.vueExample.$destroy();
+            this.vueExample = null;
+        }
+    }
+}

src/utils/app-message-box/app-message-box.vue

+<template>
+    <modal
+        v-model="isShow"
+        :ref="refName"
+        class="app-modal-ok"
+        :class="customClass"
+        :closable="showClose"
+        :zIndex="zIndex"
+        :mask="mask"
+        :maskClosable="maskClosable"
+        :className="getClassName()"
+    >
+        <p slot="header" v-if="title" :class="type" class="header">
+            <i :class="geticonClass()"></i>
+            {{ title }}
+        </p>
+        <p v-else :class="[type,'body-icon']">
+          <i  :class="geticonClass()"></i>
+        </p>
+        <div class="content" v-html="content"></div>
+        <div slot="footer" ref="modelokFooter">
+            <template v-for="item in buttonModel">
+                <i-button v-if="item.visibel" :key="item.value" :type="item.type" @click="button_click(item)">
+                    {{ item.text }}
+                </i-button>
+            </template>
+            <slot name="customFooter" @click="button_click"></slot>
+        </div>
+    </modal>
+</template>
+<script lang="ts">
+import { VNode } from 'node_modules/vue/types';
+import { Subject } from 'rxjs';
+import { AppMessageBox as AppMessage } from './app-message-box';
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import './app-message-box.less';
+@Component({
+    components: {},
+})
+export default class AppMessageBox extends Vue {
+    /**
+     * 对话框类型
+     *
+     * @type {('info' | 'success' | 'warning' | 'error')}
+     * @memberof AppMessageBox
+     */
+    @Prop({ default: 'info' })
+    public type?: 'info' | 'success' | 'warning' | 'error' | 'question';
+
+    /**
+     * 标题
+     *
+     * @type {string}
+     * @memberof AppMessageBox
+     */
+    @Prop()
+    public title?: string;
+
+    /**
+     * 内容
+     *
+     * @type {string}
+     * @memberof AppMessageBox
+     */
+    @Prop()
+    public content?: string;
+
+    /**
+     * 按钮类型
+     *
+     * @type {string}
+     * @memberof AppMessageBox
+     */
+    @Prop({ default: 'okcancel' })
+    public buttonType?: string | 'okcancel' | 'yesno' | 'yesnocancel' | 'ok';
+
+    /**
+     * 启用自定义底部
+     *
+     * @type {boolean}
+     * @memberof ModalokOptions
+     */
+    @Prop({ default: false })
+    public visibleCustomFooter?: boolean;
+
+    /**
+     * 自定义底部
+     *
+     * @type {VNode}
+     * @memberof ModalokOptions
+     */
+    @Prop()
+    public customFooter?: VNode;
+
+    /**
+     * 自定义类名
+     *
+     * @type {string}
+     * @memberof AppMessageBox
+     */
+    @Prop()
+    public customClass?: string;
+
+    /**
+     * 自定义类名
+     *
+     * @type {string}
+     * @memberof AppMessageBox
+     */
+    @Prop()
+    public iconClass?: string;
+
+    /**
+     * 是否显示右上角的关闭按钮
+     *
+     * @type {string}
+     * @memberof AppMessageBox
+     */
+    @Prop({ default: false })
+    public showClose?: boolean;
+
+    /**
+     * 是否显示遮罩
+     *
+     * @type {string}
+     * @memberof AppMessageBox
+     */
+    @Prop({ default: true })
+    public mask?: boolean;
+
+    /**
+     * 是否可以点击遮罩关闭
+     *
+     * @type {string}
+     * @memberof AppMessageBox
+     */
+    @Prop({ default: false })
+    public maskClosable?: boolean;
+
+    /**
+     * 显示模式
+     *
+     * @type {string}
+     * @memberof AppMessageBox
+     */
+    @Prop({ default: 'center' })
+    public showMode?: string | 'center';
+
+    /**
+     * 关闭回调
+     *
+     * @type {Function}
+     * @memberof AppMessageBox
+     */
+    @Prop()
+    public onClose?: Function;
+
+    /**
+     * 引用对象名称
+     *
+     * @type {string}
+     * @memberof AppMessageBox
+     */
+    @Prop()
+    public refName?: string;
+
+    /**
+     * 内置按钮模型
+     *
+     * @type {any}
+     * @memberof AppMessageBox
+     */
+    public buttonModel = [
+        { text: this.$t('components.appmessagebox.ok'), value: 'ok', type: 'primary', visibel: false },
+        { text: this.$t('app.commonwords.yes'), value: 'yes', type: 'primary', visibel: false },
+        { text: this.$t('app.commonwords.no'), value: 'no', visibel: false },
+        { text: this.$t('components.appmessagebox.cancel'), value: 'cancel', visibel: false },
+    ];
+
+    /**
+     * 数据传递对象
+     *
+     * @type {any}
+     * @memberof AppMessageBox
+     */
+    public subject: null | Subject<any> = new Subject<any>();
+
+    /**
+     * 层级
+     *
+     * @type {any}
+     * @memberof AppMessageBox
+     */
+    public zIndex: any = null;
+
+    /**
+     * 是否显示
+     *
+     * @type {boolean}
+     * @memberof AppMessageBox
+     */
+    public isShow: boolean = false;
+
+    /**
+     * 获取显示模式类名 居中/top
+     *
+     * @memberof AppMessageBox
+     */
+    public getClassName() {
+        return this.showMode === 'center' ? 'center' : 'top';
+    }
+
+    /**
+     * 根据type计算iconClass
+     *
+     * @memberof AppMessageBox
+     */
+    public geticonClass() {
+        if (this.customClass) {
+            return this.customClass;
+        }
+        let classes = 'ivu-icon ';
+        switch (this.type) {
+            case 'info':
+                classes = classes + 'ivu-icon-ios-information-circle';
+                break;
+            case 'success':
+                classes = classes + 'ivu-icon-ios-checkmark-circle';
+                break;
+            case 'warning':
+                classes = classes + 'ivu-icon-ios-alert';
+                break;
+            case 'error':
+                classes = classes + 'ivu-icon-ios-close-circle';
+                break;
+            case 'question':
+                classes = classes + 'el-icon-question';
+                break;
+        }
+        return classes;
+    }
+
+    /**
+     * 获取数据传递对象
+     *
+     * @memberof AppMessageBox
+     */
+    public getSubject() {
+        return this.subject;
+    }
+
+    /**
+     * 按钮点击
+     *
+     * @memberof AppMessageBox
+     */
+    public button_click(item: any) {
+        this.isShow = false;
+        if (this.subject) {
+            this.subject.next(item.value);
+        }
+        this.close();
+    }
+
+    /**
+     * 初始化按钮Model
+     *
+     * @memberof AppMessageBox
+     */
+    public initButtonModel() {
+        if (this.visibleCustomFooter) {
+            return;
+        }
+        switch (this.buttonType) {
+            case 'okcancel':
+                this.buttonModel[0].visibel = true;
+                this.buttonModel[3].visibel = true;
+                break;
+            case 'yesno':
+                this.buttonModel[1].visibel = true;
+                this.buttonModel[2].visibel = true;
+                break;
+            case 'yesnocancel':
+                this.buttonModel[1].visibel = true;
+                this.buttonModel[2].visibel = true;
+                this.buttonModel[3].visibel = true;
+                break;
+            case 'ok':
+                this.buttonModel[0].visibel = true;
+                break;
+        }
+    }
+
+    /**
+     * 关闭方法
+     *
+     * @memberof AppMessageBox
+     */
+    public close() {
+        if (this.onClose) {
+            this.onClose(this);
+        }
+        setTimeout(() => {
+            document.body.removeChild(this.$el);
+            this.$destroy();
+            AppMessage.getInstance().destroyVueExample();
+            this.subject = null;
+        }, 500);
+    }
+
+    /**
+     * Vue生命周期created
+     *
+     * @memberof AppMessageBox
+     */
+    public created() {
+        this.initButtonModel();
+    }
+
+    /**
+     * Vue生命周期mounted
+     *
+     * @memberof AppMessageBox
+     */
+    public mounted() {
+        const zIndex = this.$store.getters.getZIndex();
+        if (zIndex) {
+            this.zIndex = zIndex + 100;
+            this.$store.commit('updateZIndex', this.zIndex);
+        }
+        if (this.visibleCustomFooter && this.customFooter) {
+            this.$slots.customFooter = [this.customFooter];
+            this.$forceUpdate();
+        }
+        this.isShow = true;
+    }
+}
+</script>
+<style lang="less" scoped>
+</style>
\ No newline at end of file

src/utils/app-message-box/interface/message-box-options.ts

+import { VNode } from "vue";
+
+export interface MessageBoxOptions {
+    /**
+     * 对话框类型
+     *
+     * @type {(string | 'info' | 'success' | 'warning' | 'error' | 'ok' )}
+     * @memberof AppModalok
+     */
+    type?: string | 'info' | 'success' | 'warning' | 'error';
+
+    /**
+     * 标题
+     *
+     * @type {string}
+     * @memberof AppModalok
+     */
+    title?: string;
+
+    /**
+     * 内容
+     *
+     * @type {string}
+     * @memberof AppModalok
+     */
+    content?: string;
+
+    /**
+     * 按钮类型
+     * 默认值:'okcancel'
+     * okcancel 确认/取消
+     * yesno 是/否
+     * yesnocanel 是/否/取消
+     * ok 确认
+     * 
+     * @type {(string | 'okcancel' | 'yesno' | 'yesnocanel' | 'ok')}
+     * @memberof ModalokOptions
+     */
+    buttonType?: string | 'okcancel' | 'yesno' | 'yesnocanel' | 'ok';
+
+
+    /**
+     * 启用自定义底部
+     *
+     * @type {boolean}
+     * @memberof ModalokOptions
+     */
+    visibleCustomFooter?: boolean;
+
+
+    /**
+     * 自定义底部
+     *
+     * @type {VNode}
+     * @memberof ModalokOptions
+     */
+    customFooter?: VNode;
+
+    /**
+     * 显示模式
+     * 默认值：center
+     *
+     * @type {('top' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left')}
+     * @memberof NoticeOptions
+     */
+    showMode?: 'center' | string;
+
+    /**
+     * 自定义图标的类名，会覆盖type
+     *
+     * @type {string}
+     * @memberof NoticeOptions
+     */
+    iconClass?: string;
+
+    /**
+     * 自定义类名
+     *
+     * @type {string}
+     * @memberof NoticeOptions
+     */
+    customClass?: string;
+
+    /**
+     * 是否显示右上角的关闭按钮
+     * 默认值：false
+     *
+     * @type {boolean}
+     * @memberof NoticeOptions
+     */
+    showClose?: boolean;
+
+    /**
+     * 是否显示遮罩
+     * 默认值：true
+     *
+     * @type {boolean}
+     * @memberof NoticeOptions
+     */
+    mask?: boolean;
+
+    /**
+     * 是否点击遮罩关闭
+     * 默认值：false
+     *
+     * @type {boolean}
+     * @memberof NoticeOptions
+     */
+    maskClosable?: boolean;
+
+
+    /**
+     * 引用对象名称
+     *
+     * @type {string}
+     * @memberof ModalokOptions
+     */
+    refName?: string;
+
+    /**
+     * 关闭时的回调函数, 参数为被关闭的实例
+     *
+     * @memberof NoticeOptions
+     */
+    onClose?: (val: any) => void;
+
+}