Tuniao UI Uniapp V3TnOverlay-遮罩层
Overlay遮罩层一般用于强调某个元素或者组件，或者用于遮罩整个页面，一般用于弹窗场景。
组件位置
typescript
import TnOverlay from '@tuniao/tnui-vue3-uniapp/components/overlay/src/overlay.vue'import TnOverlay from '@tuniao/tnui-vue3-uniapp/components/overlay/src/overlay.vue'1
typescript
import TnOverlay from '@/uni_modules/tuniaoui-vue3/components/overlay/src/overlay.vue'import TnOverlay from '@/uni_modules/tuniaoui-vue3/components/overlay/src/overlay.vue'1
平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
- 通过
v-model:show或者show来设置遮罩层的显示与隐藏 - 通过
duration设置遮罩层的动画时长 - 通过
opacity设置遮罩层的透明度
vue
<script lang="ts" setup>
import { ref } from 'vue'
const showOverlay = ref<boolean>(false)
</script>
<template>
<TnOverlay v-model:show="showOverlay" />
<TnOverlay :show="showOverlay" />
</template><script lang="ts" setup>
import { ref } from 'vue'
const showOverlay = ref<boolean>(false)
</script>
<template>
<TnOverlay v-model:show="showOverlay" />
<TnOverlay :show="showOverlay" />
</template>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
vue
<script lang="ts" setup>
import { ref } from 'vue'
const showOverlay = ref<boolean>(false)
</script>
<template>
<TnOverlay v-model:show="showOverlay" :duration="250" :opacity="0.4" />
</template><script lang="ts" setup>
import { ref } from 'vue'
const showOverlay = ref<boolean>(false)
</script>
<template>
<TnOverlay v-model:show="showOverlay" :duration="250" :opacity="0.4" />
</template>1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| show/v-model:show | 遮罩层显示与隐藏 | Boolean | false | true |
| duration | 动画时间，单位毫秒 | Number | 300 | - |
| opacity | 遮罩层透明度，有效值0-1 | Number | 0.5 | - |
| z-index | zIndex | Number | 9999 | - |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 遮罩层点击事件 | () => void |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义遮罩的内容 |