Vue (五)

2023-11-12 03:52| 来源: 网络整理| 查看: 265

文章已参与[新人创作礼]活动，一起开启掘金创作之路.

微信公众号：秀基宝。如有问题，请后台留言，反正我也不会听。

如何生成条形码、二维码，我这里就做一种方法来实现，后面我发现了新的再加上来

条形码：jsbarcode插件二维码：jr-qrcode插件一、条形码

1、添加插件

npm install jsbarcode --save 或者：packjson添加 "jsbarcode": "^3.11.0"

2、导包

import JsBarcode from 'jsbarcode'

3、二维码容器：支持三种形式，img/svg/canvas，根据自己的需要三选一即可

4、调用构造函数，生成条形码。构造函数的使用也有两种形式，这里只介绍简单的使用，更详细的使用请参考：npm jsbarcode

// barcode是方法，receiptOrder我这里是收货单号，可以生成不一样的码 barcode(receiptOrder) { JsBarcode('#barcode', receiptOrder, { height: 70, format: 'CODE128', // 选择要使用的条形码类型 text: 'NO: ' + receiptOrder, displayValue: true, // 是否在条形码下方显示文字 textPosition: 'bottom' // 设置文本的垂直位置 }) }

效果：

二、二维码

1、插件

cnpm install jr-qrcode --save

2、导包

import jrQrcode from "jr-qrcode"

3、容器

4、js代码

let imgBase64 = jrQrcode.getQrBase64(text, options); //options为配置对象，支持以下配置参数： /** @param: text: 要生成二维码的字符，支持中文 @param: options: { padding : 10, // 二维码四边空白（默认为10px） width : 256, // 二维码图片宽度（默认为256px） height : 256, // 二维码图片高度（默认为256px） correctLevel : QRErrorCorrectLevel.H, // 二维码容错level（默认为高） reverse : false, // 反色二维码，二维码颜色为上层容器的背景颜色 background : "#ffffff", // 二维码背景颜色（默认白色） foreground : "#000000" // 二维码颜色（默认黑色） } @return: 生成的二维码Base64 URL */

效果：

本人开发的玩基金小工具

个人博客：名称：纯洁的麦田链接：[http://www.idearyou.cn/] 描述：争取哪一天做上架构师公众号：纯洁的麦田网址：[xiu.idearyou.cn] 谷歌插件搜：秀基宝小程序：秀基宝复制代码复制代码复制代码

后语

如果本文对你哪怕有一丁点帮助，请帮忙点好看。你的好看是我坚持写作的动力。另外，关注免费学习。

【本文地址】

公司简介

联系我们