vue一维码，二维码生成

最新推荐文章于 2025-02-19 11:29:18 发布

鸣拙

最新推荐文章于 2025-02-19 11:29:18 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45939191/article/details/115514150

VUE 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在项目中利用JsBarcode库生成条形码以及使用qrcode库创建二维码。提供了安装依赖、基本用法示例及配置选项，包括条形码和二维码的样式设置。示例代码详细展示了在Vue环境中如何在canvas元素上绘制条形码和二维码。

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

在项目中生成条形码和二维码

一.条形码

Github：https://github.com/lindell/JsBarcode
条码示例：https://codepen.io/lindell/pen/eZKBdO?editors=1010
条码生成器：https://lindell.me/JsBarcode/generator/

安装依赖：

npm install jsbarcode --save

简单案例：

<template>
    <canvas id="barCode"></canvas>
</template>
<script>
import JsBarcode from 'jsbarcode'
export default {
  data () {
    return {
      bindBarCode (selector, data = '1129867908') {
        JsBarcode(selector, data, {
          background: '#eee',
          displayValue: false,
          // width: 1, // 
          height: 80, // 一维码的高度
          margin: 10 // 一维码与容器的margin
        })
      }
    }
  },
  mounted () {
    this.bindBarCode('#barCode')
  }
}
</script>

图示：
在这里插入图片描述

二.二维码

安装依赖：

npm install qrcode -S

简单示例：

<template>
    <canvas id="qrCode"></canvas>
</template>
<script>
import QRCode from 'qrcode'
export default {
  data () {
    return {
      bindQRCode (ele = 'qrCode') {
        QRCode.toCanvas(document.getElementById(ele), '你是猪吗，乱扫什么码', {
        // version: 1,
          errorCorrectionLevel: 'L', // low, medium, quartile, high or L, M, Q, H
          maskPattern: 7, // 0, 1, 2, 3, 4, 5, 6, 7
          margin: 5, // Define how much wide the quiet zone should be
          scale: 4,
          width: 100, // 宽度
          color: {
            light: '#eee', // 背景色
            dark: '#ff0000' // 二维码颜色
          }
        }, (error) => {
          if (error) {
            console.error(error)
          }
          console.log('success!')
        })
      }
    }
  },
  mounted () {
    this.bindBarCode('#barCode')
  }
}
</script>

图示：
在这里插入图片描述