TnPopup-弹出框

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

组件位置

nodeuni_modules

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控制弹框的弹出方向，可选值为top、bottom、left、right、center，默认为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>

设置弹框的宽高

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

在open-direction为top、bottom时设置width属性无效，在open-direction为left、right时设置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-top、right-top、left-bottom、right-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-direction为top时有效

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-model	popup 弹出框显示与隐藏	Boolean	`false`	`true`
open-direction	弹框打开的方向	String	`center`	`top` \ `bottom` \ `left` \ `right`
width	弹框内容的宽度，默认单位为 rpx，支持传入数字、带单位的数值，在`open-direction`为`left`或`right`或`center`时有效	String \| Number	-	-
height	弹框内容的高度，默认单位为 rpx，支持传入数字、带单位的数值，在`open-direction`为`to p`或`bottom`或`center`时有效	String \| Number	-	-
bg-color	弹出框内容的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	#fff	-
radius	弹框的内容的圆角，默认单位为 rpx，支持传入数字、带单位的数值	String \| Number	15	-
overlay	是否显示 overlay 遮罩层	Boolean	`true`	`false`
overlay-opacity	overlay 遮罩层的透明度，有效值 0-1	Number	0.5	-
overlay-closeable	点击 overlay 关闭弹框	Boolean	`true`	`false`
close-btn	是否显示关闭按钮	Boolean	`false`	`true`
close-btn-position	关闭按钮的位置	String	`right-top`	`left-top` \ `left-bottom` \ `right-bottom`
safe-area-inset-bottom	底部是否开启安全区域，在`open-direction`为`bottom`时有效	Boolean	`true`	`false`
z-index	Popup 弹出框的 zIndex	Number	20075	-
top	距离顶部的距离，在 `open-direction` 为 `top` 或 `left` 或 `right` 时生效，默认单位为`px`	String \| Number	-	-

Event

事件名	说明	类型
open	Popup 弹框打开事件	`() => void`
close	Popup 弹框关闭事件	`() => void`
overlay-click	Popup遮罩点击事件	`() => void`

Slots

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

TnPopup-弹出框 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

设置弹框的宽高 ​

设置遮罩层 ​

设置透明遮罩层 ​

显示关闭按钮 ​

自定义距离顶部的高度 ​

API ​

Props ​

Event ​

Slots ​