vue项目生成二维码功能使用QRCode

说明

在vue项目中我要根据后端返回的活动链接地址生成二维码图，然后绘制到分享图中展示给用户，然后用户长按图片将保存到本地（浏览器自带的功能）。使用到了下面的这个生成二维码的插件。

查看具体项目任务博客

安装第三方插件

Inside your project folder do:

npm install --save qrcode

全局安装

npm install -g qrcode

使用

import QRCode from 'qrcode'

    /**
     * 生成'我陪你'页面地址的二维码
     */
    generateQrcode (url,width,height) {
      let that = this;
      // With promises
      QRCode.toDataURL(url, function (err, base64) {
        let image = new Image();
        image.width = width||200;
        image.height = height||200;
        image.src = base64;
        that.qrcodeImgDom = image;
      })
    },

toDataURL(text, [options], [cb(error, url)])

返回包含QR代码图像表示的数据URI。
目前仅适用于image/png类型。

text

类型： String|Array

要编码的文本或描述段的对象列表。

options

请参阅其他设置的选项。

cb

类型： Function
完成后调用回调函数。

查看插件文档

其他插件

第一步下载插件

需要注意，这里下载的是qrcodejs2

cnpm install --save qrcodejs2

第二步，在组件中使用

<template>
  <div>
    <div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
  name : 'test',
  mounted () {
    this.qrcode();
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode('qrcode', {
        width: 132,  
        height: 132,
        text: 'https://www.baidu.com', // 二维码地址
        colorDark : "#000",
        colorLight : "#fff",
      })
    },
  }
}
</script>

这里分享一个小技巧，通过qrcode生成的二维码本身是没有白边的，这样的二维码并不好看。
如果想像这样生成一个有白边的二维码,只需要通过css样式即可实现↓

<style lang='less'>
 #qrcode {
    display: inline-block;
    img {
      width: 132px;
      height: 132px;
      background-color: #fff; //设置白色背景色
      padding: 6px; // 利用padding的特性，挤出白边
    }
  }
</style>

至此，vue中使用qrcode就完工了

查看原文

说明