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