开发预览更新于 2026-05-10

Watermark 水印

在内容容器上叠加倾斜重复的文字水印，用于敏感页面追溯泄漏来源。

基础用法

content 既可以是单行字符串，也可以是字符串数组（多行水印）。水印通过 SVG 数据 URL 叠加在 ::after，pointer-events: none，不挡住内容交互。

背景视口

敏感内容

水印覆盖整个容器，倾斜重复渲染。截图后水印仍可见，便于追溯泄漏来源。

src/App.vue

<script setup lang="ts">
import { CfWatermark } from '@chufix-design/vue';
</script>
<template>
  <CfWatermark content="ChuFix UI · Confidential">
    <div style="padding: 32px; min-height: 200px; background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 8px;">
      <h3 style="margin: 0 0 8px;">敏感内容</h3>
      <p style="margin: 0; color: var(--fg-2);">水印覆盖整个容器，倾斜重复渲染。截图后水印仍可见，便于追溯泄漏来源。</p>
    </div>
  </CfWatermark>
</template>

<script setup>
import { CfWatermark } from '@chufix-design/vue';
</script>
<template>
  <CfWatermark content="ChuFix UI · Confidential">
    <div style="padding: 32px; min-height: 200px; background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 8px;">
      <h3 style="margin: 0 0 8px;">敏感内容</h3>
      <p style="margin: 0; color: var(--fg-2);">水印覆盖整个容器，倾斜重复渲染。截图后水印仍可见，便于追溯泄漏来源。</p>
    </div>
  </CfWatermark>
</template>

import { CfWatermark } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfWatermark content="ChuFix UI · Confidential">
      <div className="protected-area">
        <h3>敏感内容</h3>
        <p>水印覆盖整个容器，倾斜重复渲染。</p>
      </div>
      </CfWatermark>
    </>
  );
}

import { CfWatermark } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfWatermark content="ChuFix UI · Confidential">
      <div className="protected-area">
        <h3>敏感内容</h3>
        <p>水印覆盖整个容器，倾斜重复渲染。</p>
      </div>
      </CfWatermark>
    </>
  );
}

API

属性	类型	默认值	说明
`content`	`string \| string[]`	`—`	水印文字；数组渲染为多行
`fontSize`	`number`	`14`	字号（像素）
`color`	`string`	`oklch(... / 0.16)`	文字颜色，含透明度
`rotate`	`number`	`-22`	倾斜角度（度）
`gap`	`[number, number]`	`[160, 80]`	水印块的横纵间隔
`zIndex`	`number`	`9`	覆盖层 z-index