vue生成条形码/二维码/带logo二维码

条形码：https://blog.csdn.net/dakache11/article/details/83749410

//安装
cnpm install @xkeshi/vue-barcode

//main.js中引入
import VueBarcode from \'@xkeshi/vue-barcode\'
Vue.component(\'barcode\', VueBarcode)

//vue文件中使用
<!-- 条形码 -->
    <barcode :value="barcode" :options="barcode_option" tag="svg"></barcode>

data () {
    return {
      barcode: \'123\',
      barcode_option: {
        // format: \'CODE128\',
        displayValue: true,
        background: \'transparent\',
        width: \'3px\',
        height: \'150px\',
        fontOptions: \'bold\',
        fontSize: \'32px\'
      }
    }
}

 

二维码：https://www.cnblogs.com/ajuan/p/10100931.html

//安装
cnpm install qrcodejs2 --save

//引入
import QRCode from \'qrcodejs2\'

//使用
<!-- 二维码 -->
    <div id="qrCode" ref="qrCodeDiv"></div>

data () {
    return {
　　   barcode: \'123\',
      qrcode: null
    }
},

mounted () {
    var url = \'codeid=1908217316583140473\'
    var urlSearchParam = new URLSearchParams(url)
    // var urlSearchParam = new URLSearchParams(location.search.slice(1))
    // 条形码
    this.barcode = urlSearchParam.get(\'codeid\')
    // 二维码
    this.$nextTick(function () {
      this.bindQRCode()
    })
},

methods: {
    bindQRCode () {
      this.qrcode = new QRCode(this.$refs.qrCodeDiv, {
        text: this.barcode,
        width: 200,
        height: 200,
        colorDark: \'#333333\',
        colorLight: \'transparent\',
        correctLevel: QRCode.CorrectLevel.L
      })
    }
}

注意 ：生成二维码js必须在 this.$nextTick(function(){调用})或setTimeout(() => { 调用 }, 100)，是为了确保二维码容器DOM已经存在。
附this.$nextTick()方法：https://blog.csdn.net/qq_33207292/article/details/80769256

 

带LOGO：http://www.freesion.com/article/376334542/

//安装
cnpm install vue_qrcodes

//引入
import qrcode from \'vue_qrcodes\'
export default {
  components: { qrcode }
}

//使用
 <!-- 二维码 -->
    <qrcode id="qrCode" :url="barcode" :iconurl="data.icon" :wid="200" :hei="200" :imgwid="53" :imghei="53"></qrcode>

data () {
    return {
      barcode: \'123\',
      data: {
        icon: \'https://cn.vuejs.org/images/logo.png\'
      }
　　}
}