PrivacyMask

PrivacyMask blurs sensitive content (phone numbers, amounts, passwords, etc.) and reveals it on user interaction (hover/click) or external control. It uses CSS filter: blur() for the visual effect and includes full ARIA accessibility support — screen readers cannot read the hidden content when obscured.

⚠️ Security note: This component combines aria-hidden to block screen readers from accessing blurred content and uses aria-expanded to announce the reveal state. However, sensitive data should still be encrypted during transmission or storage. The frontend blur is an experience enhancement, not a security boundary.

---

Basic Usage (Hover)

Default trigger="hover". Hover over or Tab-focus the content to reveal it; move away to hide.

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

---

Click Mode

Set trigger="click". Click or press Enter/Space to toggle the reveal state.

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

---

Custom Blur Amount

Control the blur intensity via blur-amount. Larger values produce stronger blurring.

<TPrivacyMask :blur-amount="2">Slight</TPrivacyMask>
<TPrivacyMask :blur-amount="6">Medium</TPrivacyMask>
<TPrivacyMask :blur-amount="15">Heavy</TPrivacyMask>

---

Manual Mode (v-model Control)

Set trigger="manual" to control the reveal state fully from outside via v-model. The component ignores internal user interactions.

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

<TPrivacyMask v-model="externalRevealed" trigger="manual" blur-amount="10">
  <span class="fs-3 fw-bold">Secret Message</span>
</TPrivacyMask>

<button @click="externalRevealed = !externalRevealed">
  {{ externalRevealed ? 'Hide' : 'Show' }}
</button>

---

Inline Text Usage

The component renders as a span by default, allowing seamless inline usage within text paragraphs.

<p>
  Your verification code is:
  <TPrivacyMask trigger="click" tag="b" class="text-primary">847291</TPrivacyMask>,
  do not share it with others.
</p>

---

Transition Duration

The duration prop controls the transition time (in seconds) between blurred and clear states.

Value	Effect
0.1	Instant switch, almost no transition
0.3 (default)	Moderate speed, smooth transition
0.6	Slow transition, emphasizes the reveal action

<TPrivacyMask :duration="0.6">Slow reveal</TPrivacyMask>

---

API

Props

Prop	Type	Default	Description
blur-amount	number	6	Blur pixel size
duration	number	0.3	Transition duration (seconds)
tag	string	'span'	HTML tag to render; span for inline, div for block
trigger	'hover' | 'click' | 'manual'	'hover'	Way to trigger reveal
model-value / v-model	boolean	false	Externally controlled reveal state

Emits

Event	Parameters	Description
reveal	—	Fired when content is revealed
hide	—	Fired when content is hidden
update:model-value	value: boolean	v-model update event

Slots

Slot	Description
default	Content to blur and hide (text or any components)