更新记录

1.0.5（2024-01-19）

• 重大更新：新增全局数据监听，组件参数变化时，水印跟随变化

1.0.4（2023-10-27）

• 重大更新：新增参数scale放大缩小，可放大和缩放水印，以打到相关使用需求
• 重大更新：新增参数column水印列数，用以适用缩小功能，防止缩小后水印不能完全覆盖页面问题

1.0.3（2023-08-03）

• 去除微信小程序支持，canvas在小程序手机中会跟随页面滚动而滚动

平台兼容性

水印组件

组件名：h-watermark

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

<!-- 基本使用 -->
<h-watermark></h-watermark>

<!-- 自定义标题文字 -->
<h-watermark title="自定义标题文字"></h-watermark>

<!-- 是否显示标题文字 -->
<h-watermark :titleShow="false"></h-watermark>

<!-- 自定义标题文字字号 -->
<h-watermark :titleSize="26"></h-watermark>

<!-- 自定义标题文字颜色 -->
<h-watermark titleColor="#30b6a2"></h-watermark>

<!-- 自定义标题文字透明度 -->
<h-watermark :titleLucency="0.4"></h-watermark>

<!-- 自定义联系电话 -->
<h-watermark mobile="18888888888"></h-watermark>

<!-- 是否显示联系电话 -->
<h-watermark :mobileShow="false"></h-watermark>

<!-- 自定义联系电话字号 -->
<h-watermark :mobileSize="16"></h-watermark>

<!-- 自定义联系电话颜色 -->
<h-watermark mobileColor="#30b6a2"></h-watermark>

<!-- 自定义联系电话透明度 -->
<h-watermark :mobileLucency="0.4"></h-watermark>

<!-- 自定义软件名称 -->
<h-watermark appName="自定义软件名称"></h-watermark>

<!-- 是否显示软件名称 -->
<h-watermark :appNameShow="false"></h-watermark>

<!-- 自定义软件名称字号 -->
<h-watermark :appNameSize="16"></h-watermark>

<!-- 自定义软件名称颜色 -->
<h-watermark appNameColor="#30b6a2"></h-watermark>

<!-- 自定义软件名称透明度 -->
<h-watermark :appNameLucency="0.4"></h-watermark>

<!-- 自定义旋转弧度 -->
<h-watermark :rotate="45"></h-watermark>

<!-- 自定义父级容器 -->// 写在父级容器中
<view style="height: 500px;position: relative;">
    <h-watermark position="absolute"></h-watermark>
</view>

<!-- 自定义放大缩小 -->
<h-watermark :scale="0.5"></h-watermark>

<!-- 自定义水印列数 -->
<h-watermark :column="50"></h-watermark>

API

Props