Comment supprimer le filigrane dans Vue

Dans le processus de développement utilisant Vue, nous utilisons souvent des bibliothèques de composants tierces Afin de garantir les droits d'auteur, ces bibliothèques de composants ajoutent souvent des filigranes à la page. Mais ces filigranes peuvent affecter l'expérience utilisateur dans certains projets, nous devons donc trouver un moyen de les éliminer. Cet article présentera deux méthodes pour supprimer les filigranes dans Vue.

Méthode 1 : Modifier le code source du composant

La première méthode pour éliminer les filigranes dans Vue consiste à modifier le code source du composant. Cette méthode est la plus approfondie, mais elle nécessite. une certaine base de programmation.

Tout d'abord, nous devons trouver le code pour ajouter le filigrane. Dans des circonstances normales, le code du filigrane est ajouté dans le fichier JS du composant :

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

On voit que la fonction de ce code est d'ajouter un élément de canevas lorsque le composant est monté pour dessiner le filigrane. Il suffit de commenter ce code ou de supprimer la partie du code qui ajoute le filigrane.

Si vous utilisez Vue Cli pour construire le projet comme moi, il est recommandé de copier le code source du composant dans le répertoire src du projet puis de le modifier. Une fois la modification terminée, les composants doivent être recompilés et les composants modifiés peuvent être introduits dans le projet.

Il est à noter que si vous utilisez des outils de construction automatisés tels que Webpack ou Rollup dans votre projet, vos modifications peuvent être écrasées pendant le processus de packaging, vous devez donc vérifier régulièrement si les modifications prennent effet.

Méthode 2 : Utiliser le remplacement de style CSS

La deuxième méthode consiste à utiliser le remplacement de style CSS. Cette méthode est plus simple, mais peut présenter certaines limites dans certains cas, comme par exemple que l'emplacement du filigrane est trop complexe.

Nous trouvons d'abord l'élément parent où se trouve le filigrane, puis nous l'écrasons avec des styles CSS. Généralement, l'élément parent où se trouve le filigrane est le conteneur parent.

Si nous voulons éliminer le filigrane ajouté à la page entière, nous pouvons ajouter le style CSS suivant :

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

Parmi eux, background-image est l'encodage base64 du image en filigrane. En ajoutant un style CSS comme celui-ci, nous pouvons éliminer le filigrane sur toute la page.

Si vous souhaitez éliminer le filigrane sur un composant spécifique, vous devez l'ajuster en fonction de la structure DOM du composant et ajouter les styles CSS appropriés. Par exemple, si le filigrane du composant est situé dans un élément conteneur, nous pouvons ajouter le style CSS suivant :

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

où .container est le nom de classe de l'élément conteneur dans le composant.

Conclusion

Voici deux méthodes ci-dessus pour éliminer les filigranes dans Vue. Si vous débutez en programmation, il peut être plus pratique d'utiliser la deuxième méthode, mais cette méthode présente certaines limites. Si vous souhaitez supprimer complètement le filigrane, vous pouvez utiliser la première méthode. Quelle que soit la méthode que vous choisissez, vous devez procéder avec prudence afin de ne pas affecter la stabilité de votre composant ou projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!