vue2-water-marker

vue2-water-marker

​ vue2-water-marker是一款能帮助开发者轻松实现水印图片及水印文字的vue3项目的水印插件包。

示例

<div id="app">
    <vue2-water-marker text="欢迎关注微信公众号,【爆米花小布】,分享前端好料"></vue2-water-marker>
</div>

  <div class="app">
    <vue2-water-marker :imgSrc="waterImg"></vue2-water-marker>
  </div>

项目上使用效果展示如下

优点

1. 使用简单
2. 加大了水印篡改难度
3. 加大了删除水印难度
4. 支出水印图片
5. 支持水印文字，且支持多行文本
6. 支持配置隔行交错
7. 支持配置旋转角度
8. 支持配置宽度高度来控制水印的分布情况

使用步骤

1. # 安装水印包
   npm install vue2-water-marker
   

2. // 在main.js上引入
   import xiaobu from "vue2-water-marker"
   Vue.use(xiaobu)
   

3. <!--在页面中使用-->
     <div class="app">
       <vue2-water-marker text="欢迎关注微信公众号,【爆米花小布】,分享前端好料"></vue2-water-marker>
     </div>
   

注意：水印的覆盖范围为水印元素挂在位置的父元素覆盖的位置，text优先级高于imgSrc

参数

实现原理

​ 实现原理可参考微信公众号【爆米花小布】相关文章 实现水印防篡改。更多前端知识，可关注微信公众号【爆米花小布】。

具体使用请继续阅读使用文档。微信公众号【爆米花小布】，抖音号【爆米花小布】 更多好玩的插件

vue2-element-dict字典包插件

vue3-element-dict字典包插件

vue2-vant-dict移动端字典包插件

更新日志

0.0.2

1. 【修复bug】修复图片水印初次无法加载成功的bug