X-Next

Appearance

Watermark 水印 ​

用于给页面或指定内容区域添加不可交互遮挡的水印，适合版权标识、内部资料标记、截图追踪等场景。

何时使用 ​

  • 页面、卡片、表格或详情区域需要展示版权、来源或用户标识。
  • 需要用浅色重复文字或图片降低截图外泄风险。
  • 希望水印不影响区域内按钮、链接、输入框等交互。

基础用法 ​

项目日报

水印层会覆盖在内容上方，但不会阻断鼠标、键盘或文本选择之外的业务交互。

vue
<template>
  <x-watermark content="X-Next">
    <section class="panel">
      <h4>项目日报</h4>
      <p>水印层不会阻断内部按钮、链接或输入框交互。</p>
      <x-space>
        <x-button size="small">查看详情</x-button>
        <x-button size="small" type="primary">导出</x-button>
      </x-space>
    </section>
  </x-watermark>
</template>

多行文字 ​

多行水印

通过字符串数组设置多行内容，适合同时展示系统名、用户或日期。

vue
<template>
  <x-watermark :content="['X-Next', 'Confidential']">
    <section class="panel">
      <h4>多行水印</h4>
      <p>通过字符串数组设置多行内容。</p>
    </section>
  </x-watermark>
</template>

图片水印 ​

图片水印

适合使用品牌标识、图章或自定义 SVG / base64 图片作为水印。

vue
<template>
  <x-watermark :image="imageWatermark" :width="120" :height="48" :gap="[72, 72]">
    <section class="panel">
      <h4>图片水印</h4>
      <p>适合使用品牌标识、图章或自定义 SVG / base64 图片作为水印。</p>
    </section>
  </x-watermark>
</template>

<script setup lang="ts">
const imageWatermark = 'data:image/svg+xml;utf8,...';
</script>

自定义参数 ​

可配置水印

修改内容、旋转角度和透明度后，组件会自动重绘水印背景。

vue
<template>
  <x-watermark
    :content="watermarkText"
    :gap="[80, 80]"
    :rotate="watermarkRotate"
    :alpha="watermarkAlpha"
    :font="watermarkFont"
  >
    <section class="panel">可配置水印</section>
  </x-watermark>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const watermarkText = ref('X-Next');
const watermarkRotate = ref(-22);
const watermarkAlpha = ref(0.8);
const watermarkFont = ref({
  color: 'rgba(15, 118, 110, 0.18)',
  fontSize: 18,
  fontWeight: 600,
});
</script>

局部交互 ​

水印不阻断内容操作

vue
<template>
  <x-watermark content="Editable">
    <section class="panel">
      <x-input placeholder="输入内容仍可聚焦" />
      <x-button type="primary">保存</x-button>
    </section>
  </x-watermark>
</template>

指令用法 ​

默认指令水印

传入字符串即可使用默认间距、旋转角度、透明度和字体样式给当前元素添加水印。

vue
<template>
  <div v-watermark="'内部资料'" class="panel">
    默认指令水印
  </div>
</template>

指令配置 ​

给已有 div 添加水印

不想额外包一层组件时，可以直接使用 v-watermark 给当前元素添加水印。

vue
<template>
  <div
    v-watermark="{
      content: ['Directive', 'X-Next'],
      gap: [88, 72],
      rotate: -18,
      alpha: 0.75,
      font: { color: 'rgba(190, 24, 93, 0.16)', fontSize: 16, fontWeight: 700 }
    }"
    class="panel"
  >
    给已有 div 添加水印
  </div>
</template>

防篡改 ​

防篡改水印

点击按钮会删除内部水印层；默认开启的防篡改监听会自动重绘。

尝试次数：0
vue
<template>
  <x-watermark class="tamper-demo" content="Anti Tamper">
    <section class="panel">
      <x-button @click="removeWatermarkLayer">删除水印层</x-button>
    </section>
  </x-watermark>
</template>

<script setup lang="ts">
function removeWatermarkLayer() {
  document.querySelector('.tamper-demo .x-watermark--layer')?.remove();
}
</script>

按需导入 ​

ts
import { Watermark, vWatermark } from 'x-next';

Props ​

参数说明类型默认值
content水印文字内容，数组表示多行文字string | string[]-
image图片水印地址，支持 base64string-
width水印宽度，未设置时按内容计算number-
height水印高度，未设置时按内容计算number-
gap水印之间的间距[number, number][90, 90]
offset水印距离容器左上角的偏移量，默认是 gap / 2[number, number][gap[0] / 2, gap[1] / 2]
rotate水印旋转角度number-22
font水印字体样式WatermarkFont-
zIndex水印层级number6
alpha水印透明度number1
antiTamper是否开启水印防篡改booleantrue
grayscale是否生成灰阶水印booleanfalse
repeat是否重复水印booleantrue
staggered重复水印时是否错位排列booleantrue

WatermarkFont ​

参数说明类型默认值
color字体颜色string亮色 rgba(0, 0, 0, 0.15)，暗色 rgba(255, 255, 255, 0.15)
fontSize字体大小number16
fontFamily字体类型stringsans-serif
fontStyle字体样式'none' | 'normal' | 'italic' | 'oblique''normal'
textAlign字体对齐方式'start' | 'end' | 'left' | 'right' | 'center''center'
fontWeight字体粗细'normal' | 'bold' | 'bolder' | 'lighter' | number'normal'

Slots ​

插槽名说明
default需要添加水印的内容区域

交互说明 ​

  • 水印层使用 pointer-events: none，不会阻断默认插槽中的按钮、链接和输入控件。
  • v-watermark 适合给已有 DOM 直接添加水印；全量安装时会自动注册，也可以按需导入 vWatermark。
  • content 和 image 都为空时不绘制水印，只保留内容容器。
  • 图片水印会通过 canvas 绘制，跨域图片需要服务端允许 CORS；无法读取的图片不会影响默认插槽内容。
  • 默认开启防篡改监听；当水印层被删除或样式被改写时会自动重绘。