条形码插件和二维码插件

条形码生成

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>
相关推荐
qiyi.sky1 分钟前
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)
前端·javascript·vue.js
煸橙干儿~~5 分钟前
分析JS Crash(进程崩溃)
java·前端·javascript
哪 吒7 分钟前
华为OD机试 - 几何平均值最大子数(Python/JS/C/C++ 2024 E卷 200分)
javascript·python·华为od
安冬的码畜日常14 分钟前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
杨荧33 分钟前
【JAVA开源】基于Vue和SpringBoot的洗衣店订单管理系统
java·开发语言·vue.js·spring boot·spring cloud·开源
l1x1n042 分钟前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
Q_w77421 小时前
一个真实可用的登录界面!
javascript·mysql·php·html5·网站登录
昨天;明天。今天。1 小时前
案例-任务清单
前端·javascript·css
一丝晨光1 小时前
C++、Ruby和JavaScript
java·开发语言·javascript·c++·python·c·ruby
Front思1 小时前
vue使用高德地图
javascript·vue.js·ecmascript