Implementierung der QR-Code-Scanfunktion über Vue

// qrcode.vue
<Vorlage>
  <div>
      <!-- <p class="error">{{ Fehler }}</p> -->
      <!--Fehlermeldung-->

      <!-- <p Klasse="Dekodierergebnis">
          Scan-Ergebnisse:
          {{ Ergebnis }}
      </p> -->
      <!--Scan-Ergebnisse-->
      <!-- <p @click="openCamera">Kamera öffnen</p>
      <div v-show="anzeigen" class="KameraNachricht">
          <p @click="closeCamera">Kamera schließen</p>
          <p @click="openFlash">Öffne die Taschenlampe</p>
          <p @click="switchCamera">Kameraumkehr</p>
      </div> -->

      <Qrcode-Stream
          v-show="QR-Code"
          :Kamera="Kamera"
          :Fackel="FackelAktiv"
          @decode="beimDecoden"
          @init="beiInit"
      >
          <div>
              <div Klasse="QR-Scanner">
                  <div Klasse="Box">
                      <div Klasse="Zeile"></div>
                      <div Klasse="Winkel"></div>
                  </div>
                  <div Klasse="txt">
                      Geben Sie den QR-Code/Barcode in das Feld ein, um <div class="myQrcode">Mein QR-Code</div> automatisch zu scannen.
                  </div>
              </div>
          </div>
      </qrcode-stream>
  </div>
</Vorlage>

<Skript>
// Laden Sie das Plugin herunter // cnpm install --save vue-qrcode-reader

// Importieren importiere { QrcodeStream } von „vue-qrcode-reader“;

Standard exportieren {
  //Komponenten registrieren: { QrcodeStream },

  Daten() {
      zurückkehren {
          result: '', // Fehler bei den Scan-Ergebnisinformationen: '', // Fehlermeldung // anzeigen: false,
          // QR-Code: falsch,
          qrcode: wahr,
          torchActive: falsch,
          Kamera: 'vorne',
      };
  },

  Methoden: {
      onDecode(Ergebnis) {
          console.log(Ergebnis);
          dieses.Ergebnis = Ergebnis;
      },
      asynchron beiInit(Versprechen) {
          const { Fähigkeiten } = warte auf Versprechen;

          const TORCH_IS_SUPPORTED = !!Funktionen.torch;
          versuchen {
              auf ein Versprechen warten;
          } Fehler abfangen {
              if (error.name === 'Nicht zulässiger Fehler') {
                  this.error = „FEHLER: Sie müssen den Kamerazugriff gewähren“;
              } sonst wenn (Fehler.name === 'Nicht gefundener Fehler') {
                  this.error = „FEHLER: Auf diesem Gerät ist keine Kamera vorhanden“;
              } sonst wenn (Fehler.name === 'Nicht unterstützter Fehler') {
                  this.error = „FEHLER: Sicherheitskontext erforderlich (HTTPS, localhost)“;
              } sonst wenn (Fehler.name === 'Nicht lesbarer Fehler') {
                  this.error = 'FEHLER: Die Kamera ist belegt';
              } sonst wenn (Fehler.name === 'ÜberbeanspruchterFehler') {
                  this.error = „FEHLER: Die Kamerainstallation ist ungeeignet“;
              } sonst wenn (Fehler.name === 'StreamApiNotSupportedError') {
                  this.error = „FEHLER: Dieser Browser unterstützt die Stream-API nicht“;
              }
          }
      },
      // Öffne die Kamera // openCamera() {
      // diese.Kamera = "hinten"
      // dies.qrcode = true
      // dies.show = true
      // },
      // Kamera schließen // closeCamera() {
      // diese.Kamera = "aus"
      // dieser.qrcode = false
      // diese.show = false
      // },
      // Taschenlampe einschalten // openFlash() {
      // Schalter (this.torchActive) {
      // Fall wahr:
      // this.torchActive = false
      // brechen
      // Fall falsch:
      // this.torchActive = true
      // brechen
      // }
      // },
      // Kamera umkehren // switchCamera() {
      // // konsole.log(diese.kamera);
      // schalte (diese.Kamera) {
      // Fall 'vorne':
      // diese.Kamera = "hinten"
      // konsole.log(diese.Kamera)
      // brechen
      // Fall 'hinten':
      // diese.Kamera = "vorne"
      // konsole.log(diese.Kamera)
      // brechen
      // }
      // }
  },
};
</Skript>
<Stilbereich>
.Fehler {
  Schriftstärke: fett;
  Farbe: rot;
}
.cameraMessage {
  Breite: 100 %;
  Höhe: 60px;
}
.qr-scanner {
  Hintergrundbild: linearer Farbverlauf(
          0 Grad,
          transparent 24%,
          rgba(32, 255, 77, 0.1) 25%,
          rgba(32, 255, 77, 0.1) 26%,
          transparent 27%,
          transparent 74%,
          rgba(32, 255, 77, 0.1) 75%,
          rgba(32, 255, 77, 0,1) 76%,
          transparent 77%,
          transparent
      ),
      linearer Gradient(
          90 Grad,
          transparent 24%,
          rgba(32, 255, 77, 0.1) 25%,
          rgba(32, 255, 77, 0.1) 26%,
          transparent 27%,
          transparent 74%,
          rgba(32, 255, 77, 0.1) 75%,
          rgba(32, 255, 77, 0,1) 76%,
          transparent 77%,
          transparent
      );
  Hintergrundgröße: 3rem 3rem;
  Hintergrundposition: -1rem -1rem;
  Breite: 100 %;
  /* Höhe: 100 %; */
  Höhe: 100vh;
  /* Höhe: 288px; */
  Position: relativ;
  Hintergrundfarbe: #1110;

  /* Hintergrundfarbe: #111; */
}
/* .qrcode-stream-wrapper {
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Rand oben: 82px;
  klar: beides;
} */
/* .qrcode-stream-wrapper >>> .qrcode-stream-camera {
  Breite: 213px;
  Höhe: 210px;
  klar: beides;
  Rand oben: 39px;
} */
.qr-scanner .box {
  Breite: 213px;
  Höhe: 213px;
  Position: absolut;
  links: 50%;
  oben: 50 %;
  transformieren: übersetzen(-50 %, -50 %);
  Überlauf: versteckt;
  Rand: 0,1rem durchgezogen rgba(0, 255, 51, 0,2);
  /* Hintergrund: URL('http://resource.beige.world/imgs/gongconghao.png') keine Wiederholung Mitte Mitte; */
}
.qr-scanner .txt {
  Breite: 100 %;
  Höhe: 35px;
  Zeilenhöhe: 35px;
  Schriftgröße: 14px;
  Textausrichtung: zentriert;
  /* Farbe: #f9f9f9; */
  Rand: 0 automatisch;
  Position: absolut;
  oben: 70 %;
  links: 0;
}
.qr-scanner .myQrcode {
  Textausrichtung: zentriert;
  Farbe: #00ae10;
}
.qr-scanner .line {
  Höhe: berechnet (100 % – 2 Pixel);
  Breite: 100 %;
  Hintergrund: linearer Farbverlauf (180 Grad, RGBA (0, 255, 51, 0) 43 %, #00ff33 211 %);
  Rahmen unten: 3px durchgezogen #00ff33;
  transformieren: verschiebeY(-100%);
  Animation: Radarstrahl, 2 s, unendlich, abwechselnd;
  Animations-Timing-Funktion: kubische Bézierkurve (0,53, 0, 0,43, 0,99);
  Animationsverzögerung: 1,4 s;
}

.qr-scanner .box:nach,
.qr-scanner .box:vorher,
.qr-scanner .angle:nach,
.qr-scanner .angle:vor {
  Inhalt: '';
  Anzeige: Block;
  Position: absolut;
  Breite: 3vw;
  Höhe: 3vw;

  Rand: 0,2rem durchgehend transparent;
}

.qr-scanner .box:nach,
.qr-scanner .box:vor {
  oben: 0;
  Rahmenfarbe oben: #00ff33;
}

.qr-scanner .angle:nach,
.qr-scanner .angle:vor {
  unten: 0;
  Farbe des unteren Rahmens: #00ff33;
}

.qr-scanner .box:vorher,
.qr-scanner .angle:vor {
  links: 0;
  Rahmenfarbe links: #00ff33;
}

.qr-scanner .box:nach,
.qr-scanner .angle:nach {
  rechts: 0;
  Rahmenfarbe rechts: #00ff33;
}

@keyframes Radarstrahl {
  0% {
      transformieren: verschiebeY(-100%);
  }

  100 % {
      transformieren: übersetzenY(0);
  }
}
</Stil>

// 
QR-Code aus „@/components/qrcode.vue“ importieren;

// 
Komponenten:
        'vue-qrcode': QR-Code,
    },

// Rendern, wo der QR-Code angezeigt werden soll <vue-qrcode />
//Wenn das oben genannte nicht funktioniert, können Sie Folgendes verwenden: <vue-qrcode></vue-qrcode>