TnOverlay-遮罩层
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 | 自定义遮罩的内容 |