Watermark 水印

给页面的某个区域加上水印。

代码演示

基础用法

<template>
  <a-watermark content="Ant Design Vue">
    <div style="height: 500px" />
  </a-watermark>
</template>

多行水印

通过 content 设置 字符串数组 指定多行文字水印内容。

<template>
  <a-watermark :content="['Ant Design Vue', 'Happy Working']">
    <div style="height: 500px" />
  </a-watermark>
</template>

图片水印

通过 image 指定图片地址。为保证图片高清且不被拉伸，请设置 width 和 height, 并上传至少两倍的宽高的 logo 图片地址。

<template>
  <a-watermark
    :height="30"
    :width="130"
    image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
  >
    <div style="height: 500px" />
  </a-watermark>
</template>

API

Watermark

参数	说明	类型	默认值
width	水印的宽度，content 的默认值为自身的宽度	number	120
height	水印的高度，content 的默认值为自身的高度	number	64
rotate	水印绘制时，旋转的角度，单位 °	number	-22
zIndex	追加的水印元素的 z-index	number	9
image	图片源，建议导出 2 倍或 3 倍图，优先级高	string	-
content	水印文字内容	string | string[]	-
font	文字样式	Font	Font
gap	水印之间的间距	[number, number]	[100, 100]
offset	水印距离容器左上角的偏移量，默认为 gap/2	[number, number]	[gap[0]/2, gap[1]/2]

Font

参数	说明	类型	默认值
color	字体颜色	string	rgba(0,0,0,.15)
fontSize	字体大小	number	16
fontWeight	字体粗细	normal | light | weight | number	normal
fontFamily	字体类型	string	sans-serif
fontStyle	字体样式	none | normal | italic | oblique	normal