Vue を通じて QR コードスキャン機能を実装する

// qrcode.vue
<テンプレート>
  <div>
      <!-- <p class="error">{{ エラー }}</p> -->
      <!--エラーメッセージ-->

      <!-- <p class="decode-result">
          スキャン結果:
          {{ 結果 }}
      </p> -->
      <!--スキャン結果-->
      <!-- <p @click="openCamera">カメラを開く</p>
      <div v-show="表示" class="カメラメッセージ">
          <p @click="closeCamera">カメラを閉じる</p>
          <p @click="openFlash">懐中電灯を開く</p>
          <p @click="switchCamera">カメラ反転</p>
      </div> -->

      <qrコードストリーム
          v-show="qrコード"
          :camera="カメラ"
          :torch="トーチアクティブ"
          @decode="デコード中"
          @init="onInit"
      >
          <div>
              <div class="qr-scanner">
                  <div class="box">
                      <div class="line"></div>
                      <div class="angle"></div>
                  </div>
                  <div class="txt">
                      QR コード/バーコードをボックスに入れると、<div class="myQrcode">My QR code</div> が自動的にスキャンされます。
                  </div>
              </div>
          </div>
      </qrcode-stream>
  </div>
</テンプレート>

<スクリプト>
// プラグインをダウンロード // cnpm install --save vue-qrcode-reader

// インポート import { QrcodeStream } from 'vue-qrcode-reader';

エクスポートデフォルト{
  // コンポーネントを登録: { QrcodeStream },

  データ（） {
      戻る {
          結果: '', // スキャン結果情報 error: '', // エラーメッセージ // 表示: false,
          // QRコード: false,
          QRコード: 真、
          torchActive: false、
          カメラ: '前面'、
      };
  },

  メソッド: {
      onDecode(結果) {
          console.log(結果);
          this.result = 結果;
      },
      非同期 onInit(promise) {
          const { 機能 } = promise を待機します。

          TORCH_IS_SUPPORTED はサポートされています。
          試す {
              約束を待つ;
          } キャッチ（エラー）{
              if (error.name === 'NotAllowedError') {
                  this.error = 'エラー: カメラへのアクセスを許可する必要があります';
              } それ以外の場合 (error.name === 'NotFoundError') {
                  this.error = 'エラー: このデバイスにはカメラがありません';
              } それ以外の場合 (error.name === 'NotSupportedError') {
                  this.error = 'エラー: セキュリティ コンテキストが必要です (HTTPS、localhost)';
              } それ以外の場合 (error.name === 'NotReadableError') {
                  this.error = 'エラー: カメラが使用されています';
              } そうでない場合 (error.name === 'OverconstrainedError') {
                  this.error = 'エラー: カメラのインストールが不適切です';
              } そうでない場合 (error.name === 'StreamApiNotSupportedError') {
                  this.error = 'エラー: このブラウザはストリーム API をサポートしていません';
              }
          }
      },
      // カメラを開く // openCamera() {
      // this.camera = 'リア'
      // this.qrcode = true
      // this.show = true
      // },
      // カメラを閉じる // closeCamera() {
      // this.camera = 'オフ'
      // this.qrcode = false
      // this.show = false
      // },
      // 懐中電灯をオンにする // openFlash() {
      // スイッチ (this.torchActive) {
      // 真のケース:
      // this.torchActive = false
      // 壊す
      // 偽の場合:
      // this.torchActive = true
      // 壊す
      // }
      // },
      // カメラ反転 // switchCamera() {
      // // console.log(this.camera);
      // スイッチ (this.camera) {
      // ケース 'front':
      // this.camera = 'リア'
      // コンソールログ(このカメラ)
      // 壊す
      // ケース '背面':
      // this.camera = 'front'
      // コンソールログ(このカメラ)
      // 壊す
      // }
      // }
  },
};
</スクリプト>
<スタイルスコープ>
。エラー {
  フォントの太さ: 太字;
  色: 赤;
}
.カメラメッセージ{
  幅: 100%;
  高さ: 60px;
}
.qrスキャナー{
  背景画像: 線形グラデーション(
          0度、
          透明 24%、
          RGBA(32, 255, 77, 0.1) 25%,
          RGBA(32, 255, 77, 0.1) 26%,
          透明 27%、
          透明度74%、
          RGBA(32, 255, 77, 0.1) 75%,
          RGBA(32, 255, 77, 0.1) 76%,
          透明度77%、
          透明
      ）、
      線形グラデーション(
          90度、
          透明 24%、
          RGBA(32, 255, 77, 0.1) 25%,
          RGBA(32, 255, 77, 0.1) 26%,
          透明 27%、
          透明度74%、
          RGBA(32, 255, 77, 0.1) 75%,
          RGBA(32, 255, 77, 0.1) 76%,
          透明度77%、
          透明
      );
  背景サイズ: 3rem 3rem;
  背景位置: -1rem -1rem;
  幅: 100%;
  /* 高さ: 100%; */
  高さ：100vh;
  /* 高さ: 288px; */
  位置: 相対的;
  背景色: #1110;

  /* 背景色: #111; */
}
/* .qrcode-stream-wrapper {
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  上マージン: 82px;
  クリア: 両方;
} */
/* .qrcode-stream-wrapper >>> .qrcode-stream-camera {
  幅: 213px;
  高さ: 210px;
  クリア: 両方;
  上マージン: 39px;
} */
.qr-スキャナー .box {
  幅: 213px;
  高さ: 213px;
  位置: 絶対;
  左: 50%;
  上位: 50%;
  変換: translate(-50%, -50%);
  オーバーフロー: 非表示;
  境界線: 0.1rem実線rgba(0, 255, 51, 0.2);
  /* 背景: url('http://resource.beige.world/imgs/gongconghao.png') 繰り返しなし 中央 中央; */
}
.qr-スキャナー .txt {
  幅: 100%;
  高さ: 35px;
  行の高さ: 35px;
  フォントサイズ: 14px;
  テキスト配置: 中央;
  /* 色: #f9f9f9; */
  マージン: 0 自動;
  位置: 絶対;
  上位：70%
  左: 0;
}
.qr-scanner .myQrcode {
  テキスト配置: 中央;
  色: #00ae10;
}
.qr-スキャナー .line {
  高さ: calc(100% - 2px);
  幅: 100%;
  背景: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  下境界線: 3px 実線 #00ff33;
  変換: translateY(-100%);
  アニメーション: レーダービーム 2 秒無限交互;
  アニメーションタイミング関数: 立方ベジェ(0.53, 0, 0.43, 0.99);
  アニメーション遅延: 1.4秒;
}

.qr-scanner .box:after、
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  コンテンツ： '';
  表示: ブロック;
  位置: 絶対;
  幅: 3vw;
  高さ: 3vw;

  境界線: 0.2rem 透明実線;
}

.qr-scanner .box:after、
.qr-スキャナー .box:before {
  上: 0;
  上の境界線の色: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  下部: 0;
  境界線下部の色: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  左: 0;
  左境界線の色: #00ff33;
}

.qr-scanner .box:after、
.qr-scanner .angle:after {
  右: 0;
  右境界線の色: #00ff33;
}

@keyframes レーダービーム {
  0% {
      変換: translateY(-100%);
  }

  100% {
      変換: translateY(0);
  }
}
</スタイル>

// 
'@/components/qrcode.vue' から qrcode をインポートします。

// 
コンポーネント:
        'vue-qrcode': qrコード、
    },

// QR コードを表示する場所をレンダリングします <vue-qrcode />
//上記が機能しない場合は、次の <vue-qrcode></vue-qrcode> を使用できます。