VUE使用QRcode或者vue-qr生成二维码
Posted zouwangblog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE使用QRcode或者vue-qr生成二维码相关的知识,希望对你有一定的参考价值。
这里介绍两种vue生成二维码的方法
- QRcode
- vue-qr
vue-qr比QRcode功能多在可以在中间加logo
QRcode
npm
npm install qrcodejs2
import
在所需页面导入
import QRCode from ‘qrcodejs2‘
use
<div class="qrcode" ref="qrCodeUrl"></div>
<script>
methods:
creatQrCode()
var qrcode = new QRCode(this.$refs.qrCodeUrl,
text: 'xxxx',
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
)
,
mounted()
this.creatQrCode();
,
</script>
vue-qr
npm
npm install vue-qr --save
use
<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
<script>
import vueQr from 'vue-qr'
export default
name: "qecode",
data()
return
imageUrl: require("../assets/logo.png"),
,
components:
vueQr
,
,
</script>
是不是比qrcode简单的多, 只不过两种生成二维码的样式还是有区别的,各有所爱吧,用哪个都可以
要注意一点,引用的img路径一定要加require
以上是关于VUE使用QRcode或者vue-qr生成二维码的主要内容,如果未能解决你的问题,请参考以下文章
vuepress引入vue-qr组件后build报错navigator is not defined问题