图鸟 UI vue3 uniapp Plugins - 隐私弹框
该组件一般用于让用户确认隐私协议
组件安装
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 |