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

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

原文地址：https://www.cnblogs.com/mobaiyu/p/11392864.html