更新记录

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

优化效果

平台兼容性

uni-app(3.8.0)

其他

muzi-watermark 全端通用水印组件

muzi-watermark 是一款专为 UniApp 打造的高性能、全端兼容的全局水印插件。基于 Vue2 Options API 开发，摒弃复杂的 Canvas 方案，采用高性能 DOM + CSS 变换方案，确保在安卓、iOS、H5 及各类小程序中表现一致。

📸 核心特性

• 全端兼容：完美支持 App (Android 10+ / iOS 12+)、H5、微信小程序及其他主流小程序。
• 无感交互：采用 pointer-events: none 技术，水印层级虽高但完全不阻挡下方内容点击与交互。
• 自适应布局：智能计算屏幕尺寸，无论是手机还是平板（Pad），水印自动铺满，旋转无死角。
• 暗黑适配：内置暗黑模式（Dark Mode）逻辑，深色背景下自动调整透明度，防止刺眼。
• 开箱即用：符合 uni_modules 规范，无需手动引入，安装即可在页面中使用。
• 高性能：非 Canvas 绘制，无内存泄漏风险，对长列表页面滚动无影响。

📦 安装方式

本组件符合 uni_modules 规范。

1. 下载插件包，解压至项目根目录的 uni_modules 文件夹下。
2. 目录结构应为：项目根目录/uni_modules/muzi-watermark/。

🚀 快速上手

由于使用了 easycom 机制，您无需在页面中手动 import，直接在 <template> 中使用即可。

基础用法

最简单的使用方式，仅需传入文本：

<template>
  <view>
    <muzi-watermark text="张三 ***" />

    <view class="content">
      这里是页面正常内容...
    </view>
  </view>
</template>

高级用法（自定义样式）

您可以自定义颜色、透明度、旋转角度等：

<template>
  <view>
    <muzi-watermark 
      text="内部绝密资料" 
      color="#EF3912" 
      :opacity="0.1"
      :rotate="-45" 
      :z-index="10000"
    />

    </view>
</template>

⚙️ API 文档

Props 属性

Events 事件

注意：组件默认设置了 pointer-events: none 以实现点击穿透。如需捕获点击事件，需手动修改组件源码 CSS 去除该属性，但不推荐这样做，因为会阻挡页面操作。

📱 平台兼容性

⚠️ 注意事项

1. 层级问题：默认 z-index 为 9999。如果页面中有 u-view 的模态框（Toast/Modal）被遮挡，请适当调整本组件的 zIndex 或调整 UI 库的层级配置。
2. Nvue 支持：目前版本主要针对 Vue 页面优化。nvue 页面由于渲染机制不同（weex），本插件可能无法直接在 nvue 中全屏生效，需自行调整布局方式。
3. 背景色：若页面背景色为纯白，默认的灰色水印效果最佳；若页面背景复杂，建议适当调整 opacity 或 color。

📝 更新日志

v1.0.0

• 初始化发布插件。
• 实现 View + CSS 方案，兼容多端。
• 支持暗黑模式适配。