水印 xWatermark

---

预览

介绍

适合需要保密，版权的页面使用。全端 x-skia-u 绘制斜铺文字，不要官方 canvas。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-watermark/x-watermark.uvue

使用

<x-watermark></x-watermark>

Props 属性

名称	说明	类型	默认值
label	水印文字	string	"XUI DESIGN"
color	水印颜色	string	"rgba(0,0,0,0.05)"
darkColor	暗黑时的水印颜色	string	"rgba(255,255,255,0.05)"
fontSize	文字大小	string	"18"
gap	渲染的水印之间的间隙，单位px	number	40

Events 事件

名称	参数	说明

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/zhanshi/watermark

示例源码

uvue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">水印 Watermark</x-text>
			<x-text color="#999999">可以控制颜色、内容、字号和间距。全端 x-skia-u 绘制，不支持图片水印。</x-text>
		</x-sheet>

		<x-watermark :label="label"></x-watermark>
</template>

<script setup lang="ts">
	const label =  "XUI DESIGN"
</script>

<style lang="scss">

</style>