XtfWatermark

组件说明

xtf-watermark 是内容容器型平铺水印组件，适用于合同、审批和报表等防泄漏场景。它会将文本、可选图片和时间戳编码为 SVG 背景，不会拦截内部内容的触摸事件。

---

基础用法

1. 文本水印

<template>
  <xtf-watermark text="仅内部使用">
    <xtf-card title="经营报表"><xtf-text text="本月 GMV 128 万" /></xtf-card>
  </xtf-watermark>
</template>
<script>
export default {}
</script>

2. 身份与时间戳

<template>
  <xtf-watermark
    text="合同预览"
    secondary-text="buyer-1024 / 采购经理"
    show-timestamp
    timestamp-text="2026-08-24 10:30"
    density="sm"
    ><xtf-card title="合同 CN-2026-01"
  /></xtf-watermark>
</template>
<script>
export default {}
</script>

3. 图标和方向配置

<template>
  <xtf-watermark
    text="审批流转单"
    image-src="/static/logo.png"
    color="#334155"
    :opacity="0.4"
    :font-size="32"
    direction="horizontal"
    density="lg"
    ><xtf-card><xtf-button label="确认审批" @click="approve" /></xtf-card>
  </xtf-watermark>
</template>
<script>
export default {
  methods: {
    approve() {
      uni.showToast({ title: '已提交审批', icon: 'none' })
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
text	String	'ULink UI'	主水印文字	所有水印
secondaryText	String	''	第二行身份或业务信息	合同、审批场景
imageSrc	String	''	水印图片地址	放置品牌标记
opacity	String | Number	0.28	水印透明度，最终限制为 0.04-1	调整可见度
density	String	'md'	sm/md/lg 平铺密度	合同紧密、报表稀疏
showTimestamp	Boolean	false	显示第三行时间戳	需要追溯时
timestampText	String	''	指定时间戳；空时生成当前时间	固定导出时间
color	String	''	水印颜色，空时为 #475569	调整品牌色
fontSize	String | Number	24	主文字字号	调整识别度
fontWeight	String | Number	600	SVG 文字字重	调整强调度
gapX	String | Number	''	覆盖水平平铺间距	自定义密度
gapY	String | Number	''	覆盖垂直平铺间距	自定义密度
direction	String	''	slash/backslash/horizontal/vertical 预设方向	常用方向
rotate	Number	-18	未命中 direction 预设时的旋转角度	任意倾角
zIndex	String | Number	2	水印层级	与内容层叠放
customClass	String	''	容器类名	局部定制
customStyle	String | Object	''	容器样式	局部定制

---

事件

组件源码未定义 emits。水印层设置了 pointer-events: none，内部插槽内容的点击、提交等事件可照常直接监听。

---

插槽

插槽名称	作用域参数	说明
默认插槽	-	放置需要加水印保护的页面内容；水印不会拦截插槽内容的触摸事件。

插槽使用示例

<template>
  <xtf-watermark text="内部资料" secondary-text="finance-001">
    <xtf-cell title="结算单" value="待确认" clickable @click="openDetail" />
  </xtf-watermark>
</template>
<script>
export default {
  methods: {
    openDetail() {
      uni.showToast({ title: '打开结算详情', icon: 'none' })
    }
  }
}
</script>

---

主题说明

• 水印图层由运行时 SVG 背景生成；默认文字颜色为 #475569，可通过 color 覆盖。
• 组件设置 --xtf-watermark-font-size，水印层级使用 zIndex，内容层固定在水印之下。
• 通过业务页的 customStyle、color 和密度属性统一控制防泄漏强度；该组件没有独立全局颜色变量。