Das Vue-Projekt realisiert das Zeichnen eines Wasserzeichens in einem bestimmten Bereich

„streng verwenden“
 
const Wasserzeichen = {}
 
/**
 *
 * @param {der Inhalt des zu setzenden Wasserzeichens} str
 * @param {Container, in dem das Wasserzeichen gesetzt werden muss} Container
 */
const setWatermark = (str, container) => {
  Konstanten-ID = "1,23452384164,123412415"
 
  wenn (Container === undefiniert) {
    zurückkehren
  }
 
  // Prüfen, ob eines auf der Seite vorhanden ist, wenn ja, löschen, if (document.getElementById(id) !== null) {
    const childelement = document.getElementById(id)
    untergeordnetes Element.übergeordneter Knoten.removeChild(untergeordnetes Element)
  }
 
  var containerWidth = container.offsetWidth // Breite des übergeordneten Containers abrufen var containerHeight = container.offsetHeight // Höhe des übergeordneten Containers abrufen container.style.position = 'relative' // Layout auf relatives Layout einstellen // Canvas-Element erstellen (zuerst ein Hintergrundbild erstellen)
  const kann = Dokument.createElement('Leinwand')
  can.width = 390 // Breite jedes Blocks festlegen can.height = 200 // Höhe const cans = can.getContext('2d') // Leinwand abrufen cans.rotate(-20 * Math.PI / 180) // Gegen den Uhrzeigersinn drehen π/9
  cans.font = '20px Vedana' // Schriftart festlegen cans.fillStyle = 'rgba(200, 200, 200, 0.20)' // Schriftfarbe festlegen cans.textAlign = 'left' // Textausrichtung cans.textBaseline = 'Middle' // Textgrundlinie cans.fillText(str, 0, 4 * can.height / 5) // Text zeichnen // Div-Element erstellen const div = document.createElement('div')
  div.id = id // ID festlegen
  div.style.pointerEvents = 'none' // Alle Ereignisse abbrechen div.style.top = '0px'
  div.style.left = "0px"
  div.style.position = "absolut"
  div.style.zIndex = "100000"
  div.style.width = Containerbreite + 'px'
  div.style.height = Containerhöhe + 'px'
  div.style.background = 'url(' + can.toDataURL('image/png') + ') links oben wiederholen'
  container.appendChild(div) // An Seite anhängen return id
}
 
// Diese Methode kann nur einmal aufgerufen werden watermark.set = (str, container) => {
  let id = setWatermark(str, Container)
  setzeIntervall(() => {
    wenn (document.getElementById(id) === null) {
      id = setWatermark(str, Container)
    }
  }, 500)
  // Auf Änderungen der Seitengröße achten window.onresize = () => {
    setWatermark(str, Container)
  }
}
 
Standardwasserzeichen exportieren

Wasserzeichen aus „@/external/watermark“ importieren

<div ref="directrecordwp" Klasse="Wrapper">

// Seitenwasserzeichen festlegen Watermark.set('College Party and Government Cloud Record Management Platform' + this.name, this.$refs.directrecordwp)