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.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< 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.3 s ease ;
}
. mask - content {
background - color : # fff ;
border - radius : 8 px ;
padding : 24 px ;
box - shadow : 0 4 px 12 px rgba ( 0 , 0 , 0 , 0.35 ) ;
max - width : 700 px ;
min - width : 300 px ;
height : auto ;
display : inline - block ;
max - height : 80 vh ;
overflow - x : auto ;
margin - top : 5 % ;
}
< / style >
