vue 中生成二维码、条形码

在 vue 项目中难免遇到有要生成条形码 或者 二维码的功能需求。

一、生成条形码  

1、下载 npm install jsbarcode --save  

2、在所需组件模块中引入 

 import JsBarcode from 'jsbarcode' 

3、template 中

 <svg id="barcode"></svg>

4、

 barcode(){
        let barCode = "12345678"
        JsBarcode("#barcode", "Hi world!",{
          format: "CODE128",//选择要使用的条形码类型
          text: barCode,    //显示文本
          displayValue: true,//是否在条形码下方显示文字
          textPosition: "bottom"//设置文本的垂直位置
          fontOptions:"bold italic",//使文字加粗体或变斜体
          background:"#eee",//设置条形码的背景
          font:"fantasy",//设置文本的字体
          lineColor:"#2196f3",//设置条和文本的颜色。
          margin:15//设置条形码周围的空白边距
        })
      },

以上步骤就可以生成一个条形码 至于何时调用 barcode 这个方法就看我们自

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值