Skip to content

Watermark 水印 0.1.16

在页面或组件上添加指定的图片或文字,可用于版权保护、品牌宣传等场景。

基础用法

将 WaterMark 组件放在页面中,可以通过content字段设置水印显示内容,通过widthheight设置单个水印的高度与宽度,展示一个全屏的水印。

html
<wd-watermark content="wot-design-uni" :width="130" :height="130"></wd-watermark>

图片水印

通过image字段设置网络图片地址或Base64图片,通过image-widthimage-height字段设置水印图片的宽高。 注意:钉钉小程序平台仅支持网络图片。

html
<wd-watermark image="https://wot-design-uni.cn/wot-design.png" :image-width="38" :image-height="38"></wd-watermark>

局部水印

通过full-screen设置是否为全屏水印。

html
<wd-watermark content="wot-design-uni" :full-screen="false"></wd-watermark>

自定义层级和透明度

通过opacity设置透明度、z-index设置水印层级。

html
<wd-watermark content="wot-design-uni" :opacity="0.4"></wd-watermark>

Attributes

参数说明类型可选值默认值最低版本
content显示内容string-''0.1.16
image显示图片的地址,支持网络图片和base64(钉钉小程序支持网络图片)string-''0.1.16
imageHeight图片高度number-1000.1.16
imageWidth图片宽度number-1000.1.16
gutterXX轴间距,单位pxnumber-00.1.16
gutterYY轴间距,单位pxnumber-00.1.16
widthcanvas画布宽度,单位pxnumber-1000.1.16
heightcanvas画布高度,单位pxnumber-1000.1.16
fullScreen是否为全屏水印boolean-true0.1.16
color水印字体颜色string-'#8c8c8c'0.1.16
size水印字体大小,单位pxnumber-140.1.16
fontStyle水印字体样式(仅微信、支付宝和h5支持)stringnormal / italic / oblique'normal'0.1.16
fontWeight水印字体的粗细(仅微信、支付宝和h5支持)stringnormal / bold / bolder'normal'0.1.16
fontFamily水印字体系列(仅微信、支付宝和h5支持)string-'PingFang SC'0.1.16
rotate水印旋转角度number--250.1.16
zIndex自定义层级number-11000.1.16
opacity自定义透明度,取值 0~1number-0.50.1.16

Released under the MIT License.

Released under the MIT License.