更新记录
1.0.2(2025-09-09) 下载此版本
chore: package.json 修改
1.0.1(2025-09-09) 下载此版本
docs: readme更新
1.0.0(2025-09-09) 下载此版本
feat: watermark产出
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
× | √ | - | - | × | × | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | × | × | × | × | × | - | × | × | × | × |
wsd-watermark
基于wsd-render-wxml-to-canvas^1.0.2组件实现水印组件,请确保wsd-render-wxml-to-canvas一起安装。 wsd-render-wxml-to-canvas基于wxml-to-canvas,请记得在pages.json 全局引用wsd-render-wxml-to-canvas包中的wxml-to-canvas,否则水印将会不能如你所愿。
基础用法
通过content指定水印文本,同时width 和 height属性必须传
基于wsd-render-wxml-to-canvas,因此width/height必须传递,否则水印绘制存在缺陷参考。
<view class="demo-module__content">
{{ 'content '.repeat(10) }}
<wsd-watermark
content="watermark"
:width="20"
:height="20"
:gap="2"
:fontSize="10"
:rotate="-30"
></wsd-watermark>
</view>
多行文本水印
content可以直接传递文本数组,将得到多行水印。
图片水印
通过image指定图片文本,image优先级高于content。
Props
name | type | description | required | default |
---|---|---|---|---|
width | Number | 水印尺寸-宽度-必填 | true | - |
height | Number | 水印尺寸-高度-必填 | true | - |
content | [Array, String] | 文本水印内容 | false | "" |
image | String | 图片水印url | false | "" |
wrapperStyle | Object | 水印wrapper样式 | false | - |
customStyle | Object | 自定义水印样式:.wrapper/.img/.text,参考 | false | - |
gap | Number | 水印间距-水平/垂直 | false | 0 |
gapX | Number | 水印间距-垂直,比gap优先 | false | 0 |
gapY | Number | 水印间距-垂直,比gap优先 | false | 0 |
rotate | Number | 水印wrapper样式 | false | -30 |
fontSize | Number | 文本水印字号 | false | 10 |
lineHeight | Number | 文本水印行高 | false | 12 |
color | String | 文本水印颜色 | false | "#a9a9a9" |
opacity | Number | 水印透明 | false | 0.75 |
zIndex | Number | 水印层级 | false | 9999 |
fullscreen | Boolean | 是否全屏绘制水印 | false | false |
Events
Exposes
name | type | description |
---|---|---|
watermarkImg | ref\<string> | 水印图片 |