1.下載 qrcode

npm i qrcode

2.在所需組件使用qrcode

<template><div><img :src="qrcode" width="192"></div> </template>> import QRCode from 'qrcode' export default{data(){return{qrcode:''}},mounted(){this.setQRCode('http:xxx.xx')},methods:{// 根據字符串生成二維碼setQRCode(str) {QRCode.toDataURL(str, { width: 192, margin: 1 }).then(res=>{// toDataURL方法返回一個promisethis.qrcode = res;})}} }

接下來就具體看一下qrcode的其他使用方法：

qrcode 指南

---

一、方法

下面方法的參數中 opts 和回調函數 cb 都是可選項，不是必填參數
瀏覽器只支持前四個方法，服務器可以支持以下全部方法

1.create(text, opts)

QRCode.create("str") // 返回結果為對象 // { // modules, // 具有模塊數據的Bitmatrix類 // version, // 版本 // errorCorrectionLevel, // 糾錯級別 // maskPattern, // 計算后的遮罩圖案 // segments // segments // }

2.toCanvas(canvas, text, opts)

<canvas id="canvas"></canvas> var canvas = document.getElementById('canvas')QRCode.toCanvas(canvas, 'str', function (err) {if (err) console.log(err) })

3.toDataURL(text, opts, cb)

//此方法是剛開始例子的nodejs寫法，這里的回調函數參數不同 QRCode.toDataURL("str", (err, res) => {// 注意這里第一個參數是err,第二個參數才是二維碼圖片鏈接this.qrcode = res; });

4.toString(text, opts, cb)

<div v-html="qrcode" style="width:192px"></div> QRCode.toDataURL("str", (err, res) => {// 注意這里的res結果是一個svg圖片this.qrcode = res; });

5.toFile(path, text, opts, cb)

// 這個方法試了沒成功，暫存一下 QRCode.toFile("path/filename.png", "str", err => {if (err) throw err; });

6.toFileStream(stream, text, opts)

7.toBuffer(text, opts, cb)

---

二、配置參數 opts

1.margin

作用: 二維碼線條到整個圖片邊緣的距離，類似前端的padding
類型：Number
默認: 4

2.scale

作用: 比例，比如上面的margin為4px，實際上為16px.
類型：Number
默認: 4

3.width

作用: 生成二維碼圖片的寬度
類型：Number
默認: 116

4.color.dark

作用: 二維碼線條的顏色
類型：String
默認: ‘#000’

5.color.light

作用: 二維碼背景色
類型：String
默認: ‘#fff’

補充：JS生成二維碼點擊這里進行查看此文章

我的個人博客有空來坐坐

http://www.wangyanan.online

總結

以上是生活随笔為你收集整理的vue 动态生成二维码 qrcode的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。