水印 watermark

布局组件。三层同源：无头内核给出解剖与状态机，Vue 组件与自定义元素只是它的两层外壳，行为完全一致。

示例

基础用法

印子是一张按文字算出来的 SVG，铺在根的伪元素上；底下的内容照常点、照常选

本页列出的账期数据仅供内部核对。

试着选中这段文字，或点下面的按钮——水印不吃点击，也选不中。

<script setup lang="ts">
import { XhWatermarkContent, XhWatermarkRoot } from "@xihan-ui/vue";
</script>

<template>
  <XhWatermarkRoot text="曦寒 · 内部资料">
    <XhWatermarkContent>
      <div style="padding: 24px; line-height: 1.9">
        <p>本页列出的账期数据仅供内部核对。</p>
        <p>试着选中这段文字，或点下面的按钮——水印不吃点击，也选不中。</p>
        <p><button type="button">点我</button></p>
      </div>
    </XhWatermarkContent>
  </XhWatermarkRoot>
</template>

多行

text 给数组就是多行，图样跟着长高；空白行不占位

三行水印按行铺开，每行居中对齐，整块绕图样中心一起倾斜。

行距按字号折算，换字号不必再调行距。

<script setup lang="ts">
import { XhWatermarkContent, XhWatermarkRoot } from "@xihan-ui/vue";

const lines = ["曦寒前端组件库", "zhaifanhua@gmail.com", "2026-08-11"];
</script>

<template>
  <XhWatermarkRoot :text="lines" :font-size="13">
    <XhWatermarkContent>
      <div style="padding: 32px; line-height: 1.9">
        <p>三行水印按行铺开，每行居中对齐，整块绕图样中心一起倾斜。</p>
        <p>行距按字号折算，换字号不必再调行距。</p>
      </div>
    </XhWatermarkContent>
  </XhWatermarkRoot>
</template>

角度、疏密与深浅

rotate 转整块图样，gap 决定两块之间留多少空白，fontSize 与 opacity 决定字多大、印多深

缺省

平着排、印得密

转 45 度、印得疏

<script setup lang="ts">
import { XhWatermarkContent, XhWatermarkRoot } from "@xihan-ui/vue";

const looks = [
  { label: "缺省", rotate: undefined, gap: undefined, fontSize: undefined, opacity: undefined },
  { label: "平着排、印得密", rotate: 0, gap: 8, fontSize: 12, opacity: 0.18 },
  { label: "转 45 度、印得疏", rotate: -45, gap: 56, fontSize: 18, opacity: 0.12 },
] as const;
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <XhWatermarkRoot
      v-for="l in looks"
      :key="l.label"
      text="曦寒"
      :rotate="l.rotate"
      :gap="l.gap"
      :font-size="l.fontSize"
      :opacity="l.opacity"
      style="inline-size: 220px; border: 1px solid var(--xh-border-default); border-radius: 6px"
    >
      <XhWatermarkContent>
        <div style="padding: 16px; block-size: 160px; font-size: 13px">{{ l.label }}</div>
      </XhWatermarkContent>
    </XhWatermarkRoot>
  </div>
</template>

撤掉与换色

文字空了就落 data-state="empty"，整层不画；印子的颜色走 --xh-watermark-fg，深浅主题各自跟着走

盖上水印

取消勾选后 root 落 data-state="empty"，印子那一层整层不画。

<script setup lang="ts">
import { ref } from "vue";
import { XhWatermarkContent, XhWatermarkRoot } from "@xihan-ui/vue";

const on = ref(true);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <label style="display: flex; align-items: center; gap: 8px; font-size: 13px">
      <input v-model="on" type="checkbox" />
      盖上水印
    </label>
    <!-- 图样当遮罩用，颜色由这一个变量决定；写成背景图就得把颜色焊死在图里 -->
    <XhWatermarkRoot
      :text="on ? '曦寒 · 机密' : ''"
      style="--xh-watermark-fg: var(--xh-fg-danger); border: 1px solid var(--xh-border-default); border-radius: 6px"
    >
      <XhWatermarkContent>
        <div style="padding: 24px; block-size: 180px; line-height: 1.9">
          <p>取消勾选后 root 落 data-state="empty"，印子那一层整层不画。</p>
        </div>
      </XhWatermarkContent>
    </XhWatermarkRoot>
  </div>
</template>

产物

层	值
自定义元素	<xh-watermark>
Vue 组件	XhWatermarkContent XhWatermarkRoot
状态机	无，connect 直接由 props 算属性
皮肤	@xihan-ui/styles/watermark.css

解剖

部件名即 data-part 属性值，也是皮肤的选择器。加粗的是必备部件，不渲染它组件不工作（Web Components 适配器会在诊断通道上报 wc.missing-part）。

data-scope="watermark"：root · content

Props

属性	类型	必填	说明
fontSize	number		字号，单位像素，缺省 14。
gap	number		两块图样之间留的空白，单位像素，缺省 24。
opacity	number		印子的深浅，0 到 1，缺省 0.15。
rotate	number		倾斜角度，单位度，缺省 -22。
text	string | string[]		水印文字。给数组就是多行，单个字符串里的换行同样断行； 去掉空白行——它只让图样长高，印不出任何东西。

connect API

connect 产出的对象。getXxxProps() 铺到对应部件的宿主元素上，其余是可读状态与操作入口。

成员	类型	说明
lines	readonly string[]	归一化后的文字行；没有可印的文字时是空数组。
tile	WatermarkTile	图样尺寸，即平铺步距；没有图样时宽高都是 0。
image	string	图样的 data URI；没有图样时是空串。
state	WatermarkState
getRootProps	() => T['element']
getContentProps	() => T['element']

键盘

规格出处：W3C APG

无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。