使用方式

npm install vue3-watermark or yarn add vue3-watermark

效果

指令说明

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

局部使用

<script setup lang="ts">
 import { vWaterMark } from 'vue3-watermark';
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>

<template>
  <div
    class="test--container"
    v-water-mark="{ text: '我是水印内容', textColor: 'rgba(0, 0, 0, 0.5)', font: '20px Microsoft JhengHei', row: 100, col: 170 }"
  ></div>
</template>

<style>
.test--container {
  width: 500px;
  height: 400px;
  background-color: rgba(210, 105, 30, 0.63);
}
</style>

全局注册

main.js/ts

import { createApp } from 'vue'
import App from './App.vue'
import waterMark from 'vue3-waterMark'


const app = createApp(App);
waterMark(app);
app.mount('#app')

使用的组件中

<script setup lang="ts">

</script>

<template>
  <div
    class="test--container"
    v-water-mark="{ text: '我是水印内容', textColor: 'rgba(0, 0, 0, 0.5)', font: '20px Microsoft JhengHei', row: 100, col: 170 }"
  ></div>
</template>

<style>
.test--container {
  width: 500px;
  height: 400px;
  background-color: rgba(210, 105, 30, 0.63);
}
</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|