第一种,需要先下载包 npm install qrcode
<template>
<div>
<h2>二维码</h2>
<img :src="qrCodeImage" alt="">
</div>
</template>
<script>
import QRCode from 'qrcode'
export default {
data () {
return {
qrCodeImage: ''
}
},
created () {
this.generateQRCode('https://element.eleme.cn/#/')
},
methods: {
async generateQRCode (url) {
const opts = { errorCorrectionLevel: 'H' }
this.qrCodeImage = await QRCode.toDataURL(url, opts)
}
}
}
</script>
<style>
</style>
第二种不需要下载包,只需要改‘data=’后面的地址
<template>
<div>
<h2>二维码</h2>
<img src='https://api.qrserver.com/v1/create-qr-code?data=https://element.eleme.cn/#/'>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style>
</style>