Vue はロゴ付きの QR コードを生成します

Vue はロゴ付きの QR コードを生成します

vue_qrcodes をインストールする

npm install --save vue_qrcodes

vue_qrcode を使用する

ページのインポート

import qrcodes from "vue_qrcodes"
export default {
  components: { qrcodes },
  data() {
    return {
      codeLogo: require("@/projects/wisdomcommunity/assets/images/wisdomcommunity/menjin/code-logo.png"),
      qrCodeText: '123456',
      codeSize: '',
      logoSize: '',
    }
  },
  created () {
    this.codeSize = document.documentElement.clientWidth * (200 / 375)
    this.logoSize = document.documentElement.clientWidth * (32 / 375)
  },
}

ページタブ

<qrcodes 
  :url="qrCodeText" 
  :iconurl="codeLogo" 
  :wid="codeSize" 
  :hei="codeSize" 
  :imgwid="logoSize" 
  :imghei="logoSize" 
/>

パラメータの説明

財産	説明	タイプ	受け入れられる値	デフォルト
URL	Qrcode 二次元コード入力内容の値	弦	-	www.baidu.com
アイコンURL	Qrコードの画像 QRコードの真ん中にある小さな絵のアドレス	弦	-	https://cn.vuejs.org/images/logo.png
幅	QRコード幅 QRコード幅	番号	-	70
おい	QRコードの高さ QRコードの高さ	番号	-	70
色濃い	QRコードの色 QRコードの色	弦	-	#000000
色光	QRコードの背景 QRコードの背景色	弦	-	#ffffff
imgwid	Qrcode 画像の幅 QR コードの中央にある小さな画像の幅	番号	-	30
イムヘイ	Qrcode 画像の高さ QR コードの中央にある小さな画像の高さ	番号	-	30

リソース

vue_qrcodes - qrcode.js QR コード パッケージに基づく npm vue コンポーネント。最新バージョン: 1.1.3、最終公開日: 3 年前。`npm i vue_qrcodes` を実行して、プロジェクトで vue_qrcodes の使用を開始します。npm には他に 4 つのプロジェクトがありますvue_qrcodes を使用したレジストリhttps://www.npmjs.com/package/vue_qrcodes

GitHub - Song776158074/vue-qrcode: qrcode.js 二次元コード パッケージに基づく Vue コンポーネント. GitHub でアカウントを作成して、song776158074/vue-qrcode の開発に貢献してください。https:// github.com/song776158074/vue-qrcode