Vue ts 移动端项目中绘制 二维码 和 条形码 插件和使用

1 安装库 二维码和条形码 的插件

npm  install qrcode --save  // 二维码
npm install JsBarcode --save // 条形吗

2 引用   

// 参考引用 可自定义
import QRCode from 'qrcode';
let JsBarcode = require('jsbarcode');

3 使用的标签 html  可自定义标签

// 一，条形码 选择dom
1 <van-image class="barcode" id="barcode"></van-image> 
2 <canvas class="barcode" id="barcode" ref="barCode"></canvas>

// 二， 二维码1/2 
    1 <img id="qrcode" :src="qrcodeUrl"/>
    2  <van-image id="qrcode" :src="qrcodeUrl"></van-image>

4 绘制使用方法 可自定义

code = ""; // 需要编译的源码值  api 获取
qrcodeUrl = "";  定义的二维码链接
 // 自定义2 条形吗配置
 settings = {
    format: [String],
      //设置条之间的宽度
      width: {
        type:[String, Number],
        default:"2px"
      },
      height: {
        type:[String, Number],
        default:"36px"
      },
      //覆盖显示的文本
      text: [String, Number],
      //使文字加粗体或变斜体
      fontOptions: [String],
      //设置文本的字体
      font: [String, Number],
      //设置文本的水平对齐方式
      textAlign: [String],
      //设置文本的垂直位置
      textPosition: [String],
      //设置条形码和文本之间的间距
      textMargin: [String, Number],
      //设置文本的大小
      fontSize: {
        type:[String, Number],
        default:"14px"
      },
      //设置条和文本的颜色
      lineColor: [String],

      // .....
    }; 

// 通过计算属性 获取code
get newCode () {
     return this.code;
}

// 调接口api 获取 编码code值
// api-----> get---> code----> 调方法转换一二微码

// 1 二维码url 
     async createCode(code: string | number): Promise<void> {
        try {
            const url = await QRCode.toDataURL(code, { width: 200, height: 200, margin: 0 });
            this.qrcodeUrl = url;
            console.log("url-------", url);
        } catch (error) {
            this.$toast("二维码生成异常");
        }
        // 2 生成条形码
        this.barcode();
    }

// 2 条形码
   barcode(): void {
        // 方法1 条形码编译 
        // newCode 计算属性
        JsBarcode("#barcode", this.newCode, {
            format: "CODE39",
            lineColor: "#000",
            background: "#ffff",
            width: 1, // 自定义条形码的宽
            height: 50, // 自定义高
            displayValue: false
        });

        // 方法2 类名选择 自定义2配置
        JsBarcode(this.$el.querySelector('.barcode'), this.newCode, settings);

    }

// 最好在vue 初始化周期钱调用