How to remove watermark in vue

In the development process using Vue, we often use some third-party component libraries. In order to ensure copyright, these component libraries often add watermarks to the page. But these watermarks may affect user experience in some projects, so we need to find a way to eliminate these watermarks. This article will introduce two methods to remove watermarks in Vue.

Method 1: Modify the component source code

The first method to eliminate the watermark in Vue is to modify the component source code. This method is the most thorough, but it requires a certain programming foundation.

First, we need to find the code to add the watermark. Under normal circumstances, the watermark code is added in the JS file of the component:

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)
  }
}

It can be seen that the function of this code is to add a canvas element and draw the watermark when the component is mounted. We just need to comment out this code or delete the part of the code that adds the watermark.

If you use Vue Cli to build the project like me, it is recommended to copy the source code of the component to the src directory in the project and then modify it. After the modification is completed, the components need to be recompiled and the modified components can be introduced into the project.

It is worth noting that if you use automated build tools such as Webpack or Rollup in your project, your modifications may be overwritten during the packaging process, so you need to regularly check whether the modifications have taken effect.

Method 2: Use CSS style override

The second method is to use CSS style override. This method is simpler, but may have certain limitations in some cases, such as the location of the watermark is too complex.

We first find the parent element where the watermark is located, and then overwrite it with CSS styles. Generally, the parent element where the watermark is located is the parent container.

If we want to eliminate the watermark added to the entire page, we can add the following CSS style:

body ::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  pointer-events: none;
  background-image: url(data:png;base64,iVBORw0KGg...);
}

Among them, background-image is the base64 encoding of the watermark image. By adding a CSS style like this, we can eliminate the watermark on the entire page.

If you want to eliminate the watermark on a specific component, you need to adjust it according to the DOM structure of the component and add appropriate CSS styles. For example, if the watermark in the component is located within a container element, we can add the following CSS style:

.container ::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
  pointer-events: none;
  background-image: url(data:png;base64,iVBORw0KGg...);
}

where .container is the class name of the container element in the component.

Conclusion

The above are two methods to eliminate watermarks in Vue. If you are new to programming, it may be more convenient to use the second method, but there are certain limitations to this method. If you want to remove the watermark more completely, you can use the first method. Whichever method you choose, you need to proceed with caution so as not to affect the stability of your component or project.

The above is the detailed content of How to remove watermark in vue. For more information, please follow other related articles on the PHP Chinese website!