一款基于vue3的水印组件

github：https://github.com/ipengkai/ipeng-watermark

安装:

npm i -S ipeng-watermark

使用:

#box{
  position: relative;
  width: 100vw;
  height: 100vh;
}

<template>
...
<div id="box"></div>

<ipeng-watermark el="#box" txt="watermark"></ipeng-watermark>
...
</template>

import IpengWatermark from "ipeng-watermark"

export default {
  components:{
    IpengWatermark
  }
}

属性:

el

Type: String
Default: 'body'

一个css选择器,必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。 该组件使用vue3的teleport内置组件将内容插入到查找到的元素中。 注意: 查找到的元素必须有position属性，且设置了相对定位、绝对定位、或者固定定位。

txt

Type: String
Default: 'ipeng-watermark'

水印内容。

color

Type: String
Default: '#d9d9d9'

水印的颜色。

size

Type: Number
Default: 18

水印文字的字号大小。

opacity

Type: Number
Default: 0.7
Range: 0~1

水印的透明度。

xGap

Type: Number
Default: 60

两个水印之间的横向间距。

yGap

Type: Number
Default: 90

两个水印之间的纵向间距。

zIndex

Type: Number
Default: 0

水印层的层级。

效果图