You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
|
// 是否显示遮罩层
|
|
|
|
|
|
visible: {
|
|
|
|
|
|
type: Boolean,
|
|
|
|
|
|
default: false
|
|
|
|
|
|
},
|
|
|
|
|
|
// 自定义样式
|
|
|
|
|
|
style: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
// 自定义内容样式
|
|
|
|
|
|
contentStyle: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: ''
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 定义事件
|
|
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
|
|
|
|
|
|
|
|
// 关闭遮罩层的方法
|
|
|
|
|
|
const handleClose = () => {
|
|
|
|
|
|
emit('close')
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<!-- 遮罩层容器 -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
v-if="visible"
|
|
|
|
|
|
class="mask"
|
|
|
|
|
|
@click.self="handleClose"
|
|
|
|
|
|
:style="style"
|
|
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="mask-content" :style="contentStyle">
|
|
|
|
|
|
<!-- 插槽：用于插入自定义内容 -->
|
|
|
|
|
|
<slot></slot>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
.mask {
|
|
|
|
|
|
/* 固定定位，覆盖整个屏幕 */
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
/* 半透明黑色背景 */
|
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
/* 层级设置 */
|
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
|
/* 弹性布局，使内容居中 */
|
|
|
|
|
|
/* 添加过渡效果 */
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
transition: opacity 0.3s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mask-content {
|
|
|
|
|
|
/* 背景色 */
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
/* 边框圆角 */
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
/* 内边距 */
|
|
|
|
|
|
padding: 24px;
|
|
|
|
|
|
/* 阴影效果 */
|
|
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
/* 最大宽度 */
|
|
|
|
|
|
max-width: 700px;
|
|
|
|
|
|
/* 最小宽度 */
|
|
|
|
|
|
min-width: 300px;
|
|
|
|
|
|
/* 最大高度 */
|
|
|
|
|
|
height: auto;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
max-height: 80vh;
|
|
|
|
|
|
/* 超出内容滚动 */
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
margin-top: 5%;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
