在使用vue的开发过程中，我们经常会用到一些第三方组件库，这些组件库为了保证版权，往往会在页面上添加水印。但是这些水印在一些项目中可能会影响用户体验，因此我们需要找到一种方法来消除这些水印。本文将介绍两种消除vue里水印的方法。
方法一：修改组件源码
第一种消除Vue里水印的方法是修改组件源码，这个方法最为彻底，但是需要一定的编程基础。
首先，我们需要找到添加水印的代码。一般情况下，水印的代码都是在组件的JS文件里添加的：
export default {
name: 'Watermark',
mounted() {
const option = this.$options.watermarkOption
let id = `wm_${new Date().getTime()}`
let parentNode = option.parent || document.body
let canvasEle = document.createElement('canvas')
parentNode.appendChild(canvasEle)
canvasEle.id = id
canvasEle.width = option.defaultWidth
canvasEle.height = option.defaultHeight
let canvas = document.getElementById(id)
let ctx = canvas.getContext('2d')
ctx.font = '16px Microsoft JhengHei'
ctx.fillStyle = 'rgba(200, 200, 200, 0.40)'
ctx.rotate((Math.PI / 180) * option.angle)
ctx.fillText(option.content, option.left, option.top)
}
}可以看出，这段代码的作用就是在组件挂载时添加一个canvas元素，绘制出水印。我们只需要将这段代码注释掉，或者将添加水印的部分代码删除即可。
立即学习“前端免费学习笔记（深入）”；
如果你像我一样使用的是Vue Cli来搭建项目，那么建议复制组件的源码到项目中的src目录下，然后进行修改。修改完成后，需要重新编译组件，将修改后的组件引入到项目中即可。
值得注意的是，如果你的项目中使用了自动化构建工具例如Webpack或Rollup等，那么在打包过程中可能会被覆盖掉你的修改，因此你需要定期检查修改是否生效。
方法二：使用CSS样式覆盖
第二种方法是使用CSS样式覆盖。这个方法更为简单，但是在某些情况下可能会有一定的限制，例如水印的位置过于复杂等。
我们先找到水印所在的父元素，然后对其进行CSS样式的覆盖。一般情况下，水印所在的父元素都是父容器。
如果我们想要消除添加在整个页面上的水印，可以添加以下CSS样式：
body ::after {
content: "";
position: fixed;
left: 0;
top: 0;
z-index: 99999;
pointer-events: none;
background-image: url(data:png;base64,iVBORw0KGg...);
}其中，background-image是水印图片的base64编码。通过添加这样的CSS样式，我们就可以消除整个页面上的水印。
如果想要消除特定组件上的水印，需要根据组件的DOM结构进行调整，添加合适的CSS样式。例如，如果组件中的水印位于一个容器元素内，我们可以添加以下CSS样式：
.container ::after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 99999;
pointer-events: none;
background-image: url(data:png;base64,iVBORw0KGg...);
}其中，.container是组件中容器元素的类名。
结语
以上就是两种消除Vue里水印的方法。如果你不熟悉编程，使用第二种方法可能更为方便，但是这种方式存在一定的限制。如果你想要更为彻底地消除水印，可以使用第一种方法。无论选择哪种方法，都需要谨慎操作，以免影响组件或项目的稳定性。
