今天分享个vue项目的水印插件包，vue2项目对应vue2-water-marker, vue3项目对应vue3-water-marker。这两个包的形成归功于对xiaobu-water-marker水印包进行优化。实现了多行文本配置，配置起来更加方便。展示效果如下
使用说明
vue2-water-marker: https://www.npmjs.com/package/vue2-water-marker
vue3-water-marker: https://www.npmjs.com/package/vue3-water-marker
参数
属性说明类型默认值waterMarkerId水印元素的id，不传则随机生成String无width单个水印图片的宽度String，Number200height单个水印图片的高度String，Number200text水印文字，需要换行时可使用英文逗号隔开String无imgSrc水印图片,本地图片或者网络图片地址String无imgWidthimgSrc图片宽度String，Number100crisscross是否交错展示水印BooleantruerotateDirectionanticlockwise或clockwise 表示逆时针或顺时针StringanticlockwiserotateDeg旋转角度String，Number20oddOrEven偶数行错开或奇数行错开 0或1String1lineHeight水印文字行高String，Number24font水印文字字体Stringsans-seriffontSize水印文字字体大小String，Number16opacity透明度String，Number0.3zIndex水印元素的层级Number, String999grayImg水印图片时，是否将水印图片置灰BooleanfalsergbNum置灰系数Array[0.299, 0.587, 0.114]openPrevent是否开启水印防删除，防篡改BooleantruebeDeleteTips水印被删除时在控制台的提示语，传空则控制台不展示String不要删我水印，请尊重下版权，谢谢!beChangeTips水印属性被修改时在控制台的提示语，传空则控制台不展示String不要随意更改我的属性，谢谢!unSupportTips浏览器不支持时的提示语String浏览器不支持MutationObserver，请更换浏览器使用！showDestoryTips展示销毁时日志String水印组件已销毁，已执行去除监听事件！注意：水印的覆盖范围为水印元素挂在位置的父元素覆盖的位置，text优先级高于imgSrc， imgSrc使用本地资源时，确保该图片资源引入正确，，否则会出现水印图片加载不出来的情况
总结
下次遇到需要使用水印效果的时候，一定要记得vue2-water-marker，vue3-water-marker哟。加强了对水印的保护，删除或篡改水印的难度加大。