vue封装修改后的modal对话框

vue封装修改后的modal对话框

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

iview里面Modal对话框有两种，一种是普通对话框，如下图：

另一种是消息对话框，包括消息对话框、成功对话框、警告对话框、错误对话框、确认对话框，这几种对话框根据消息的类型来展示左上角的图标显示，如下图是消息对话框：

很明显的可以看出，第一种和第二种对话框样式完全不同，普通的对话框并没有左上角的图标，在开发过程中，发现当第二种对话框需要连续显示两次的时候，可能会出现第二次不显示的情况，但是第一种没有这种问题，所以项目中采用了第一种对话框
但是随后又出现了另外一种问题，就是需求中对话框样式需要跟第二种一样，也包括右上角的图标展示，所以我就对iview里面的第一种对话框进行了改造，改造之后的对话框如下图：(haha,是不是跟第二种对话框一模一样呢)

代码如下：
modal

<Modal
            class="ivu-modal-tip"
            v-if="modal"
            v-model="visible"
            :width="modal.width || undefined"
            :scrollable="modal.scrollable"
            @on-ok="modal.onOk"
            @on-cancel="modal.onCancel"
            :mask-closable="false"
        >
            <v-render v-if="modal.template" :model="model" :renderType="modal.renderType" :template="modal.template"></v-render>
            <div v-else>
                <div class="ivu-modal-confirm-head">
                    <div class="ivu-modal-confirm-head-icon">
                        <i
                            class="ivu-icon"
                            v-bind:class="{ 'ivu-icon-ios-information-circle': messageIcon, 'ivu-icon-ios-alert': wraningIcon, 'ivu-icon-ios-checkmark-circle': successIcon, 'ivu-icon-ios-close-circle': errorIcon, 'ivu-icon-ios-help-circle': confirmIcon}"
                        ></i>
                    </div>
                    <div class="ivu-modal-confirm-head-title">{{modal.title || '提示信息'}}</div>
                </div>
                <div class="ivu-content" v-html="modal.content"></div>
            </div>
        </Modal>

script

<script>
import { components } from './v-components';
export default {
    name: 'v-template',
    components,
    props: {
        model: Object,
        template: Object,
    },
    data() {
        return {
            visible: false,
            messageIcon: false,
            wraningIcon: false,
            successIcon: false,
            errorIcon: false,
            confirmIcon: false,
        };
    },

    watch: {
        'model.modalObject': function (value) {
            this.visible = true;
            this.info(this.modal.messageType);
        },
    },
    computed: {
        show() {
            return !!this.model.waiting;
        },
        modal: {
            get() {
                return this.model.modalObject;
            },
            set(value) {
                this.model.modalObject = null;
            },
        },
    },
    methods: {
        info(type) {
            switch (type) {
                case 'warning':
                    this.wraningIcon = true;
                    break;
                case 'success':
                    this.successIcon = true;
                    break;
                case 'error':
                    this.errorIcon = true;
                    break;
                case 'confirm':
                    this.confirmIcon = true;
                    break;
                default:
                    this.messageIcon = true;
                    break;
            }
        },
    },
    design: {
        hidden: true,
    },
};
</script>

style

<style lang="less" scoped>
.v-template {
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    height: 100%;
    width: 100%;
    .v-loading {
        background-color: transparent;
        .demo-spin-icon-load {
            animation: ani-demo-spin 1s linear infinite;
        }
        @keyframes ani-demo-spin {
            from {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    }
}
.ivu-modal-tip {
    & /deep/ .ivu-modal {
        width: 416px !important;
    }
    .ivu-content {
        padding-left: 40px;
        word-wrap: break-word;
    }
    .ivu-icon {
        font-size: 28px;
    }
    .ivu-modal-confirm-head-title {
        font-weight: 500;
        margin-left: 8px;
    }
    .ivu-icon-ios-information-circle {
        color: #2d8cf0;
    }
    .ivu-icon-ios-alert {
        color: #f90;
    }
    .ivu-icon-ios-checkmark-circle {
        color: #19be6b;
    }
    .ivu-icon-ios-close-circle {
        color: #ed4014;
    }
    .ivu-icon-ios-help-circle {
        color: #f90;
    }
    & /deep/ .ivu-modal-body {
        padding: 22px 32px 0 32px;
    }
    & /deep/ .ivu-modal-footer {
        border-top: none;
        padding: 0 32px 24px 32px;
        text-align: right;
        margin-top: 20px;
    }
}
</style>

欢迎关注公众号，有你想要的前端知识：