条形码插件和二维码插件

条形码生成

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

二维码生成

javascript 复制代码
//第一种方法
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>
相关推荐
恋猫de小郭6 小时前
Firebase 如何让全球 Android 和 Flutter 开发者集体 Build Fail
android·前端·flutter
墨白曦煜6 小时前
智能体架构范式总结(React、Plan-And-Solve、Reflection)
前端·react.js·前端框架
qq_426003966 小时前
多语言新增语种全量测试策略的测试范围
前端·javascript·python·自动化
frjc6 小时前
Node.js 与 npm 极简安装教程
前端·npm·node.js
IMPYLH6 小时前
HTML 的 <main> 元素
前端·html
深念Y6 小时前
微服务抽取路线图:从胖单体到 ARM 集群
前端·arm开发·数据库·后端·微服务·云原生·架构
阮小贰6 小时前
干支编码的确定性实现:节气切分 + 1000 条溯源断语(附 JS 源码)
开发语言·javascript·ecmascript
雪芽蓝域zzs6 小时前
Vue3 + Vite本地模拟数据(读取 JSON 数据)
前端
亿元程序员6 小时前
还有高手?用Shader让图片中的3D圆环转起来!
前端
灯澜忆梦6 小时前
【基于GO的Web开发14】gin请求重定向
前端·后端·golang·gin