FxWatermark 水印

在页面或容器上覆盖水印（文本 / 多行 / 图片 / 富文本），支持防删除、暗水印。基于 watermark-js-plus，不依赖任何 UI 框架。

FxWatermark 属于 @fx/components。

基础用法

<FxWatermark> 作为容器包裹内容，水印画在容器内。

<template>
  <div class="watermark-demo">
    <FxWatermark
      content="悦安 zy-ease"
      font-size="16px"
      :global-alpha="0.2"
      :font-color="fontColor"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { useData } from "vitepress"
import { FxWatermark } from "@fx/components"

const { isDark } = useData()
const fontColor = computed(() => (isDark.value ? "#fff" : "#000"))
</script>

<style scoped>
.watermark-demo {
  height: 300px;
  border: 1px solid var(--fx-border-color, #ddd);
  border-radius: 8px;
}
</style>

多行文本

content-type="multi-line-text"，content 用 
（换行符）分隔多行。

<template>
  <div class="watermark-demo">
    <FxWatermark
      content-type="multi-line-text"
      content="悦安经期管理&#10;内部资料 请勿外传"
      font-size="18px"
      :font-color="fontColor"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { useData } from "vitepress"
import { FxWatermark } from "@fx/components"

const { isDark } = useData()
const fontColor = computed(() => (isDark.value ? "#fff" : "#000"))
</script>

<style scoped>
.watermark-demo {
  height: 300px;
  border: 1px solid var(--fx-border-color, #ddd);
  border-radius: 8px;
}
</style>

图片水印

content-type="image"，image 传图片地址。

<template>
  <div class="watermark-demo">
    <FxWatermark
      content-type="image"
      :image="logo"
      :image-width="80"
      :width="200"
      :height="200"
    />
  </div>
</template>

<script lang="ts" setup>
import { FxWatermark } from "@fx/components"

// 内联 SVG，避免外链依赖
const logo =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 6 C40 6 62 30 62 48 A22 22 0 0 1 18 48 C18 30 40 6 40 6 Z' fill='%23409eff'/%3E%3C/svg%3E"
</script>

<style scoped>
.watermark-demo {
  height: 300px;
  border: 1px solid var(--fx-border-color, #ddd);
  border-radius: 8px;
}
</style>

富文本

content-type="rich-text"，content 传 HTML 片段。

<template>
  <div class="watermark-demo">
    <FxWatermark
      content-type="rich-text"
      content='<div style="background:#ccc;padding:4px;">富文本 <span style="color:#f00">水印</span></div>'
      :width="200"
      :height="100"
    />
  </div>
</template>

<script lang="ts" setup>
import { FxWatermark } from "@fx/components"
</script>

<style scoped>
.watermark-demo {
  height: 300px;
  border: 1px solid var(--fx-border-color, #ddd);
  border-radius: 8px;
}
</style>

描边水印

text-type="stroke" 用描边方式绘制文字（默认 fill 填充），适合需要强对比的场景。

<template>
  <div class="watermark-demo">
    <FxWatermark
      content="描边水印"
      text-type="stroke"
      font-size="28px"
      :global-alpha="0.3"
      :font-color="fontColor"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { useData } from "vitepress"
import { FxWatermark } from "@fx/components"

const { isDark } = useData()
const fontColor = computed(() => (isDark.value ? "#fff" : "#000"))
</script>

<style scoped>
.watermark-demo {
  height: 300px;
  border: 1px solid var(--fx-border-color, #ddd);
  border-radius: 8px;
}
</style>

网格布局

layout="grid" + grid-layout-options。

<template>
  <div class="watermark-demo">
    <FxWatermark
      content="网格"
      layout="grid"
      :grid-layout-options="{ rows: 2, cols: 2, gap: [50, 50] }"
      :font-color="fontColor"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { useData } from "vitepress"
import { FxWatermark } from "@fx/components"

const { isDark } = useData()
const fontColor = computed(() => (isDark.value ? "#fff" : "#000"))
</script>

<style scoped>
.watermark-demo {
  height: 300px;
  border: 1px solid var(--fx-border-color, #ddd);
  border-radius: 8px;
}
</style>

防删除 + 动效

mutation-observe 监听 DOM 篡改自动恢复；monitor-protection 开启保护；movable 平移动效。

<template>
  <div class="watermark-demo">
    <FxWatermark
      content="防删除水印"
      :mutation-observe="true"
      :monitor-protection="true"
      movable
      :font-color="fontColor"
    />
    <p class="tip">打开 DevTools 删除水印 DOM，会自动恢复；movable 开启平移动效。</p>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { useData } from "vitepress"
import { FxWatermark } from "@fx/components"

const { isDark } = useData()
const fontColor = computed(() => (isDark.value ? "#fff" : "#000"))
</script>

<style scoped>
.watermark-demo {
  height: 300px;
  border: 1px solid var(--fx-border-color, #ddd);
  border-radius: 8px;
  position: relative;
}
.tip {
  position: absolute;
  bottom: 8px;
  left: 8px;
  margin: 0;
  font-size: 12px;
  color: var(--fx-text-color-secondary, #999);
}
</style>

暗水印

blind 开启暗水印（肉眼几乎不可见）。配合 FxWatermarkDecoder 解析还原。

<template>
  <div class="watermark-demo">
    <FxWatermark
      blind
      content="secret-blind-watermark"
      font-size="24px"
      :font-color="fontColor"
    />
    <p class="tip">
      肉眼几乎不可见。截图后用「FxWatermarkDecoder」加载该截图可还原。
    </p>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { useData } from "vitepress"
import { FxWatermark } from "@fx/components"

const { isDark } = useData()
const fontColor = computed(() => (isDark.value ? "#fff" : "#000"))
</script>

<style scoped>
.watermark-demo {
  height: 300px;
  border: 1px solid var(--fx-border-color, #ddd);
  border-radius: 8px;
  position: relative;
}
.tip {
  position: absolute;
  bottom: 8px;
  left: 8px;
  margin: 0;
  font-size: 12px;
  color: var(--fx-text-color-secondary, #999);
}
</style>

全局水印

不绑定容器，用 createWatermark(options, mode?) 盖全屏，返回库实例，自行 .create() / .destroy()。

<template>
  <FxBtn type="primary" @click="add">添加全局水印</FxBtn>
  <FxBtn style="margin-left: 12px" @click="remove">移除</FxBtn>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from "vue"
import { useData } from "vitepress"
import { createWatermark, type WatermarkOptions } from "@fx/components"
import { FxBtn } from "@fx/components"

const { isDark } = useData()
const fontColor = computed(() => (isDark.value ? "#fff" : "#000"))

let wm: ReturnType<typeof createWatermark> | null = null
const added = ref(false)

function add() {
  if (wm) return
  wm = createWatermark({
    content: "全局水印 全屏覆盖",
    globalAlpha: 0.2,
    fontColor: fontColor.value,
  } as WatermarkOptions)
  wm.create()
  added.value = true
}

function remove() {
  wm?.destroy()
  wm = null
  added.value = false
}

// 主题切换时，若水印已存在则同步颜色（append 避免覆盖其余 options）
watch(isDark, () => {
  wm?.changeOptions(
    { fontColor: fontColor.value } as Partial<WatermarkOptions>,
    "append",
  )
})
</script>

局部引入

import {
  FxWatermark,
  createWatermark,
  decodeBlindWatermark,
  Watermark,
  BlindWatermark,
} from "@fx/components"

API

Attributes

属性	说明	类型	默认值
blind	暗水印（内部用 BlindWatermark）	boolean	false
disabled	禁用水印（销毁已绘制水印；false 恢复重绘）——常驻包裹 + 开关显隐场景用	boolean	false
content	内容（文本/多行/富文本）	string	—
content-type	内容类型	'text' | 'image' | 'multi-line-text' | 'rich-text'	'text'
image	图片水印地址（content-type=image）	string	—
width / height	水印画布宽高	number	库默认
rotate	旋转角度	number	库默认
global-alpha	透明度	number	库默认
z-index	层级	number	库默认
text-type	文本绘制方式（填充/描边）	'fill' | 'stroke'	'fill'
font-size / font-color / font-weight / font-family	字体	string	库默认
font-style / font-variant	斜体/小型大写字母等	string	''
line-height	行高（多行文本间距）	number	30
letter-spacing / word-spacing	字间距/词间距	string	'0px'
text-align	水平排布	'start' | 'center' | 'end' | 'left' | 'right'	随定位
text-baseline	垂直基线	'top' | 'middle' | 'bottom' | 'alphabetic' | …	随定位
text-row-max-width	单行最大宽度（多行自动换行）	number	同 width
rich-text-width / rich-text-height	富文本宽高（content-type=rich-text）	number	—
layout	布局	'default' | 'grid'	'default'
grid-layout-options	网格布局	GridLayoutOptions	—
auxiliary-line	辅助线（调试画布边界）	boolean	false
background-position	背景定位	string	'0 0'
background-repeat	背景重复	string	'repeat'
movable	平移动效	boolean	false
mutation-observe	DOM 篡改监听（防删除）	boolean	true
monitor-protection	保护	boolean	false
translate-placement / translate-x / translate-y	定位	—	库默认
image-width / image-height	图片水印尺寸	number	—
advanced-style / shadow-style / extra-draw-func / filter	高级绘制	—	—

完整字段见 watermark-js-plus WatermarkOptions。parent / mode 不对外（parent 固定根元素，mode 由 blind 映射）。

Events

事件	说明	载荷
success	创建成功	—
before-destroy	销毁前	—
destroyed	销毁后	—
observe-error	MutationObserver 失败	—

Slots

名称	说明
default	水印覆盖的子内容

Exposes

名称	说明	类型
create	创建水印	() => Promise<void>
destroy	销毁水印	() => void
check	检查水印是否存在	() => Promise<boolean>
changeOptions	更新配置	(args, mode?, redraw?) => Promise<void>

全局 API

createWatermark(options, mode?)

创建水印实例（全局层面），返回库实例。

const wm = createWatermark({ content: "悦安", globalAlpha: 0.5 })
wm.create()
wm.changeOptions({ content: "新文字" })
wm.destroy()

// 暗水印
const blind = createWatermark({ content: "secret" }, "blind")
blind.create()

参数	类型	说明
options	WatermarkOptions	watermark-js-plus 配置
mode	'default' | 'blind'	缺省 'default'

同时 re-export 库原始类：Watermark / BlindWatermark / ImageWatermark，可直接 new Watermark(opts).create()。