组件库文档 tmui.design
遮罩 Overlay
用于在屏幕上方显示遮罩,用于突出展示某个内容。
🌶️ 遮罩 Overlay 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text :font-size="24" _class="text-weight-b" label="下面是基础演示属性,更多玩法请前往文档。更多属性动画时长这些请前文档"></tm-text>
<tm-divider></tm-divider>
<tm-button block @click="showWin = true" label="显示"></tm-button>
</tm-sheet>
<tm-overlay v-model:show="showWin" contentAnimation>
<view @click.stop="">
<tm-sheet :width="500" :height="500">
<tm-text label="更多属性动画时长这些请前文档"></tm-text>
</tm-sheet>
</view>
</tm-overlay>
</tm-app>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
import tmOverlay from '@/tmui/components/tm-overlay/tm-overlay.vue'
const showWin = ref(false)
const pos = ref('bottom')
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
align | String | flex-center | 内容的对齐方式的类 |
bgColor | String | rgba(0,0,0,0.35) | 当前组件的主题 |
zIndex | Number | 120 | 显示优先层级 |
show | Boolean | false | 是否显示,双向绑定v-model:show |
overlayClick | Boolean | true | 遮罩层可点击 |
transprent | Boolean | false | 是否透明效果 |
duration | Number | 300 | 弹出动画的时间(毫秒) |
contentAnimation | Boolean | false | 是否让中间的内容和背景一样启用过渡动画显示和关闭,启用后内容显示和关闭时更为自然。 |
inContent | Boolean | false | 是否允许嵌套弹层,开启后嵌套弹层只会在父组件内部弹层,不会全屏弹层。 |
teleport | Boolean | true | (仅H5支持禁用)是否使用teleport |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | |||
open | 显示抽屉 | ||
close | 关闭抽屉 | ||
update:show | show | Boolean | 显示状态(更新v-model:show值) |
🌽 slot插槽
默认default
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|---|---|---|
open | 显示 | ||
close | 隐藏 |
💏 文档贡献
此页文档由Kyour贡献,如果对该框架感兴趣的可以参与我们一同进步!