使用方式

npm install vue3-watermark or yarn add vue3-watermark

效果

指令说明

本组件本质上是一个vue3的指令，可以使用按需引用，也可以全局注册改指令

局部使用

1<script setup lang="ts">
2 import { vWaterMark } from 'vue3-watermark';
3// This starter template is using Vue 3 <script setup> SFCs
4// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
5</script>
6
7<template>
8  <div
9    class="test--container"
10    v-water-mark="{ text: '我是水印内容', textColor: 'rgba(0, 0, 0, 0.5)', font: '20px Microsoft JhengHei', row: 100, col: 170 }"
11  ></div>
12</template>
13
14<style>
15.test--container {
16  width: 500px;
17  height: 400px;
18  background-color: rgba(210, 105, 30, 0.63);
19}
20</style>
21

全局注册

main.js/ts

1import { createApp } from 'vue'
2import App from './App.vue'
3import waterMark from 'vue3-waterMark'
4
5
6const app = createApp(App);
7waterMark(app);
8app.mount('#app')

使用的组件中

1<script setup lang="ts">
2
3</script>
4
5<template>
6  <div
7    class="test--container"
8    v-water-mark="{ text: '我是水印内容', textColor: 'rgba(0, 0, 0, 0.5)', font: '20px Microsoft JhengHei', row: 100, col: 170 }"
9  ></div>
10</template>
11
12<style>
13.test--container {
14  width: 500px;
15  height: 400px;
16  background-color: rgba(210, 105, 30, 0.63);
17}
18</style>

api 参考

名称	作用	默认值	类型
text	水印的名称	无	string
font	水印的字体格式	"16px Microsoft JhengHei"	string
textColor	水印的字体颜色	"rgba(180, 180, 180, 0.3)"	string
textColor	水印的字体颜色	"rgba(180, 180, 180, 0.3)"	string
row	每一行的间距	100	number
col	每一列的长度	100	number