BizWatermark 水印

canvas 生成文字水印 tile（多行文案 / 旋转 / 间距 / 层级可配）铺满容器或全屏；内置防删自愈——MutationObserver 监听容器与水印层，DOM 被篡改或删除时自动重建。用于内部系统防泄露标识。

基础用法

文档名称Q3 经营分析报告（定稿）	密级内部公开
编制人张三	更新时间2026-09-20 18:00

容器区域水印：多行内容 + 角度切换；「模拟删除水印」演示防删自愈。

<script setup lang="ts">
/** 基础用法：卡片区域水印（多行内容 + 自定义角度），含防删自愈演示 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizDescriptions, BizWatermark } from 'vue3-ep-biz-lib'

const rotate = ref(-22)

/** 防删演示：从 DOM 删除水印层，MutationObserver 自动重建 */
const tryRemove = (): void => {
  const layer = document.querySelector('.demo-watermark-card .biz-watermark__layer')
  if (layer === null) {
    ElMessage.info('水印层不存在（可能已重建中）')
    return
  }
  layer.remove()
  ElMessage.success('已删除水印层，观察其自动恢复')
}
</script>

<template>
  <div>
    <BizWatermark
      class="demo-watermark-card"
      :content="['内部资料', 'syanjun · 2026-09-21']"
      :rotate="rotate"
      :font-size="13"
      :gap-x="24"
      style="border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 20px; background: var(--el-fill-color-blank)"
    >
      <BizDescriptions
        :column="2"
        :items="[
          { label: '文档名称', prop: 'name' },
          { label: '密级', prop: 'level' },
          { label: '编制人', prop: 'author' },
          { label: '更新时间', prop: 'updatedAt' },
        ]"
        :data="{
          name: 'Q3 经营分析报告（定稿）',
          level: '内部公开',
          author: '张三',
          updatedAt: '2026-09-20 18:00',
        }"
      />
    </BizWatermark>
    <div style="display: flex; gap: 8px; margin-top: 12px">
      <ElButton size="small" @click="rotate = rotate === -22 ? -30 : -22">切换角度（{{ rotate }}°）</ElButton>
      <ElButton size="small" @click="tryRemove">模拟删除水印（自愈演示）</ElButton>
    </div>
  </div>
</template>

显示代码

全屏水印

全屏水印

开启后铺满整个视口（滚动页面水印仍在）

正文内容区域——全屏水印叠加在视口之上，不参与文档流。

fullscreen 后水印 fixed 铺满视口，v-if 关闭即 destroy；常与系统布局组合使用。

<script setup lang="ts">
/** 全屏水印：fixed 铺满视口，开关切换 update / destroy */
import { ref } from 'vue'
import { ElButton, ElSwitch } from 'element-plus'
import { BizWatermark } from 'vue3-ep-biz-lib'

const fullscreenOn = ref(true)
</script>

<template>
  <div>
    <div style="display: flex; gap: 12px; align-items: center; margin-bottom: 12px">
      <span>全屏水印</span>
      <ElSwitch v-model="fullscreenOn" />
      <ElButton v-if="!fullscreenOn" size="small" @click="fullscreenOn = true">重新开启</ElButton>
      <span style="color: var(--el-text-color-secondary); font-size: 13px">开启后铺满整个视口（滚动页面水印仍在）</span>
    </div>
    <BizWatermark v-if="fullscreenOn" fullscreen :content="['vue3-ep-biz-lib 文档站', '请勿外传']" :z-index="999" />
    <p style="color: var(--el-text-color-secondary)">正文内容区域——全屏水印叠加在视口之上，不参与文档流。</p>
  </div>
</template>

显示代码

品牌色水印（对外材料）

设备巡检服务年度报价（定向）¥368,000.00 / 年（含税） 报价有效期至 2026-10-31；截图外发将携带专属标识

color 使用品牌蓝半透明；gap-x / gap-y 调疏密，rotate 调角度——对外材料防截图挪用的轻量方案

对外报价场景：color 用品牌蓝半透明、gap-x / gap-y 调疏密、rotate 调角度，配合金额组件输出定向报价卡片——截图外发自动携带专属标识。

<script setup lang="ts">
/** 场景：品牌色水印——自定义颜色 / 密度 / 角度的对外分享卡片 */
import { BizWatermark } from 'vue3-ep-biz-lib'
import { BizAmount } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <BizWatermark
      :content="['云联科技 · 专属报价', '仅供 acme-corp 使用']"
      color="rgba(64, 158, 255, 0.14)"
      :font-size="14"
      :font-weight="500"
      :gap-x="30"
      :gap-y="36"
      :rotate="-18"
      style="display: inline-block; min-width: 420px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 20px 24px; background: var(--el-fill-color-blank)"
    >
      <div style="display: flex; flex-direction: column; gap: 10px">
        <span style="font-weight: 600">设备巡检服务年度报价（定向）</span>
        <BizAmount :value="368000" symbol="¥" :precision="2">
          <template #suffix>
            <span style="font-size: 12px; color: var(--el-text-color-secondary)"> / 年（含税）</span>
          </template>
        </BizAmount>
        <span style="font-size: 13px; color: var(--el-text-color-secondary)">
          报价有效期至 2026-10-31；截图外发将携带专属标识
        </span>
      </div>
    </BizWatermark>
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      color 使用品牌蓝半透明；gap-x / gap-y 调疏密，rotate 调角度——对外材料防截图挪用的轻量方案
    </div>
  </div>
</template>

显示代码

敏感数据表水印

敏感信息场景：脱敏列（姓名 / 手机 / 证件）+ 双行水印「禁止外传 / 日志已开启」——截图即带责任提示。

<script setup lang="ts">
/** 场景：敏感数据表水印——姓名/手机号脱敏列 + 工号水印防截图外发 */
import { BizWatermark } from 'vue3-ep-biz-lib'
import { ElTable, ElTableColumn, ElTag } from 'element-plus'

const rows = [
  { name: '张*三', mobile: '138****8000', idCard: '3201**********0618', level: 'P0' },
  { name: '李*四', mobile: '139****9000', idCard: '1101**********0925', level: 'P1' },
  { name: '王*五', mobile: '137****2233', idCard: '4403**********0417', level: 'P2' },
]
</script>

<template>
  <BizWatermark
    :content="['敏感数据 · 禁止外传', '操作日志已开启']"
    :font-size="12"
    :gap-x="40"
    :gap-y="52"
    :rotate="-24"
  >
    <ElTable :data="rows" size="small" border>
      <ElTableColumn prop="name" label="姓名" width="80" />
      <ElTableColumn prop="mobile" label="手机号" width="130" />
      <ElTableColumn prop="idCard" label="证件号" />
      <ElTableColumn label="密级" width="70">
        <template #default="{ row }"><ElTag :type="row.level === 'P0' ? 'danger' : 'warning'" size="small">{{ row.level }}</ElTag></template>
      </ElTableColumn>
    </ElTable>
  </BizWatermark>
</template>

显示代码

文档预览水印

2026 年第三季度董事会材料（讨论稿）保密

一、经营回顾：Q3 营收同比增长 18.4%，其中订阅业务占比首次过半……
二、审议事项：2027 年度资本开支预算（详见附件二）……
三、其他：管理层股权激励方案草案说明……

保密文档场景：董事会材料「仅供预览 · 不可下载」整版大字水印 + 保密标签。

<script setup lang="ts">
/** 场景：文档预览水印——「仅供预览 不可下载」整页提示 */
import { BizWatermark } from 'vue3-ep-biz-lib'
import { ElTag } from 'element-plus'
</script>

<template>
  <BizWatermark
    content="仅供预览 · 不可下载"
    color="rgba(0, 0, 0, 0.10)"
    :font-size="16"
    :font-weight="600"
    :gap-x="16"
    :gap-y="60"
    :rotate="-30"
    style="border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 20px 24px; max-width: 560px; background: var(--el-fill-color-blank)"
  >
    <div style="display: flex; flex-direction: column; gap: 10px; line-height: 1.9">
      <div style="display: flex; gap: 8px; align-items: center">
        <span style="font-weight: 600">2026 年第三季度董事会材料（讨论稿）</span>
        <ElTag size="small" type="danger">保密</ElTag>
      </div>
      <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
        一、经营回顾：Q3 营收同比增长 18.4%，其中订阅业务占比首次过半……<br>
        二、审议事项：2027 年度资本开支预算（详见附件二）……<br>
        三、其他：管理层股权激励方案草案说明……
      </p>
    </div>
  </BizWatermark>
</template>

显示代码

防抵赖时间戳

薪酬对账单（2026-09）

应发合计：¥ 18,960.00　实发合计：¥ 15,431.20

明细见附件；如与人力系统不一致请于 3 个工作日内反馈

薪酬场景：工号 + 姓名 + 查看时间织入水印——截图外发可追溯到人。

<script setup lang="ts">
/** 场景：防抵赖时间戳水印——工号 + 姓名 + 时间，追溯截图来源 */
import { BizWatermark } from 'vue3-ep-biz-lib'

const stamp = `EMP00231 · 张伟 · 2026-09-23 12:00 登录查看`
</script>

<template>
  <BizWatermark
    :content="[stamp, '截图将保留追溯信息']"
    :font-size="12"
    :gap-x="10"
    :gap-y="40"
    :rotate="-20"
    style="display: inline-block; min-width: 460px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 18px 22px; background: var(--el-fill-color-blank)"
  >
    <div style="font-size: 14px; line-height: 2">
      <div style="font-weight: 600">薪酬对账单（2026-09）</div>
      <div>应发合计：¥ 18,960.00　实发合计：¥ 15,431.20</div>
      <div style="font-size: 13px; color: var(--el-text-color-secondary)">明细见附件；如与人力系统不一致请于 3 个工作日内反馈</div>
    </div>
  </BizWatermark>
</template>

显示代码

Props

属性名	类型	默认值	说明
content	string / string[]	—（必填）	水印文案（多行传数组）
color	string	'rgba(0,0,0,0.15)'	文字颜色
font-size	number	14	字号（px）
font-weight	number	400	字重
gap-x / gap-y	number	18	水平 / 垂直间距（px）
rotate	number	-22	旋转角度
z-index	number	9	水印层层级
fullscreen	boolean	false	全屏水印（fixed 铺满视口）

Events

事件名	参数	说明
—	—	无自定义事件

Slots

插槽名	说明
default	容器内容（水印叠加其上）

Expose

属性/方法	说明
update()	手动重绘（props 变化已自动触发）
destroy()	移除水印并停止防删监听