当前位置: 首页 > news >正文

uniapp中组件库Mask 遮罩层 的使用方法

目录

#平台差异说明

#基本使用

#嵌入内容

#遮罩样式

#API

#Props

#Events

#Slot


创建一个遮罩层,用于强调特定的页面元素,并阻止用户对遮罩下层的内容进行操作,一般用于弹窗场景

#平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

#基本使用

  • 通过show参数配置是否显示遮罩
  • 遮罩被点击时,会发送一个click事件,如不需要此事件,请设置mask-click-able参数为false
<template><u-mask :show="show" @click="show = false"></u-mask>
</template><script>export default {data() {return {show: true}}}
</script>

#嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容
注意:如果不想让slot插槽内容的点击事件冒泡到遮罩,请给指定元素添加上@tap.stop

<template><u-mask :show="show" @click="show = false"><view class="warp"><view class="rect" @tap.stop></view></view></u-mask>
</template><script>export default {data() {return {show: true}}}
</script><style 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 :show="show" :duration="400" :zoom="true" :custom-style="{background: 'rgba(0, 0, 0, 0.5)'}"></u-mask>

#API

#Props

参数说明类型默认值可选值
show是否显示遮罩Booleanfalsetrue
z-indexz-index 层级String | Number10070-
custom-style自定义样式对象,见上方说明Object--
duration动画时长,单位毫秒String | Number300-
zoom是否使用scale对遮罩进行缩放Booleantruefalse
mask-click-able遮罩是否可点击,为false时点击不会发送click事件Booleantruefalse

#Events

事件名说明回调参数
clickmask-click-abletrue时,点击遮罩发送此事件-

#Slot

名称说明
default默认插槽,用于在遮罩层上方嵌入内容
http://www.lryc.cn/news/294524.html

相关文章:

  • 【数据结构与算法】(7)基础数据结构之双端队列的链表实现、环形数组实现示例讲解
  • 2024 高级前端面试题之 前端工程相关 「精选篇」
  • CSS常用属性
  • AI新宠Arc浏览器真可以取代Chrome吗?
  • 基于Java (spring-boot)的实验室管理系统
  • Android用setRectToRect实现Bitmap基于Matrix矩阵scale缩放RectF动画,Kotlin(一)
  • 【AI绘画+Midjourney平替】Fooocus:图像生成、修改软件(Controlnet原作者重新设计的UI+Windows一键部署)
  • Java技术栈 —— Hive与HBase
  • 【代码随想录-哈希表】有效的字母异位词
  • SQL Server之DML触发器
  • 04. 【Linux教程】安装 Linux 操作系统
  • Facebook群控:利用IP代理提高聊单效率
  • 香港倾斜模型3DTiles数据漫游
  • Go指针探秘:深入理解内存与安全性
  • Oracle12c之Sqlplus命令行窗口基本使用
  • react和antd学习笔记
  • 寒假作业2月5号
  • 滑动窗口(一)
  • 寒假 day1
  • DATAX改造支持geometry类型数据同步
  • Vue中keep-alive的作用、原理及应用场景
  • SpringBoot集成Redisson实现限流(二)
  • 【2024美赛E题】985博士解题思路分析(持续更新中)!
  • 北朝隋唐文物展亮相广西,文物预防性保护网关保驾护航
  • 回归预测 | Matlab实现WOA-CNN-LSTM-Attention鲸鱼算法优化卷积长短期记忆网络注意力多变量回归预测(SE注意力机制)
  • ubuntu离线安装k8s
  • 学成在线:媒体资源管理系统(MAM)
  • 18个8年以上服务器开发经验的面试题(2)
  • 【SpringBoot】applicationContext.getBeansOfType(class)获取某一接口所有实现类,应用于策略模式
  • AJAX-入门