/tnuiv3p-privacy-popup-box

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

Primary LanguageTypeScriptOtherNOASSERTION

图鸟 UI vue3 uniapp Plugins - 隐私弹框

TuniaoUI vue3 uniapp

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