vue一维码，二维码生成

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

NovRed

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

阅读量754

点赞数 9

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_45388942/article/details/135548107

版权

一.条形码
安装依赖：

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 --save qrcode

案例

<template>
	<div>
    	<img :src="QRImgUrl" />
    </div>
</template>

<script>
import QRCode from 'qrcode'
export default {
  data() {
    return {
    	QRImgUrl: '',
    	QRlink:'www.xxx.com'
    }
  },
  created() {
    this.getQRcode('888')
  },
  methods: {
  	getQRcode(v){
  		QRCode.toDataURL(v, { errorCorrectionLevel: 'L', margin: 2, width: 128 }, (err, url) => {
          if (err) throw err
          this.QRImgUrl= url
        })
  	}
  }
}
</script>

</script>