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

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

ヒント

このプラグインは https プロトコルでのみアクセスできます。http プロトコルはうまく機能しません。vue3 はエラーが発生しやすいため、vue2 を使用することをお勧めします。 ! ! ! !

説明する

vueでコードスキャン機能を実現する

参考ドキュメント: vue-qrcode-reader 公式サイトへ移動 –> 公式ドキュメント

エフェクト表示

ここに画像の説明を挿入

実装手順:

ステップ1(プラグインをインストールする)

npm インストール --save vue-qrcode-reader

ステップ 2 (コンポーネントの作成)

複数ページで使用される可能性があるため、コンポーネント化します(1)srcの下のcomponentsにqrcode.vueを作成します
(2)コードの実装

// 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);
  }
}
</スタイル>

(3)スキャンコードが必要なページで紹介

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

(4)コンポーネントの登録

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

(5)コンポーネントの使用

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

Vue の QR コードスキャン機能に関するこの記事はこれで終わりです。Vue の QR コードスキャンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue は QR コード スキャン機能を実装します (スタイル付き)
  • Vue - QR コードのフロントエンド生成の例
  • VueでQRコードを動的に生成する方法
  • Vue WeChat は QR コードをスキャンしますが、Apple は画像しか保存できません (解決策)
  • Vueのキャンバスを使ってQRコードと画像ポスターの合成を実現する方法
  • vue-qr を使用して Vue の QR コードを生成する方法について深く理解する

<<:  HTML と埋め込み Flash の両方におけるスクロールバーの分析と処理

>>:  MySQL PXC クラスターの構築方法

推薦する

Linux カーネル デバイス ドライバー カーネル デバッグ テクニカル ノート集

/****************** * カーネルデバッグ技術 ****************...

PID を作成できないために MySQL が起動できない問題を解決する方法

問題の説明MySQL 起動エラー メッセージは次のとおりです。 mysqld を起動します (sys...

MySQL トランザクション分析

取引トランザクションはビジネス ロジックの基本単位です。各トランザクションは一連の SQL ステート...

docker pullがリセットされる問題を解決する

この記事では、docker pull がリセットされる問題を解決する方法を紹介し、皆さんと共有します...

html オプション 無効 選択 選択 無効 オプションの例

コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...

MySQL グリーン解凍バージョンのインストールと設定手順

手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....

Vueの最初のレンダリングのプロセス全体についての簡単な説明

目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...

Javascriptのクロージャとアプリケーションの詳細な説明

目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...

HTML ul および li タグを使用して画像を表示するサンプル コード

以下のコードをDreamweaverのコードエリアにコピーすると、プレビュー時に以下の画像が表示され...

CSS の flex と inline-flex の違いの詳細な説明

inline-flex は inline-block と同じです。内部要素用の display:fl...

React Native が「NSArray<id<RCTBridgeModule>>型のパラメータを初期化できません」というエラーを報告する (解決方法)

最近、古い RN プロジェクトを Xcode で実行すると、次のコード エラーが報告されました。 &...

CSSは座席選択効果を実現するためにautoflow属性を使用する

1. 自動フロー属性、要素コンテンツの長さと幅が要素自体の長さと幅を超える場合、スクロールバーが表示...

Vueはテーブルページング機能を実装します

この記事では、テーブルページング機能を実現するためのVueの具体的なコードを例として紹介します。具体...

MySQLの日付と時刻関数の使用の概要

この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...