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

Posted 2022-08-13 mobaiyu

条形码：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/