条形码插件和二维码插件

条形码生成

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>
相关推荐
码事漫谈2 小时前
大模型输出的“隐性结构塌缩”问题及对策
前端·后端
这儿有一堆花3 小时前
前端三件套真的落后了吗?揭开现代 Web 开发的底层逻辑
前端·javascript·css·html5
.Cnn3 小时前
JavaScript 前端基础笔记(网页交互核心)
前端·javascript·笔记·交互
醉酒的李白、3 小时前
Vue3 组件通信本质:Props 下发,Emits 回传
前端·javascript·vue.js
anOnion4 小时前
构建无障碍组件之Window Splitter Pattern
前端·html·交互设计
小眼哥4 小时前
SpringBoot整合Vue代码生成exe运行程序以及windows安装包
vue.js·windows·spring boot
NotFound4864 小时前
实战分享Python爬虫,如何实现高效解析 Web of Science 文献数据并导出 CSV
前端·爬虫·python
徐小夕4 小时前
PDF无限制预览!Jit-Viewer V1.5.0开源文档预览神器正式发布
前端·vue.js·github
WangJunXiang64 小时前
Haproxy搭建Web群集
前端
吴声子夜歌5 小时前
Vue.js——自定义指令
前端·vue.js·flutter