与后端生成二维码相比，前端生成二维码更具有灵活性，下面就介绍两种前端生成二维码的方式，两种方式相比之下，vue-qr比qrcode多了一个再中间添加logo的功能。
方式一：qrcode
- npm
npm install --save qrcodejs2
- import
import QRCode from \'qrcodejs2\'
- 使用
<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
- import
import vueQr from \'vue-qr\'
- 使用
// logoSrc为logo的url地址(使用require的方式)；text为需要转换为二维码的内容
<vue-qr :logoSrc=\"imageUrl\" text=\"xxx\" :size=\"200\"></vue-qr>
<script>
export default {
name: \"qecode\",
data() {
return {
imageUrl: require(\"../assets/logo.png\"),
}
},
components: {
vueQr
},
},
}
</script>
以上就是Vue——前端生成二维码的示例的详细内容，更多关于vue 前端生成二维码的资料请关注自学编程网其它相关文章！
