更新记录

1.0.0（2026-01-23） 下载此版本

平台兼容性

uni-app(3.6.15)

dy-watermark 水印组件

用于 uni-app 的文本/图片水印组件，支持平铺或单点水印、样式配置、遮挡区域与时间范围控制。

🎯 适用场景

• 企业内部系统防截图
• 报表/合同等敏感信息保护
• 内容版权标识

✨ 特性

• 文本/图片水印
• 平铺/单点定位
• 透明度、旋转、间距、字体等样式可配置
• 遮挡区域
• 定时显示（当天范围）
• 响应式适配（autoResize）

✅ 已测试平台

• 微信小程序

⚠️ 其他平台

以下平台尚未验证，理论上兼容，请自行测试：

• App (app-vue、app-nvue)
• H5 (移动端/PC端)
• 支付宝/百度/抖音/QQ/钉钉/快手/飞书/京东 小程序
• 华为快应用、联盟快应用
• 云端：腾讯云 tcb、阿里云 aliyun、支付宝小程序云

📦 安装

在 DCloud 插件市场导入本插件（uni_modules 规范）。

🧩 快速上手

文本水印

<template>
  <view>
    <dy-watermark watermarkText="水印" />
  </view>
</template>

图片水印

<template>
  <view>
    <dy-watermark watermarkImage="/static/logo.png" />
  </view>
</template>

🧩 完整用法

<template>
  <view>
    <dy-watermark
      watermarkText="水印"
      :fontSize="18"
      fontColor="#ff0000"
      fontWeight="bold"
      :opacity="0.25"
      :rotation="-30"
      position="repeat"
      :positionOffset="{ top: 20, right: 20, bottom: 0, left: 0 }"
      :gapX="150"
      :gapY="100"
      :showTimestamp="true"
      timestampFormat="YYYY-MM-DD HH:mm"
      startTime="09:00:00"
      endTime="18:00:00"
      :maskArea="[100, 100, 200, 150]"
    />

    <dy-watermark
      watermarkImage="/static/logo.png"
      position="center"
      :positionOffset="{ top: 40, right: 0, bottom: 0, left: 0 }"
      :opacity="0.3"
    />
  </view>
</template>

⚙️ Props

📝 注意事项

• fontColor 与 opacity：fontColor 支持 rgba，透明度会与 opacity 相乘叠加，建议用纯色 + opacity 统一控制。
• 文本水印与图片水印不可同时显示，设置 watermarkImage 后将只显示图片水印。
• 重复平铺会生成较多节点，大屏设备注意性能。
• startTime/endTime 仅对当天有效，跨天需自行处理。
• autoResize 开启会监听窗口变化，不需要时可关闭。
• 图片水印需确保图片可访问。

📄 License

MIT