Detailliertes Verständnis der Vue-Methode zum Generieren von QR-Codes mit vue-qr

Der englische Name des „QR-Codes“ lautet „QR Code“. „QR“ ist die Abkürzung für „Quick Response“, was widerspiegelt, dass dieser QR-Code die Eigenschaft des „ultraschnellen Lesens“ hat. „Quick Response Code“ bedeutet „Schneller Antwortcode“.

npm herunterladen

npm installiere vue-qr --save

Download erfolgreich:

Schritt

(1) Einfuhr

Importieren Sie VueQr von „vue-qr“.

(2) vue-qr-Parameter

• text QR-Code, also die Seite, zu der Sie nach dem Scannen des QR-Codes gelangen
• size QR-Code-Größe
• margin Der Rand des QR-Code-Bildes, standardmäßig 20px
• bgSrc eingebettete Hintergrundbildadresse
• logoSrc ist in die LOGO-Adresse in der Mitte des QR-Codes eingebettet
• logoScale Größe des mittleren Bildes
• dotScale Die Größe der Punkte im QR-Code
• colorDark Die Farbe des festen Punktes (Hinweis: nur gültig, wenn zusammen mit colorLight festgelegt)
• colorLight leere Farbe (Hinweis: funktioniert nur, wenn mit colorDark eingestellt)
• Wenn autoColor true ist, wird die Hauptfarbe des Hintergrundbilds als Farbe des Vollpunkts verwendet, also colorDark. Der Standardwert ist true

Beispiel

<Vorlage>
   <div>
      <vue-qr
         :text="Bild-URL"
         :Größe="250"
         :logoSrc="Logo"
         :logoScale="0.2">
      </vue-qr>
   </div>
</Vorlage>
<Skript>
Importieren Sie VueQr von „vue-qr“.
Standard exportieren {
   Name:'', 
   Komponenten: {
      VueQr,
   },
   Daten() {
      zurückkehren {
         imgUrl: 'https://baidu.com',
         Logo: erforderlich('@/assets/tea_128.png'),
      }
   },
   Methoden:{
   },
}
</Skript>

Ergebnis:

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!