Vue は QR コード スキャン機能を実装します (スタイル付き)

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

    <p class="デコード結果">
      スキャン結果:
      {{ 結果 }}
    </p>
    <!--スキャン結果-->

    <qrcode-stream @decode="onDecode" @init="onInit" style="height: 100vh;">
      <div>
        <div class="qr-scanner">
          <div class="box">
            <div class="line"></div>
            <div class="angle"></div>
          </div>
        </div>
      </div>
    </qrcode-stream>
  </div>
</テンプレート>

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

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

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

  データ（） {
    戻る {
      結果: '', // スキャン結果情報 error: '' // エラーメッセージ }
  },

  メソッド: {
    onDecode(結果) {
      アラート(結果)
      this.result = 結果
    },

    非同期 onInit(promise) {
      試す {
        約束を待つ
      } キャッチ（エラー）{
        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 をサポートしていません'
        }
      }
    }
  }
}
</スクリプト>

<スタイルスコープ>
。エラー {
  フォントの太さ: 太字;
  色: 赤;
}
</スタイル>

<スタイルスコープ>
    /* * {
      マージン: 0;
      パディング: 0;
    }
    体 {
      高さ: 700ピクセル;
      マージン: 0;
    } */

    .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;
      位置: 相対的;
      背景色: #1110;

      /* 背景色: #111; */
    }

    .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-スキャナー .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);
      }
    }
  </スタイル>

 <div class="scan">
    <div id="bcid">
      <div style="height:40%"></div>
      <p class="tip">...読み込み中...</p>
    </div>
    <フッター>
      <button @click="startRecognize">1. コントロールを作成する</button>
      <button @click="startScan">2. スキャンを開始する</button>
      <button @click="cancelScan">3. スキャンを終了する</button>

      <button @click="closeScan">4. コントロールを閉じる</button>
    </フッター>
  </div>
</テンプレート>

<スクリプトタイプ='text/ecmascript-6'>
  スキャン = null とする

  エクスポートデフォルト{
    データ （） {
      戻る {
        コード URL: ''、
      }
    },
    メソッド: {
      // スキャンコントロールを作成する startRecognize () {
        それを = これとする
        if (!window.plus) 戻り値
        スキャン = 新しい plus.barcode.Barcode('bcid')
        scan.onmarked = マーク済み

        関数 onmarked (タイプ、結果、ファイル) {
          スイッチ（タイプ）{
            ケースプラス.バーコード.QR:
              タイプ = 'QR'
              壊す
            ケースプラス.バーコード.EAN13:
              タイプ = 'EAN13'
              壊す
            ケースプラス.バーコード.EAN8:
              タイプ = 'EAN8'
              壊す
            デフォルト：
              タイプ = 'その他' + タイプ
              壊す
          }
          結果 = result.replace(/\n/g, '')
          that.codeUrl = 結果
          アラート(結果)
          スキャンを閉じる()

        }
      },
      // スキャンを開始する startScan () {
        if (!window.plus) 戻り値
        スキャン開始()
      },
      // スキャンを終了する cancelScan () {
        if (!window.plus) 戻り値
        スキャン.キャンセル()
      },
      // バーコード認識コントロールを閉じる closeScan () {
        if (!window.plus) 戻り値
        スキャンを閉じる()
      },
    }
  }
</スクリプト>
<スタイル lang="less">
  .スキャン{
    高さ: 100%;

    #bcid {
      幅: 100%;
      位置: 絶対;
      左: 0;
      右: 0;
      上: 0;
      下部: 3rem;
      テキスト配置: 中央;
      色: #fff;
      背景: #ccc;
    }

    フッター {
      位置: 絶対;
      左: 0;
      下部：1rem;
      高さ: 2rem;
      行の高さ: 2rem;
      zインデックス: 2;
    }
  }
</スタイル>