Watermark 水印

介绍

在页面上添加特定的文字或图案作为水印，可用于防止信息盗用。

导入

import Watermark from '@/components/display/Watermark.vue'

使用方法

文字水印

通过 content 属性来设置水印的文字。

<template>
  <view class="box">
    <Watermark content="NaEasy UI" />
  </view>
</template>

<style scoped>
.box {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #f5f5f5;
}
</style>

图片水印

通过 image 属性来设置水印图片，并使用 opacity 来调整水印的整体透明度。

<template>
  <view class="box">
    <Watermark :image="WatermarkImage" :contentHeight="20" />
  </view>
</template>

<script setup>
import WatermarkImage from '../../static/watermark.png';
</script>

<style scoped>
.box {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #f5f5f5;
}
</style>

自定义间隔

通过 gapX 和 gapY 属性来设置水印之间的水平和垂直间隔。

<template>
  <view class="box">
    <Watermark 
      :image="WatermarkImage" 
      :gapX="50"
      :gapY="50"
      :contentHeight="30"
    />
  </view>
</template>

<script setup>
import WatermarkImage from '../../static/watermark.png';
</script>

<style scoped>
.box {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #f5f5f5;
}
</style>

自定义倾斜角度

通过 rotate 属性来设置水印的倾斜角度（单位：度），默认值为-22。

<template>
  <view class="box">
    <Watermark 
      :image="WatermarkImage" 
      :contentHeight="20"
      :rotate="25"
    />
  </view>
</template>

<script setup>
import WatermarkImage from '../../static/watermark.png';
</script>

<style scoped>
.box {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #f5f5f5;
}
</style>

全屏水印

通过 fullPage 属性设置水印为全屏显示。

<template>
  <Watermark content="全屏水印" fullPage />
</template>

API 参考

Watermark

水印组件。

Props

名称	说明	类型	必填	默认值
width	水印组件宽度。默认占满父容器	number	-	-
height	水印组件高度。默认占满父容器	number	-	-
contentFont	水印文字字体	string	-	'14px Arial'
contentWidth	水印文字宽度	number	-	100
contentHeight	水印文字高度	number	-	60
offsetX	水印文字水平间距(px)	number	-	0
offsetY	水印文字垂直间距(px)	number	-	0
zIndex	水印组件z-index	number | string	-	999
content	水印内容	string	-	''
contentColor	水印字体颜色	string	-	'text.second'
image	水印图片	string	-	''
rotate	水印旋转角度(deg)	number	-	-22
fullPage	水印组件是否全屏	boolean	-	false
gapX	水印组件水平间距(px)	number	-	30
gapY	水印组件垂直间距(px)	number	-	40
opacity	水印透明度	number	-	0.4

Slots

名称	说明
default	默认插槽

Events

名称	说明	参数
无	无事件

主题变量

名称	类型	默认值	说明
WatermarkContentFont	string	'14px Arial'	水印文字字体
WatermarkContentWidth	number	100	水印文字宽度
WatermarkContentHeight	number	60	水印文字高度
WatermarkRotate	number	-22	水印旋转角度
WatermarkGapX	number	30	水印组件水平间距
WatermarkGapY	number	40	水印组件垂直间距
WatermarkTextColor	string	'text.second'	水印字体颜色
WatermarkOpacity	number	0.4	水印透明度