Watermark 水印

水印组件,在页面上添加文字或图片水印

水印内容

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-watermark class="demo-watermark-default" content="reglow"> <view class="watermark-content"> <text>水印内容区域</text> </view> </re-watermark>

<!-- 不同文字 -->
  <re-watermark class="demo-watermark-chinese" content="禁止复制"> <view class="watermark-content"><text>中文水印</text></view> </re-watermark>
  <re-watermark class="demo-watermark-english" content="Confidential"> <view class="watermark-content"><text>英文水印</text></view> </re-watermark>

<!-- 透明度 -->
  <re-watermark class="demo-watermark-opacity-low" content="低透明度" :alpha="0.3"> <view class="watermark-content"><text>低透明度</text></view> </re-watermark>
  <re-watermark class="demo-watermark-opacity-high" content="高透明度" :alpha="0.8"> <view class="watermark-content"><text>高透明度</text></view> </re-watermark>

<!-- 图片水印 -->
  <re-watermark class="demo-watermark-image" image="/static/logo.png"> <view class="watermark-content"><text>图片水印</text></view> </re-watermark>

<!-- 自定义样式 -->
  <re-watermark class="demo-watermark-custom-style" content="自定义" customStyle="margin-top: 10px;"> <view class="watermark-content"><text>自定义样式</text></view> </re-watermark>

<!-- 长文本水印 -->
  <re-watermark class="demo-watermark-long" content="这是一段很长的水印文字"> <view class="watermark-content"><text>长文本水印</text></view> </re-watermark>

<!-- 隐藏水印 -->
  <re-watermark class="demo-watermark-hidden" content="隐藏水印" :visible="false"> <view class="watermark-content"><text>水印已隐藏</text></view> </re-watermark>

<!-- 数字水印 -->
  <re-watermark class="demo-watermark-number" content="12345678"> <view class="watermark-content"><text>数字水印</text></view> </re-watermark>

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-watermark />。

API

Watermark Props

名称类型默认值描述必传
contentstring''水印文本内容Y
imagestring''水印图片地址Y
alphanumber1透明度(0-1)Y
gapXnumber24水印水平间距(px)Y
gapYnumber24水印垂直间距(px)Y
offsetArray<number>gapX/2, gapY/2水印偏移量 x, yY
rotatenumber-22旋转角度Y
movablebooleanfalse是否可移动Y
visiblebooleantrue是否显示水印Y
customStylestring''自定义样式Y

Watermark Events

名称参数描述
---

Watermark Slots

名称描述
default默认插槽