Vue realisiert problemlos Wasserzeicheneffekte

Vorwort:

Verwenden Sie den Wasserzeicheneffekt im Vue-Projekt. Sie können den Container angeben

Effektbild:

1. Geben Sie keinen Container an

2. Geben Sie den Container an

Implementierungsmethode:

1. Erstellen Sie eine neue Konfigurationsdatei watermark.js, die in util oder woanders abgelegt werden kann

let Wasserzeichen = {}
 
let setWatermark = (Text, Quelltext) => {
  let id = Math.random()*10000+'-'+Math.random()*10000+'/'+Math.random()*10000
 
  wenn (document.getElementById(id) !== null) {
    Dokument.Body.RemoveChild(Dokument.GetElementById(Ich würde))
  }
 
  lass kann = dokument.createElement('Leinwand')
  Dosenbreite = 150
  Dosenhöhe = 120
 
  lass Dosen = kann.getContext('2d')
  Dosen.drehen(-20 * Math.PI / 180)
  Dosen.Schriftart = '15px Vedana'
  Dosen.Füllstil = "rgba(0, 0, 0, .5)"
  Dosen.textAlign = "links"
  cans.textBaseline = 'Mitte'
  Dosen.Fülltext(Text, Dosenbreite / 20, Dosenhöhe)
 
  lass water_div = document.createElement('div')
  water_div.id = ID
  water_div.style.pointerEvents = "keine"
  water_div.style.background = 'url(' + can.toDataURL('image/png') + ') links oben wiederholen'
  wenn(Quelltext){
    Wasser_Div.Stil.Breite = "100 %"
    Wasser_Div.Stil.Höhe = "100 %"
    Quelltext.AnhängendesKind(Wasser_div)
  }anders{
    Wasser_div.style.top = "3px"
    Wasser_div.Stil.links = "0px"
    water_div.style.position = "fest"
    wasser_div.style.zIndex = "100000"
    water_div.style.width = document.documentElement.clientWidth + 'px'
    water_div.style.height = document.documentElement.clientHeight + 'px'
    Dokument.Body.AppendChild(Wasser_Div)
  }
 
  Rücksende-ID
}
 
/**
 * Diese Methode kann nur einmal aufgerufen werden * @param:
 * @text == Wasserzeicheninhalt * @sourceBody == wo das Wasserzeichen hinzugefügt wird, wenn nicht übergeben, ist es der Textkörper
 * */
watermark.set = (Text, Quelltext) => {
  let id = setWatermark(Text, Quelltext)
  setzeIntervall(() => {
    wenn (document.getElementById(id) === null) {
      id = setWatermark(Text, Quelltext)
    }
  }, 2000)
  fenster.onresize = () => {
    setzeWasserzeichen(Text, Quelltext)
  }
}
 
Standardwasserzeichen exportieren

2. Globale Konfiguration in main.js

// WasserzeichenWasserzeichen aus „./utils/watermark.js“ importieren
Vue.prototype.$watermark = Wasserzeichen

3. Verwenden Sie ein Vollbild-Wasserzeichen auf der Seite

dies.$watermark.set("Haoxing 2731")

4. Verwenden Sie den angegebenen Container auf der Seite

<el-button @click="addWatermark">Klicken Sie hier, um ein Wasserzeichen hinzuzufügen</el-button>
<div ref="Inhalt" Stil="Breite: 500px;Höhe: 500px;Rahmen: 1px durchgezogen #ccc;">
 Wasserzeichen hinzufügen(){
      dies.$watermark.set("Haoxing 2731",dies.$refs.content)
    }

5. Wenn Sie der Meinung sind, dass der Abstand zwischen den Schriftarten zu groß ist, ändern Sie einfach diese Eigenschaft

Dosenbreite = 150
Dosenhöhe = 120

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Das Vue-Projekt realisiert das Zeichnen eines Wasserzeichens in einem bestimmten Bereich
Beispiel für die Implementierung eines globalen Wasserzeichens in Vue
Vue verwendet benutzerdefinierte Anweisungen, um Wasserzeichen am unteren Seitenrand hinzuzufügen
Vue integriert PDF.js, um eine PDF-Vorschau zu implementieren und Schritte zum Hinzufügen von Wasserzeichen durchzuführen
Vue-Beispielcode mit Klasse zum Erstellen und Löschen eines Wasserzeichens
So verwenden Sie Bilder und Bildwasserzeichen mit versteckten Textinformationen in Vue
Vue implementiert die Seitenwasserzeichenfunktion
Vue implementiert das Hinzufügen eines Wasserzeicheneffekts zur Seite

<<: MySQL-Datenbankgrundlagen: Eine Zusammenfassung der grundlegenden Befehle

>>: Zusammenfassung der 10 gängigen HBase-Betriebs- und Wartungstools