泉州自助建站软件,mg动画制作,英文 科技网站,站长工具收录查询目录
#平台差异说明
#基本使用
#嵌入内容
#遮罩样式
#API
#Props
#Events
#Slot 创建一个遮罩层#xff0c;用于强调特定的页面元素#xff0c;并阻止用户对遮罩下层的内容进行操作#xff0c;一般用于弹窗场景
#平台差异说明
AppH5微信小程序支付宝小程序百度小程…
目录
#平台差异说明
#基本使用
#嵌入内容
#遮罩样式
#API
#Props
#Events
#Slot 创建一个遮罩层用于强调特定的页面元素并阻止用户对遮罩下层的内容进行操作一般用于弹窗场景
#平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√
#基本使用
通过show参数配置是否显示遮罩遮罩被点击时会发送一个click事件如不需要此事件请设置mask-click-able参数为false
templateu-mask :showshow clickshow false/u-mask
/templatescriptexport default {data() {return {show: true}}}
/script#嵌入内容
通过默认插槽可以在遮罩层上嵌入任意内容 注意如果不想让slot插槽内容的点击事件冒泡到遮罩请给指定元素添加上tap.stop
templateu-mask :showshow clickshow falseview classwarpview classrect tap.stop/view/view/u-mask
/templatescriptexport default {data() {return {show: true}}}
/scriptstyle scoped.warp {display: flex;align-items: center;justify-content: center;height: 100%;}.rect {width: 120px;height: 120px;background-color: #fff;}
/style#遮罩样式
通过duration设置遮罩淡入淡出的时长单位ms通过zoom设置遮罩淡入淡出时是否带有轻微的缩放效果内部通过transform: scale(1.2, 1.2)实现通过custom-style传入一个对象自定义样式如{backgroundColor: red, color: blue}
u-mask :showshow :duration400 :zoomtrue :custom-style{background: rgba(0, 0, 0, 0.5)}/u-mask#API
#Props
参数说明类型默认值可选值show是否显示遮罩Booleanfalsetruez-indexz-index 层级String | Number10070-custom-style自定义样式对象见上方说明Object--duration动画时长单位毫秒String | Number300-zoom是否使用scale对遮罩进行缩放Booleantruefalsemask-click-able遮罩是否可点击为false时点击不会发送click事件Booleantruefalse
#Events
事件名说明回调参数clickmask-click-able为true时点击遮罩发送此事件-
#Slot
名称说明default默认插槽用于在遮罩层上方嵌入内容
