qrcode を使用して vue で QR コードを生成する

qrcode プラグインをダウンロードする

 npm install qrcodejs2 --save

単一ファイルのインポートと使用

import QRCode from ‘qrcodejs2’

使用

<template>
    <div style="margin-left:200px">
        <div>
            <button @click="getapp">生成二维码</button>
        </div>
        <div id="qrcode"></div>
    </div>
</template>


<script>
import QRCode from 'qrcodejs2'
export default {
    name: "Login",
    data() {
        return {

        };
    },
    methods: {
        getapp(){
            // new QRCode(document.getElementById('qrcode'), 'your content');
            var qrcode = new QRCode('qrcode', {
                text: 'https:/xxx.xxx.xxx/code.html?uid=111&updateCodeNumber=111',
                width: 100,
                height: 100,
                colorDark : '#000000',
                colorLight : '#ffffff',
                correctLevel : QRCode.CorrectLevel.H
            });
        }
    },
};
</script>

ドキュメンテーション: QRCode.js QR コードの生成 - フロントエンド開発ウェアハウス

new QRCode(element, option)

パラメータ 説明

名前	デフォルト	例証する
エレメント		QRコードまたは要素のIDを表示する要素
オプション		パラメータ構成

オプション パラメータの説明

名前	デフォルト	例証する
幅	256	画像幅
身長	256	画像の高さ
タイプ番号	4
色ダーク	「#000000」	前景色
色ライト	「#ffffff」	背景色
正しいレベル	QRCode.CorrectLevel.L	フォールト トレランス レベル。次のように設定できます。 QRCode.CorrectLevel.L (最大 7% のエラーを修正できます) QRCode.CorrectLevel.M (最大 15% のエラーを修正可能) QRCode.CorrectLevel.Q (最大 25% のエラーを修正できます)

API インターフェイス

名前	例証する
makeCode(テキスト)	QRコードの内容を設定
クリア（）	QRコードをクリア（Canvas非対応ブラウザのみ有効）