Vue Blind Watermark

一个简单易用的Vue盲水印组件，可以为网页添加不易察觉的水印，保护敏感信息。

特性

• 简单易用，一行代码即可集成
• 支持自定义工号、日期等水印内容
• 可调整水印透明度、大小、间距等参数
• 防篡改机制，自动检测并恢复被修改的水印
• 支持Vue 2

安装

npm install vue-blind-watermark --save
# 或
yarn add vue-blind-watermark

使用方法

全局注册

import Vue from 'vue'
import VueBlindWatermark from 'vue-blind-watermark'

Vue.use(VueBlindWatermark)

局部注册

import { BlindWatermark } from 'vue-blind-watermark'

export default {
  components: {
    BlindWatermark
  }
}

基本用法

<template>
  <div>
    <blind-watermark work-id="220909" :opacity="0.01"></blind-watermark>
    <!-- 页面内容 -->
  </div>
</template>

属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | workId | String | '' | 工号或其他标识 | | opacity | Number | 0.01 | 水印透明度，范围0-1 | | textColor | String | 'rgba(0, 0, 0, 0.6)' | 水印文本颜色 | | fontSize | Number | 14 | 水印文本大小(px) | | spacing | Number | 80 | 水印间距(px) | | horizontalSpacing | Number | 80 | 水印水平间距(px)，优先级高于spacing | | verticalSpacing | Number | 44 | 水印垂直间距(px)，优先级高于spacing | | lineSpacing | Number | 2 | 水印文本行间距(px) | | size | Number | 170 | 水印大小(px) | | customText | String | '' | 自定义水印文本 | | showDate | Boolean | true | 是否显示日期 | | zIndex | Number | 1000 | 水印层级 |

事件

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | watermark-generated | 水印生成完成时触发 | 水印内容文本 |

示例

自定义水印内容和样式

<template>
  <div>
    <blind-watermark 
      work-id="员工编号: 220909"
      custom-text="公司机密"
      :opacity="0.02"
      :font-size="16"
      :spacing="100"
      :horizontal-spacing="100"
      :vertical-spacing="50"
      :line-spacing="1"
      text-color="rgba(255, 0, 0, 0.5)"
      @watermark-generated="onWatermarkGenerated"
    ></blind-watermark>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    onWatermarkGenerated(text) {
      console.log('水印已生成:', text)
    }
  }
}
</script>

调整水印间距

<template>
  <div>
    <!-- 使用不同的水平和垂直间距，使水印分布更加紧凑 -->
    <blind-watermark 
      work-id="220909"
      :horizontal-spacing="80"
      :vertical-spacing="40"
      :opacity="0.01"
    ></blind-watermark>
    <!-- 页面内容 -->
  </div>
</template>

注意事项

• 水印透明度建议保持在0.01-0.05之间，过高会影响用户体验，过低则可能无法达到防泄密效果
• 水印会覆盖整个页面，但不会影响页面交互（pointer-events: none）

许可证

MIT