组件库文档 tmui.design
遮罩 Overlay
用于在屏幕上方显示遮罩,用于突出展示某个内容。
🌶️ 遮罩 Overlay 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text :font-size="24" _class="font-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贡献,如果对该框架感兴趣的可以参与我们一同进步!