图鸟 UI vue3 uniapp Plugins - 隐私弹框

Tuniao UI vue3官方仓库

该组件一般用于让用户确认隐私协议

组件安装

npm i tnuiv3p-tn-privacy-popup-box

组件位置

tnuiv3p-tn-privacy-popup-box/index.vue

平台差异说明

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

基础使用

• 通过v-model控制隐私弹框的显示与隐藏

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

const showPrivacyPopup = ref(false)
</script>

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

修改隐私弹框弹出位置

• 通过设置open-direction的值为center和bottom控制隐私弹框从中间弹出还是从底部弹出

<template>
  <TnPrivacyPopupBox v-model="showPrivacyPopup" open-direction="bottom" />
</template>

API

Props

| 属性名 | 说明 | 类型 | 默认值 | 可选值 | | ----------------------- | ----------------------------------------------------------------------------------------------------------- | ------- | -------------------- | -------- | | v-model/model-value | 控制隐私弹框的显示与隐藏 | Boolean | false | true | | open-direction | 隐私弹框弹出的位置 | String | center | bottom | | 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 |