Watermark 水印

介绍

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

基础用法

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

<vd-watermark text="Vita Design" />

图片水印

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

<vd-watermark image="图片URL" opacity="0.1" />

自定义间隔

通过 column-gap 和 row-gap 属性来控制多个水印之间的间隔。

<vd-watermark text="Vita Design" column-gap="32" row-gap="32" />

自定义展示列数

通过 columns 属性来控制水印的展示列数。

<vd-watermark text="Vita Design" columns="5" />

自定义旋转角度

通过 rotate 属性来设置水印的旋转角度。

<vd-watermark text="Vita Design" rotate="22" />

自定义水印

通过 column 插槽来自定义水印的内容。

<vd-watermark custom-class="watermark-custom" column-gap="0" row-gap="42">
  <template #column="{ row, column }">
    <view v-if="row % 2" class="col-logo">
      <image :src="logo" mode="widthFix" /> Vita {{ `${row}-${column}` }}
    </view>
    <view v-else class="col-user">
      <view class="name">用户名</view>
      <view class="phone">19900000000</view>
    </view>
  </template>
</vd-watermark>

.watermark-custom {
  .col-logo image {
    width: 30px;
  }

  .col-user {
    padding: 0 $vd-gap-xs;
    text-align: center;

    .name {
      margin-bottom: $vd-gap-sm;
    }

    .phone {
      font-size: $vd-font-size-md;
    }
  }
}

全屏展示

通过 fixed 属性来开启全屏展示。

<vd-watermark text="Vita Design" fixed />

API

Props

参数	说明	类型	默认值
text	文本内容	string	-
color	文本颜色	string	-
image	图片路径，优先级高于文本	string	-
fixed	是否固定全屏显示	boolean	false
rotate	水印的旋转角度	string | number	-22
columns	水印的列数	string | number	3
column-gap	水印的列间距	string | number	64
row-gap	水印的行间距	string | number	28
opacity	水印透明度	string | number	0.1
z-index	层级	string | number	99

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Slots

名称	说明
column	自定义列内容