更新记录

0.0.4（2023-09-18）

图片水印支持网络图片和base64（钉钉小程序仅支持网络图片）

0.0.3（2023-06-06）

优化文档

0.0.2（2023-06-04）

将公共依赖提取至hd-utils

查看更多

平台兼容性

Vue2 Vue3
× √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.11 app-vue × √ √ × × √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

WaterMark 水印

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

代码演示

基础用法

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

<hd-water-mark content="fant-mini-plus" :width="130" :height="130"></hd-water-mark>

图片水印

通过image字段设置图片地址，通过image-width和image-height字段设置水印图片的宽高。

<hd-water-mark image="https://fant-mini-plus.top/img/spaceship.png" :image-width="38" :image-height="38"></hd-water-mark>

局部水印

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

<hd-water-mark content="fant-mini-plus" :full-screen="false"></hd-water-mark>

自定义层级和透明度

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

<hd-water-mark content="fant-mini-plus" :opacity="0.4"></hd-water-mark>

Props

Name Description Type Required Default
content 显示内容 string false -
image 显示图片的地址，支持网络图片和base64（钉钉小程序仅支持网络图片） string false -
imageHeight 图片高度 number false 64
imageWidth 图片宽度 number false 120
gutterX X 轴间距，单位 px number false 24
gutterY Y 轴间距，单位 px number false 48
width canvas 画布宽度，单位 px number false 120
height canvas 画布高度，单位 px number false 64
fullScreen 是否为全屏水印 boolean false true
color 水印字体颜色 string false #1a1a1a
size 水印字体大小，单位 px number false 14
fontStyle 水印字体样式（仅微信、支付宝和 h5 支持），可能的值：normal、italic、oblique string false normal
fontWeight 水印字体的粗细（仅微信、支付宝和 h5 支持） number | string false normal
fontFamily 水印字体系列（仅微信、支付宝和 h5 支持） string false PingFang SC
rotate 水印旋转角度 number false -25
zIndex 自定义层级 number false 1100

联系方式

有不明白或者建议可以扫码交流

联系我们

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...