vue一维码，二维码生成

最新推荐文章于 2024-05-31 13:17:03 发布

吃不胖爹

最新推荐文章于 2024-05-31 13:17:03 发布

阅读量1k

点赞数

分类专栏： js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43894292/article/details/125422871

版权

js 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

一.条形码

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>