美文网首页
vue2生成条形码(jsbarcode)或二维码(qrcodej

vue2生成条形码(jsbarcode)或二维码(qrcodej

作者: 月下小酌_dbd5 | 来源:发表于2022-08-16 14:44 被阅读0次

生成条形码 (jsbarcode)

  1. 安装包
npm i jsbarcode --save
  1. 使用
<div class="barcode-box">
     <img id="barcode" />
 </div>
<script>
import JsBarcode from 'jsbarcode'
export default {
  data() {
    return {
  },
  created () {
    // 生成条形码
    this.$nextTick(() => {
      // 待生成条码的内容
      JsBarcode('#barcode', '123')
    })
  },
};
</script>

生成二维码(qrcodejs2 )

  1. 安装包
npm i qrcodejs2 --save
  1. 使用
<div class="qrcode" ref="qrCodeUrl"></div>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  methods: {
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: '123456', // 待生成为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
},
mounted() {
    this.creatQrCode();
},
};
</script>

相关文章

网友评论

      本文标题:vue2生成条形码(jsbarcode)或二维码(qrcodej

      本文链接:https://www.haomeiwen.com/subject/kdorgrtx.html