水印组件用于在页面上添加水印，支持文字和图片水印，支持无限平铺。

基础用法

最简单的文字水印，使用默认配置即可。

<un-watermark text="uView Next">
	<view class="content">
		<text>这是页面内容</text>
	</view>
</un-watermark>

文字水印

通过设置 text 属性来显示文字水印，可以自定义字体大小、颜色、透明度等。

<un-watermark 
	text="uView Next" 
	:fontSize="15" 
	:fontWeight="400" 
	:color="'rgba(0, 0, 0, 0.15)'" 
	:opacity="0.15"
	:width="120" 
	:height="60" 
	:gapX="20" 
	:gapY="20" 
	:rotate="-22"
>
	<view class="un-watermark__base">
		<text style="font-size: 15px;margin-bottom: 20px;">基础的文字水印</text>
		<un-button type="primary" text="这个是按钮" plain @click="handleClick"></un-button>
	</view>
</un-watermark>

图片水印

通过设置 image 属性来显示图片水印，支持本地图片和网络图片。

注意：在 H5端和小程序使用网络图片时，可能会遇到跨域问题。如果图片服务器未配置 CORS，会导致图片无法加载。解决方案：

1. 在图片服务器端配置 CORS 头，允许跨域访问 CORS 配置1 CORS 配置2
2. H5端使用同源图片
3. 小程序端需要设置 downloadFile 域名，参考文档

<un-watermark 
	:width="150" 
	:height="100" 
	image="https://uview-unix.d3u.cn/images/baidu.png"
	:gapX="30" 
	:gapY="30" 
	:rotate="0"
>
	<view class="un-watermark__base">
		<text style="font-size: 15px;margin-bottom: 20px;">这里图片水印</text>
		<un-button type="primary" text="这个是按钮" plain @click="handleClick"></un-button>
	</view>
</un-watermark>

全屏水印

通过设置 fullScreen 为 true，可以让水印覆盖整个屏幕。

<un-watermark text="全屏水印" fullScreen>
	<card title="基础使用">
		<un-watermark text="uView Next">
			<view class="un-watermark__base">
				<text style="font-size: 15px;margin-bottom: 20px;">基础的文字水印</text>
				<un-button type="primary" text="这个是按钮" plain @click="handleClick"></un-button>
			</view>
		</un-watermark>
	</card>
</un-watermark>

自定义样式

通过设置 fontSize、fontWeight、fontFamily、color、opacity 等属性，可以自定义水印的样式。

<un-watermark 
	text="自定义样式" 
	:fontSize="20" 
	:fontWeight="bold" 
	:fontFamily="'Arial'" 
	:color="'rgba(255, 0, 0, 0.3)'" 
	:opacity="0.3"
>
	<view class="content">
		<text>这是页面内容</text>
	</view>
</un-watermark>

调整间距

通过设置 gapX 和 gapY 属性，可以调整水印之间的水平和垂直间距。

<un-watermark 
	text="调整间距" 
	:width="120" 
	:height="60" 
	:gapX="40" 
	:gapY="40"
>
	<view class="content">
		<text>这是页面内容</text>
	</view>
</un-watermark>

旋转角度

通过设置 rotate 属性，可以设置水印的旋转角度。

<un-watermark 
	text="旋转水印" 
	:width="120" 
	:height="60" 
	:rotate="45"
>
	<view class="content">
		<text>这是页面内容</text>
	</view>
</un-watermark>

API

Props 属性

参数	说明	类型	默认值
text	水印文本内容	string	''
image	水印图片路径，支持本地图片和网络图片	string	''
fontSize	水印字体大小	number	15
fontWeight	水印字体粗细	string	'400'
fontFamily	水印字体族	string	'sans-serif'
color	水印颜色	string	'rgba(0, 0, 0, 0.15)'
opacity	水印透明度，0-1之间	number	1
width	水印宽度	number	100
height	水印高度	number	100
gapX	水印水平间距	number	0
gapY	水印垂直间距	number	0
rotate	水印旋转角度，单位为度	number	-22
zIndex	水印层级	number	-1
fullScreen	是否全屏水印	boolean	false

Slots 插槽

名称	说明
default	默认插槽