▷ Vue3水印（Watermark）

效果如下图：在线预览

APIs

Watermark

参数

说明

类型

默认值

width

水印的宽度，默认为 content 自身的宽度，单位 px

number

undefined

height

水印的高度，默认为 content 自身的高度，单位 px

number

undefined

layout

水印的布局方式：平行布局 parallel; 交替布局 alternate

‘parallel’ | ‘alternate’

‘alternate’

rotate

水印绘制时，旋转的角度，单位 °

number

-22

zIndex

追加的水印元素的 z-index

number

90

image

图片源，建议使用 2 倍或 3 倍图，优先级高于文字

string

undefined

content

水印文字内容

string | string[]

undefined

fullscreen

是否展示全屏

boolean

false

textStyle

水印文字样式

[Font]

{ color: ‘rgba(0, 0, 0, 0.15)’, fontSize: 16, fontWeight: ‘normal’, fontFamily: ‘sans-serif’, fontStyle: ‘normal’ }

gap

水印之间的间距

[number, number]

[100, 100]

offset

水印距离容器左上角的偏移量，默认为 gap/2

[number, number]

[50, 50]

Font Type

名称

说明

类型

默认值

color

字体颜色

string

‘rgba(0, 0, 0, 0.15)’

fontSize

字体大小，单位 px

number

16

fontWeight

字体粗细

‘normal’ | ‘light’ | ‘weight’ | number

‘normal’

fontFamily

字体类型

string

‘sans-serif’

fontStyle

字体样式

‘none’ | ‘normal’ | ‘italic’ | ‘oblique’

‘normal’

创建水印组件Watermark.vue

其中引入使用了以下工具函数：

DOM监听 useMutationObserver

在要使用的页面引入

其中引入使用了以下组件：

Vue3 栅格（Grid）

Vue3弹性布局（Flex）

Vue3 输入框（Input）

Vue3 数字输入框（InputNumber）

Vue3 滑动输入条（Slider）

Vue3 开关（Switch）