安装

# npm 安装
npm install w-vue3-watermark

# yarn 安装
yarn add w-vue3-watermark

使用

# 引入组件
import { createApp } from 'vue'
import watermark from 'w-vue3-watermark'

# 注册组件
createApp(App).use(watermark).mount('xxxx')

# 组件使用
<watermark
  :waterName="水印内容"
  :waterFontSize="水印字体大小"
  :waterFontWeight="水印字体粗细"
  :waterGap="水印重复的间隔"
  :waterRotate="水印倾斜角度"
  :waterFontFamily="水印字体"
  :waterFontColor="水印字体颜色"
  :waterTextAlign="水印对齐方式"
  :shadowColor="水印阴影颜色"
  :shadowOffsetX="阴影水平偏移"
  :shadowOffsetY="阴影垂直偏移"
  :shadowBlur="阴影模糊半径"
/>

参数默认值说明

| 字段 | 解释 | 默认值 | 类型 | | -------------- | -------------- | --------------------- | -------------- | | waterName | 水印内容 | - | [string, array]| | waterFontSize | 水印字体大小 | 20 | number | | waterFontWeight| 水印字体粗细 | 700 | number | | waterGap | 水印重复的间隔 | 100 | number | | waterRotate | 水印倾斜角度 | 20 | number | | waterFontFamily| 水印字体 | Microsoft Yahei | string | | waterFontColor | 水印字体颜色 | rgba(255, 255, 255, 1)| string | | shadowColor | 水印阴影颜色 | rgba(61, 61, 61, 0.25)| string | | shadowOffsetX | 阴影水平偏移 | 1.5 | number | | shadowOffsetY | 阴影垂直偏移 | 1.5 | number | | shadowBlur | 阴影模糊半径 | 0 | number | | waterTextAlign | 水印对齐方式 | left | string |