自定义模态框组件
参数名 | 类型 | 说明 |
---|---|---|
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>