更新记录

0.1.4（2025-08-31）

• feat: 兼容 uniappx 鸿蒙next

0.1.3（2025-02-21）

• fix: uniapp prop缺少vue影响使用的问题

0.1.1（2025-02-09）

• feat: 兼容uniappx 微信小程序

平台兼容性

uni-app(4.75)

uni-app x(4.75)

lime-watermark 水印组件

一个功能丰富的水印组件，用于在页面上添加文字或图片水印。支持自定义内容、旋转角度、间距、字体样式等多种配置，可用于版权保护、信息标识等多种场景。组件提供了丰富的自定义选项，可以满足各种水印展示需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 水印组件文档 - 站点1
• 水印组件文档 - 站点2
• 水印组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-watermark
2. 导入后可能需要重新编译项目
3. 在页面中使用l-watermark组件

代码演示

基础用法

最简单的水印组件用法，只需要设置水印内容即可。

<l-watermark content="LIME UI">
  <view class="content">
    页面内容区域
  </view>
</l-watermark>

多行文字水印

设置多行文字作为水印内容。

<l-watermark :content="['LIME UI', '版权所有']">
  <view class="content">
    页面内容区域
  </view>
</l-watermark>

图片水印

使用图片作为水印。

• 注意:uvue app不支持
• 使用width和height控制图片的大小
• 注意，网络图片在H5和NVUE需要解决跨域问题，在小程序需要去公众平台配置download域名

<l-watermark image="https://example.com/logo.png">
  <view class="content">
    页面内容区域
  </view>
</l-watermark>

自定义样式

设置水印的旋转角度、颜色、字体大小等样式。

<l-watermark 
  content="LIME UI" 
  :rotate="30" 
  :font="{ color: 'rgba(0, 0, 0, 0.15)', fontSize: 16 }"
>
  <view class="content">
    页面内容区域
  </view>
</l-watermark>

自定义间距

设置水印之间的水平和垂直间距。

<l-watermark 
  content="LIME UI" 
  :gap="[60, 60]"
>
  <view class="content">
    页面内容区域
  </view>
</l-watermark>

自定义偏移

设置水印的偏移位置。

<l-watermark 
  content="LIME UI" 
  :offset="[20, 20]"
>
  <view class="content">
    页面内容区域
  </view>
</l-watermark>

全屏水印

设置水印覆盖整个屏幕。

<l-watermark 
  content="LIME UI" 
  full-screen
>
  <view class="content">
    页面内容区域
  </view>
</l-watermark>

自定义水印大小

设置单个水印的宽度和高度。

<l-watermark 
  content="LIME UI" 
  :width="120" 
  :height="60"
>
  <view class="content">
    页面内容区域
  </view>
</l-watermark>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-watermark/components/lime-watermark -->
<lime-watermark />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

font 对象属性

Slots 插槽

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助