Skip to content
12:13

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'
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'

平台差异说明

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>
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>

API

Props

属性名说明类型默认值可选值
show/v-model:show遮罩层显示与隐藏Booleanfalsetrue
duration动画时间,单位毫秒Number300-
opacity遮罩层透明度,有效值0-1Number0.5-
z-indexzIndexNumber9999-

Events

事件名说明类型
click遮罩层点击事件() => void

Slots

插槽名说明
default自定义遮罩的内容

Tuniao UI