条形码插件和二维码插件

最新推荐文章于 2025-05-29 09:41:41 发布

@呵呵

最新推荐文章于 2025-05-29 09:41:41 发布

阅读量590

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_41639609/article/details/136938614

本文介绍了如何在Vue应用中使用Vue-barcode、JsBarcode和vue-qriously这三个库来生成条形码和二维码，讨论了不同的导入方法和注意事项，特别是针对qrcode.js长度限制的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

条形码生成

//第一种方法使用
vue-barcode
import VueBarcode from 'vue-barcode'
 <VueBarcode :value="item.bloodNum" width="2" height="40" format="CODE128" display-value="false"> 样本条码加载失败</VueBarcode>
//第二种方法
JsBarcode

二维码生成

//第一种方法
import QRCode from 'qrcodejs2'
 <div id="qrcode" ref="qrcode"></div>
  qrParams: {id: '', }
 let qrcode = new QRCode(document.getElementById(refName), {
        text: JSON.stringify(this.qrParams),
        title: '',
        width: 200,
        height: 200,
        margin: 0,
        correctLevel: QRCode.CorrectLevel.L
      })
      qrcode._el.title = "";

> **注意 qrcode.js有长度限制才会产生第二种方法**

//第二种方法
 vue-qriously
 
 //main.js
import Vue from 'vue'
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

<template>
  <div>
    <qriously :value="qrcode" :size="200" />
  </div>
</template>
<script>
  export default {
    data() {
        return {
            qrcode: 'www.baidu.com'
         }
     }
  }
</script>