Vue implementiert QR-Code-Scanfunktion (mit Stil)

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

    <p Klasse="Dekodierungsergebnis">
      Scan-Ergebnisse:
      {{ Ergebnis }}
    </p>
    <!--Scan-Ergebnisse-->

    <qrcode-stream @decode="beimDecoden" @init="beimInit" style="Höhe: 100vh;">
      <div>
        <div Klasse="QR-Scanner">
          <div Klasse="Box">
            <div Klasse="Zeile"></div>
            <div Klasse="Winkel"></div>
          </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: '', // Scan-Ergebnisinformationen error: '' // Fehlermeldung }
  },

  Methoden: {
    onDecode(Ergebnis) {
      Alarm(Ergebnis)
      this.result = Ergebnis
    },

    asynchron beiInit(Versprechen) {
      versuchen {
        warten Versprechen
      } 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 Streaming-API nicht“
        }
      }
    }
  }
}
</Skript>

<Stilbereich>
.Fehler {
  Schriftstärke: fett;
  Farbe: rot;
}
</Stil>

<Stilbereich>
    /* * {
      Rand: 0;
      Polsterung: 0;
    }
    Körper {
      Höhe: 700px;
      Rand: 0;
    } */

    .qr-scanner {
      Hintergrundbild:
        linearer Gradient (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;
      Position: relativ;
      Hintergrundfarbe: #1110;

      /* Hintergrundfarbe: #111; */
    }

    .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 .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>

 <div Klasse="scan">
    <div id="bcid">
      <div Stil="Höhe:40%"></div>
      <p class="tip">...Wird geladen...</p>
    </div>
    <Fußzeile>
      <button @click="startRecognize">1. Erstellen Sie ein Steuerelement</button>
      <button @click="startScan">2. Scannen starten</button>
      <button @click="cancelScan">3. Scan beenden</button>

      <button @click="closeScan">4. Schließen Sie das Steuerelement</button>
    </Fußzeile>
  </div>
</Vorlage>

<Skripttyp = "Text/ecmascript-6">
  let scan = null

  Standard exportieren {
    Daten () {
      zurückkehren {
        Code-URL: '',
      }
    },
    Methoden: {
      //Erstellen Sie ein Scan-Steuerelement startRecognize () {
        lass das = dies
        wenn (!window.plus) return
        scan = neuer plus.barcode.Barcode('bcid')
        scan.onmarked = aktiviert

        Funktion onmarked (Typ, Ergebnis, Datei) {
          Schalter (Typ) {
            Fall plus.Barcode.QR:
              Typ = "QR"
              brechen
            Etui zzgl.Barcode.EAN13:
              Typ = "EAN13"
              brechen
            Etui zzgl.Barcode.EAN8:
              Typ = "EAN8"
              brechen
            Standard:
              Typ = 'Andere' + Typ
              brechen
          }
          Ergebnis = Ergebnis.Ersetzen(/\n/g, '')
          that.codeUrl = Ergebnis
          Alarm(Ergebnis)
          dass.closeScan()

        }
      },
      // Scannen starten startScan () {
        wenn (!window.plus) return
        scannen.starten()
      },
      // Scan schließen cancelScan () {
        wenn (!window.plus) return
        scannen.abbrechen()
      },
      // Schließen Sie die Barcode-Erkennungssteuerung closeScan () {
        wenn (!window.plus) return
        scannen.schließen()
      },
    }
  }
</Skript>
<style lang="less">
  .scan {
    Höhe: 100%;

    #bcid {
      Breite: 100 %;
      Position: absolut;
      links: 0;
      rechts: 0;
      oben: 0;
      unten: 3rem;
      Textausrichtung: zentriert;
      Farbe: #fff;
      Hintergrund: #ccc;
    }

    Fußzeile {
      Position: absolut;
      links: 0;
      unten: 1rem;
      Höhe: 2rem;
      Zeilenhöhe: 2rem;
      Z-Index: 2;
    }
  }
</Stil>