Vue verwendet benutzerdefinierte Anweisungen, um Wasserzeichen am unteren Seitenrand hinzuzufügen

<Vorlage>
  <div Klasse="Wasserzeichen" >
      <div v-waterMarker="{text:'Carlo vest - Alle Rechte vorbehalten',textColor:'rgba(180, 180, 180, 0.4)'}">
        <div class="water-marker-item">Testproblem, Testproblem, Testproblem, Testproblem, Testproblem, Testproblem, Testproblem</div>
      </div>
  </div>
</Vorlage>

<Skript>
importiere Wasserzeichen aus '../../directive/test/waterMarker'
Standard exportieren {
  Anweisungen: {
    WasserMarker
  },
  Daten(){
    zurückkehren {
    }
  },
  Methoden:{
  }
}
</Skript>

<style lang="scss">
.Wasserzeichen{
  Höhe: 300px;
  .Wassermarker-Artikel{
    Zeilenhöhe: 300px;
  }
}
</Stil>

Funktion addWaterMarker(str, parentNode, Schriftart, Textfarbe) {
  // Wasserzeichentext, übergeordnetes Element, Schriftart, Textfarbe var can = document.createElement('canvas')
  parentNode.appendChild(kann)
  kann.breite = 200
  Dosenhöhe = 150
  kann.style.display = "keine"
  var Dosen = Dose.getContext('2d')
  Dosen.drehen((-20 * Math.PI) / 180)
  cans.font = Schriftart || '16px Microsoft JhengHei'
  Dosen.Füllstil = Textfarbe || 'rgba(180, 180, 180, 0,3)'
  Dosen.textAlign = "links"
  cans.textBaseline = 'Mitte'
  Dosen.Fülltext(str, Dosenbreite / 10, Dosenhöhe / 2)
  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}

const Wasserzeichen = {
  binden: Funktion (el, Bindung) {
    Wasserzeichen hinzufügen(Bindung.Wert.Text, el, Bindung.Wert.Schriftart, Bindung.Wert.Textfarbe)
  },
}

Standard-Wasserzeichen exportieren