Tui Plus Vapor

Appearance

# t-watermark

Watermark 水印

t-watermark 组件介绍 ​

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

t-watermark 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-watermark 基础用法 ​

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

vue
<template>
	<view class="p-15">
		<t-card class="mb-15"
				title='WatermarkPlus 水印'
				sub-title="Canvas绘制优势是性能高"></t-card>
		<t-section class="r-10 mb-15"
				   title="文字水印(Canvas 绘制)-type-size"></t-section>
		<t-watermark content="欢迎使用Tui"
					 :class="[`r-10 h-250 mb-15 tvg`]"
					 type='primary'
					 size="large"
					 :xSpace="150"
					 :ySpace="120">
			<t-col class="twh-100% fc">
				<t-text>大号-间距设置</t-text>
			</t-col>
		</t-watermark>
		<t-watermark content="欢迎使用Tui"
					 :class="[`r-10 h-250 mb-15 tvg`]"
					 type='error'
					 size="mini">
			<t-col class="twh-100% fc">
				<t-text>迷你-自定义颜色</t-text>
			</t-col>
		</t-watermark>
		<t-watermark content="/static/image/wark.png"
					 :class="[`r-10 h-250 mb-15 tvg`]"
					 :xSpace="150"
					 :ySpace="120">
			<t-col class="twh-100% fc">
				<t-text>图片水印</t-text>
			</t-col>
		</t-watermark>
	</view>
</template>

<script setup
		lang="uts">

</script>

文字水印 ​

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>

t-watermark Props ​

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

t-watermark Events ​

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

t-watermark Slots ​

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