与后端生成二维码相比，前端生成二维码更具有灵活性，下面就介绍两种前端生成二维码的方式，两种方式相比之下，vue-qr比qrcode多了一个再中间添加logo的功能。
方式一：qrcode
npm install --save qrcodejs2
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 install vue-qr --save
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 前端生成二维码的资料请关注其它相关文章！
最新文章
热门文章
猜你喜欢
