Skip to content
12:13

TnPopup-弹出框

Popup 弹出框一般用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义。

组件位置

typescript
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
typescript
import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'

平台差异说明

App(vue)H5微信小程序支付宝小程序...
适配中

基础使用

  • 通过v-model控制弹框的显示与隐藏
  • 通过open-direction控制弹框的弹出方向,可选值为topbottomleftrightcenter,默认为center
  • 通过bg-color设置内容框的背景颜色,如果设置为transparent则为透明背景,这时候用户可以自定义任何弹框内容
  • 通过radius设置内容框的圆角大小,默认单位为rpx,默认为15
vue
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" open-direction="top">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" open-direction="top">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" bg-color="transparent" radius="0">
    <view class="tn-p-lg tn-white_bg tn-radius"> 弹框内容 </view>
  </TnPopup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" bg-color="transparent" radius="0">
    <view class="tn-p-lg tn-white_bg tn-radius"> 弹框内容 </view>
  </TnPopup>
</template>

设置弹框的宽高

默认情况下的弹框是根据内容设置内容容器的宽高,如果需要设置弹框的宽高,可以通过widthheight属性设置,单位为rpx,也可传递带单位的数值

open-directiontopbottom时设置width属性无效,在open-directionleftright时设置height属性无效

vue
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" width="80%" height="250">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" width="80%" height="250">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>

设置遮罩层

默认情况下,弹框会有一个遮罩层,点击遮罩层会关闭弹框,如果不需要遮罩层,可以通过overlay属性设置为false

通过overlay-opacity设置遮罩层的透明度,默认为0.5

通过overlay-closeable设置点击遮罩层是否关闭弹框,默认为true

vue
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" :overlay-closeable="false">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" :overlay-closeable="false">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>

设置透明遮罩层

vue
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" :overlay-opacity="0">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" :overlay-opacity="0">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>

显示关闭按钮

通过close-btn属性设置是否显示关闭按钮,默认为false

通过close-btn-position设置关闭按钮的位置,可选值为left-topright-topleft-bottomright-bottom,默认为right-top

也可以通过closeBtn插槽自定义关闭按钮

vue
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" close-btn>
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" close-btn>
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" close-btn>
    <view class="tn-p-lg"> 弹框内容 </view>
    <template #closeBtn>
      <TnIcon name="close-circle" />
    </template>
  </TnPopup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" close-btn>
    <view class="tn-p-lg"> 弹框内容 </view>
    <template #closeBtn>
      <TnIcon name="close-circle" />
    </template>
  </TnPopup>
</template>

自定义距离顶部的高度

在使用了自定义顶导航栏之后,弹框的顶部会被顶导航栏遮挡,可以通过top属性设置距离顶部的高度,单位为rpx,也可传递带单位的数值

top属性仅在open-directiontop时有效

vue
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" open-direction="top" top="54px">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const showPopup = ref(false)
</script>

<template>
  <TnPopup v-model="showPopup" open-direction="top" top="54px">
    <view class="tn-p-lg"> 弹框内容 </view>
  </TnPopup>
</template>

API

Props

属性名说明类型默认值可选值
model-value/v-modelpopup 弹出框显示与隐藏Booleanfalsetrue
open-direction弹框打开的方向Stringcentertop \ bottom \ left \ right
width弹框内容的宽度,默认单位为 rpx,支持传入数字、带单位的数值,在open-directionleftrightcenter时有效String | Number--
height弹框内容的高度,默认单位为 rpx,支持传入数字、带单位的数值,在open-directionto pbottomcenter时有效String | Number--
bg-color弹出框内容的背景颜色,可以使用图鸟内置的背景色、hex、rgb、rgbaString#fff-
radius弹框的内容的圆角,默认单位为 rpx,支持传入数字、带单位的数值String | Number15-
overlay是否显示 overlay 遮罩层Booleantruefalse
overlay-opacityoverlay 遮罩层的透明度,有效值 0-1Number0.5-
overlay-closeable点击 overlay 关闭弹框Booleantruefalse
close-btn是否显示关闭按钮Booleanfalsetrue
close-btn-position关闭按钮的位置Stringright-topleft-top \ left-bottom \ right-bottom
safe-area-inset-bottom底部是否开启安全区域,在open-directionbottom时有效Booleantruefalse
z-indexPopup 弹出框的 zIndexNumber20075-
top距离顶部的距离,在 open-directiontopleftright 时生效,默认单位为pxString | Number--

Event

事件名说明类型
openPopup 弹框打开事件() => void
closePopup 弹框关闭事件() => void

Slots

插槽名说明
default自定义 Popup 弹框的内容
closeBtn自定义关闭按钮的内容

Tuniao UI