Tui Plus Vapor

Appearance

t-watermark ​

Watermark 水印

组件介绍 ​

t-watermark 是水印组件，用于在页面上添加水印效果，支持文字水印和图片水印。基于 Canvas 绘制，性能高。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/watermark/watermark.uvue，通过 content 属性设置水印文本。

vue
<template>
  <t-watermark content="欢迎使用Tui" class="h-500 bg-#fff">
    <view class="content">
      <text>页面内容</text>
    </view>
  </t-watermark>
</template>

文字水印 ​

vue
<template>
  <t-watermark 
    content="欢迎使用Tui" 
    type="primary" 
    size="large"
    :xSpace="150"
    :ySpace="120">
    <view class="content">
      <text>大号-间距设置</text>
    </view>
  </t-watermark>
</template>

图片水印 ​

当 content 为图片路径时，显示图片水印。

vue
<template>
  <t-watermark 
    content="/static/image/wark.png"
    :xSpace="150" 
    :ySpace="120">
    <view class="content">
      <text>图片水印</text>
    </view>
  </t-watermark>
</template>

Props ​

属性名说明类型默认值
content水印内容，文本或图片路径string''
imageWidth图片水印宽度string''
imageHidth图片水印高度string''
angle水印角度number-45
xSpace水平间距number100
ySpace垂直间距number80
size组件尺寸string'medium'
type组件类型string''
effect组件显示主题string'normal'

Events ​

事件名说明回调参数
initFinished组件初始化完成触发(rect: NodeInfo) => void
touchstart触摸开始(e: UniTouchEvent) => void
touchmove触摸移动(e: UniTouchEvent) => void
touchend触摸结束(e: UniTouchEvent) => void

Slots ​

插槽名说明
default水印覆盖的内容区域