Skip to content
12:13

图鸟 UI vue3 uniapp 插件 - 隐私弹框

该组件一般用于展示评论信息

仓库地址

Github

npmjs

安装方式

bash
npm i tnuiv3p-tn-privacy-popup-box
npm i tnuiv3p-tn-privacy-popup-box
bash
pnpm add tnuiv3p-tn-privacy-popup-box
pnpm add tnuiv3p-tn-privacy-popup-box
bash
yarn i tnuiv3p-tn-privacy-popup-box
yarn i tnuiv3p-tn-privacy-popup-box

组件位置

typescript
import TnPrivacyPopupBox from 'tnuiv3p-tn-privacy-popup-box/index.vue'
import TnPrivacyPopupBox from 'tnuiv3p-tn-privacy-popup-box/index.vue'

平台差异说明

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

基础使用

  • 通过v-model控制隐私弹框的显示与隐藏
vue
<script setup lang="ts">
import { ref } from 'vue'

const showPrivacyPopup = ref(false)
</script>

<template>
  <TnPrivacyPopupBox v-model="showPrivacyPopup" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const showPrivacyPopup = ref(false)
</script>

<template>
  <TnPrivacyPopupBox v-model="showPrivacyPopup" />
</template>

修改隐私弹框弹出位置

  • 通过设置open-direction的值为centerbottom控制隐私弹框从中间弹出还是从底部弹出
vue
<template>
  <TnPrivacyPopupBox v-model="showPrivacyPopup" open-direction="bottom" />
</template>
<template>
  <TnPrivacyPopupBox v-model="showPrivacyPopup" open-direction="bottom" />
</template>

API

Props

属性名说明类型默认值可选值
v-model/model-value控制隐私弹框的显示与隐藏Booleanfalsetrue
open-direction隐私弹框弹出的位置Stringcenterbottom
title隐私弹框标题String用户隐私保护提示-
agree-text同意隐私按钮文案String同意并继续-
disagree-text不同意隐私按钮文案String不同意-
privacy-contract-text隐私保护指引文案String《用户隐私保护指引》-
agree-bg-color同意按钮背景颜色,以 tn 开头使用图鸟内置颜色String--
agree-color同意按钮字体颜色,以 tn 开头使用图鸟内置颜色String--
disagree-bg-color不同意按钮背景颜色,以 tn 开头使用图鸟内置颜色String--
disagree-color不同意按钮字体颜色,以 tn 开头使用图鸟内置颜色String--

Emits

事件名说明类型
close弹框关闭事件() => void
agree点击同意按钮事件() => void
disagree点击不同意按钮事件() => void
open-protocol点击查看隐私协议事件() => void
agree-privacy-authorization同意隐私协议回调事件() => void

Tuniao UI