vue生成二维码：vue-qr二维码插件使用

2024-01-23 10:14:16

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方法返回一个promise
        this.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`

margin

作用: 二维码线条到整个图片边缘的距离，类似前端的padding
类型：Number
默认: 4

scale

作用: 比例，比如上面的margin为4px，实际上为16px.
类型：Number
默认: 4

width

作用: 生成二维码图片的宽度
类型：Number
默认: 116

color.dark

作用: 二维码线条的颜色
类型：String
默认: ‘#000‘

color.light

作用: 二维码背景色
类型：String
默认: ‘#fff‘