LimeUI+1.2.0

主题

LimeWatermark 水印组件 ​

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

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

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础用法 ​

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

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

多行文字水印 ​

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

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

图片水印 ​

使用图片作为水印。

  • 注意:uvue app不支持
  • 使用width和height控制图片的大小
  • 注意，网络图片在H5和NVUE需要解决跨域问题，在小程序需要去公众平台配置download域名
html
<l-watermark image="https://example.com/logo.png">
  <view class="content">
    页面内容区域
  </view>
</l-watermark>

自定义样式 ​

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

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

自定义间距 ​

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

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

自定义偏移 ​

设置水印的偏移位置。

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

全屏水印 ​

设置水印覆盖整个屏幕。

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

自定义水印大小 ​

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

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

快速预览 ​

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

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

插件标签说明 ​

标签名说明
l-watermark组件标签
lime-watermark演示标签

Vue2使用说明 ​

main.js中添加以下代码：

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

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

API文档 ​

Props 属性说明 ​

属性名说明类型默认值
zIndex水印层级number9
rotate水印旋转角度number-22
width单个水印的宽度number-
height单个水印的高度number-
image水印图片地址string-
content水印文字内容string | string[]-
font水印文字样式object-
gap水印之间的间距 [水平间距, 垂直间距]number[][30, 30]
offset水印偏移量 [水平偏移, 垂直偏移]number[]-
fullScreen是否为全屏水印booleanfalse
baseSize图片内容重复次数number2
fontGap多行文字之间的行间隔number3

font 对象属性 ​

属性名说明类型默认值
color文字颜色string-
fontSize文字大小number | string-
fontWeight文字粗细'normal' | 'light' | 'weight' | number-
fontStyle文字样式'none' | 'normal' | 'italic' | 'oblique'-
fontFamily字体string-

Slots 插槽 ​

名称说明
default水印包裹的内容

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码