<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>