vue 二维码

第一种方法：

1，安装QRcode并且在要使用的页面引入

cnpm install qrcode

// 引入qrcode
import QRCode from 'qrcode'

2，通过input的内容实现二维码
具体代码如下：

<template>
    <div class="hello">
        // 用于输入内容的input
        <input v-model="message">
        // 将获取到的信息画到画布上
        <canvas id="msg"></canvas>
    </div>
</template>

<script>
    // 引入qrcode
    import QRCode from 'qrcode'
    export default{
      data(){
          return {
              message:'',
          }
      },
      watch:{
          // 通过监听获取数据
          message(val){
              // 打印获取到的数据
              console.log(val)
              // 获取页面的canvas
              var msg= document.getElementById('msg')
              // 将获取到的数据（val）画到msg（canvas）上
              QRCode.toCanvas(msg, val, function (error) {
                    console.log(error)
              })
          },
      },
  }
</script>

<style>
    // 由于输入的内容不同，展示的二维码大小页不一样，所以这里限制画布的大小
    #msg{
        width:200px;
        height:200px;
    }
</style>

作者：莫言_df49
链接：https://www.jianshu.com/p/f6e92d255974
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

 

 

方法二：

1.1 引入二维码生成模块

npm install qrcodejs2 --save

1.2 引入使用

import QRCode from 'qrcodejs2';

　备注：在main中设置全局可使用 Vue.prototype.$qrCode = QRCode; ，页面中调用可直接使用 this.$qrCode

1.显示内容(text所指向内容)必须是UTF-8编码格式。

　　2.生成二维码js必须在 this.$nextTick(function(){调用})或setTimeout(() => { 调用 }, 100)，是为了确保二维码容器DOM已经存在。

　　3.为了防止重复生成二维码，使用置空进行控制：document.getElementById("qrcode").innerHTML = "";

 

<template>
  <div id="qrCode" ref="qrCodeDiv"></div>
</template>

<script>
  import QRCode from 'qrcodejs2';
  export default {
    name: "qrCode",
    data() {
      return {}
    },
    mounted: function () {
      this.$nextTick(function () {
        this.bindQRCode();
      })
    },
    methods: {
      bindQRCode: function () {
        new QRCode(this.$refs.qrCodeDiv, {
          text: 'https://www.baidu.com',
          width: 200,
          height: 200,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })
      }
    }
  }
</script>