更新记录

1.0.0（2026-02-02） 下载此版本

• 双模式支持：
  • 局部模式：作为容器组件使用，包裹内容后仅在该区域显示水印。
  • 全屏模式：覆盖整个页面视口，不影响原有内容布局。
• 多端兼容：完美支持 H5、App（iOS/Android）、小程序。
• 高度可配置：支持文字、颜色、角度、间距、字体大小、交叉排列等配置。
• 安全防篡改（H5）：内置 MutationObserver，防止水印 DOM 节点被恶意删除或修改样式。
• 高性能：仅生成一张微小的 Canvas 图片作为背景平铺，极大减少 DOM 节点数量和渲染开销。

平台兼容性

uni-app(3.6.16)

x-watermark 页面水印组件

x-watermark 是一个功能强大的 uni-app 水印组件，支持局部包裹和全屏覆盖两种模式。组件内部使用 Canvas 生成水印背景图，并通过 CSS 重复平铺，在保证性能的同时实现了 App 端和 H5 端的完美兼容。

✨ 特性

• 双模式支持：
  • 局部模式：作为容器组件使用，包裹内容后仅在该区域显示水印。
  • 全屏模式：覆盖整个页面视口，不影响原有内容布局。
• 多端兼容：完美支持 H5、App（iOS/Android）、小程序。
• 高度可配置：支持文字、颜色、角度、间距、字体大小、交叉排列等配置。
• 安全防篡改（H5）：内置 MutationObserver，防止水印 DOM 节点被恶意删除或修改样式。
• 高性能：仅生成一张微小的 Canvas 图片作为背景平铺，极大减少 DOM 节点数量和渲染开销。

📦 引入

在 script 中引入组件：

import xWatermark from '@/components/x-watermark/x-watermark'

export default {
    components: { xWatermark }
}

💻 基础用法

1. 局部水印（容器模式）

将需要加水印的内容包裹在组件内部：

<x-watermark text="机密文件">
    <view class="content">
        这里是受保护的内容区域...
    </view>
</x-watermark>

2. 全屏水印

设置 fullscreen 属性，通常放置在页面根部：

<template>
    <view>
        <!-- 全屏水印，建议放在最外层 -->
        <x-watermark text="User: Admin" fullscreen></x-watermark>

        <view class="page-content">
            页面其他内容...
        </view>
    </view>
</template>

⚙️ API 配置项

⚠️ 注意事项

1. App 端兼容性：App 端使用隐藏的 Canvas 生成图片。由于 uni-app 机制，x-watermark 在 App 端会自动处理 background-size 兼容性问题，确保图片不被拉伸。
2. 层级覆盖：全屏模式下，水印层的 pointer-events 已设为 none，不会阻挡用户点击下方的页面内容。
3. H5 防篡改：在 H5 端，如果用户通过控制台删除了水印节点或修改了样式（如 display: none），组件会自动检测并强制恢复。

🛠️ 示例代码

<x-watermark 
    text="严禁外传" 
    subText="工号: 9527"
    color="rgba(255, 0, 0, 0.1)" 
    :rotate="-30" 
    :fontSize="16"
    :gapX="20" 
    :gapY="40"
>
    <view class="file-content">
        文档内容...
    </view>
</x-watermark>