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'
      }
　　}
}