自定义模态框组件

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_40983401/article/details/102746871

自定义模态框组件

参数名	类型	说明
visible	Boolean	控制模态框是否显示
dialogWidth	String	控制模态框的宽度
title	String	控制模态框的标题

<template>
    <transition name="fade">
        <div v-if="visible">
            <div @click="closeModal" class="H-modal-mask"></div>
            <div class="H-modal-dialog" :style="{ width: dialogWidth }">
                <div class="H-modal-dialog-head">
                    <span class="H-modal-dialog-title">{{ title }}</span>
                    <svg @click="closeModal" t="1571988755885" class="icon H-modal-dialog-close" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2040" width="18" height="18">
                        <path d="M836.45483398 141.21142578c13.27423096 0 24.34844947 4.32586646 33.13366699 13.1852417C878.35394287 163.25109864 882.7935183 174.27093506 882.7935183 187.55999756c0 12.9776001-4.48901344 23.99743653-13.36816429 32.85681176L577.51092529 512l291.91442872 291.47936988c8.87915016 8.85937523 13.3681643 19.87921166 13.36816429 32.96063256 0 13.1852417-4.43957543 24.30889893-13.20007323 33.06445336-8.79016089 8.85443115-19.86438012 13.28411842-33.13861109 13.28411842-13.07153344 0-24.02215553-4.53350806-32.95074438-13.49670411L512 577.50598121l-291.5040896 291.78588891c-8.90881324 8.96319604-19.87426758 13.49670411-32.96063184 13.4967041-13.2643435 0-24.31878638-4.42968727-33.14355517-13.2890625C145.6262815 860.74890136 141.21636987 849.62524414 141.21636987 836.44000244c0-13.08142089 4.45935035-24.10125732 13.36816358-32.96063256L446.47918725 512 154.58453345 220.41186523C145.67572021 211.56237817 141.21636987 200.53759766 141.21636987 187.56494164c0-13.2890625 4.40991234-24.30889893 13.17535352-33.16333008C163.21649146 145.53729224 174.26599097 141.21142578 187.53527856 141.21142578c13.08142089 0 24.05181861 4.42968727 32.96063184 13.38793922L512.00494408 446.39514136l291.50408889-291.78588819C812.43267846 145.63616968 823.37835718 141.21142578 836.45483398 141.21142578" p-id="2041" fill="#8a8a8a"></path>
                    </svg>
                </div>
                <div class="H-modal-dialog-body">
                    <slot name="content">这里是内容</slot>
                </div>
                <div class="H-modal-dialog-foot">
                    <span class="H-modal-dialog-btn" @click="closeModal">取消</span>
                    <span class="H-modal-dialog-btn" @click="confirm">确认</span>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        dialogWidth: {
            type: String,
            default: "40%"
        },
        title: {
            type: String,
            default: "提示"
        }
    },
    methods: {
        closeModal() {
            this.$emit("update:visible", false);
        },
        confirm() {
            this.$emit("confirm", false);
        }
    }
};
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
    transition: 0.1s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
.H-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
}
.H-modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 5px;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.H-modal-dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #e8e8e8;
    .H-modal-dialog-title {
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        font-size: 20px;
        letter-spacing: 2px;
        user-select: none;
    }
    .H-modal-dialog-close {
        cursor: pointer;
        transition: 0.25s;
        &:hover {
            transform: rotate(-90deg);
        }
    }
}
.H-modal-dialog-body {
    padding: 20px;
    color: rgba(0, 0, 0, 0.65);
}
.H-modal-dialog-foot {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px;
    .H-modal-dialog-btn {
        padding: 0 15px;
        line-height: 32px;
        margin-left: 8px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        user-select: none;
        &:nth-child(2) {
            background: #409eff;
            color: #fff;
            border-color: #409eff;
            &:hover {
                background: #66b1ff;
                border-color: #66b1ff;
            }
        }
        &:nth-child(1) {
            &:hover {
                color: #409eff;
                border-color: #c6e2ff;
                background-color: #ecf5ff;
            }
        }
    }
}
</style>

使用：

父组件：

	// @confirm="confirm" 点击确定按钮触发的事件 
	<Modal :visible.sync="visible" @confirm="confirm">
		<template v-slot:content>
			这里写入模态框显示的内容
		</template>
	</Modal>