PrivacyMask 隐私遮罩

隐私遮罩组件用于隐藏敏感信息（如手机号、金额、密码等），通过交互（悬浮/点击）或外部控制来揭示内容。视觉上使用 CSS filter: blur() 实现毛玻璃模糊效果，同时内置完整的 ARIA 无障碍支持，屏幕阅读器在内容被隐藏时同样无法读取。

⚠️ 安全说明：本组件结合 aria-hidden 阻断屏幕阅读器读取模糊内容，且通过 aria-expanded 播报揭示状态。但仍建议在传输或存储环节对敏感数据做加密处理，前端模糊仅为增强体验的辅助手段。

---

基础用法（Hover 模式）

默认 trigger="hover"，鼠标悬浮或键盘 Tab 聚焦到内容时自动揭示，移开时重新隐藏。

<TPrivacyMask>138****5678</TPrivacyMask>
<TPrivacyMask>110101******1234</TPrivacyMask>

---

Click 模式

设置 trigger="click"，通过点击或键盘 Enter/Space 键切换揭示状态。

<TPrivacyMask trigger="click" blur-amount="8">
  <span class="badge bg-red text-red-fg fs-4">¥ 12,800.00</span>
</TPrivacyMask>

---

自定义模糊强度

通过 blur-amount 属性控制模糊像素大小，值越大越模糊。

<TPrivacyMask :blur-amount="2">轻微模糊</TPrivacyMask>
<TPrivacyMask :blur-amount="6">中等模糊</TPrivacyMask>
<TPrivacyMask :blur-amount="15">重度模糊</TPrivacyMask>

---

Manual 模式（v-model 外部控制）

设置 trigger="manual"，通过 v-model 完全由外部控制揭示状态，组件内部不响应用户交互。

<script setup>
const externalRevealed = ref(false)
</script>

<TPrivacyMask v-model="externalRevealed" trigger="manual" blur-amount="10">
  <span class="fs-3 fw-bold">秘密信息</span>
</TPrivacyMask>

<button @click="externalRevealed = !externalRevealed">
  {{ externalRevealed ? '隐藏' : '显示' }}
</button>

---

段落内混排

组件默认使用 span 标签渲染，可以在文本段落中无缝混排，不破坏行内布局。

<p>
  尊敬的用户您好，您本次验证码为：
  <TPrivacyMask trigger="click" tag="b" class="text-primary">847291</TPrivacyMask>
  ，请勿泄露给他人。
</p>

---

过渡动画时长

通过 duration 属性控制模糊与清晰之间过渡的动画时长（单位：秒）。

值	效果
0.1	快速切换，几乎无过渡
0.3（默认）	适中速度，平滑切换
0.6	慢速过渡，适合强调揭示动作

<TPrivacyMask :duration="0.6">慢速切换</TPrivacyMask>

---

API

Props

属性	类型	默认值	说明
blur-amount	number	6	模糊像素大小
duration	number	0.3	过渡动画时长（秒）
tag	string	'span'	渲染的 HTML 标签，span 适合文本混排，div 适合块级布局
trigger	'hover' | 'click' | 'manual'	'hover'	触发揭示方式
model-value / v-model	boolean	false	外部受控揭示状态

Emits

事件	参数	说明
reveal	—	内容被揭示时触发
hide	—	内容被隐藏时触发
update:model-value	value: boolean	v-model 更新事件

Slots

插槽	说明
default	需要模糊隐藏的内容（纯文本或任意组件）