Vue——前端生成二维码
 
与后端生成二维码相比，前端生成二维码更具有灵活性，下面就介绍两种前端生成二维码的方式，两种方式相比之下，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>
 
样式（这里再提供一个给二维码添加边框的小技巧：如下图所示，我们生成的二维码是没有边框的，看起来不是很好看）
 
.qrcode{
    display: inline-block;
    img {
        width: 132px;
        height: 132px;
        background-color: #fff; //设置白色背景色
        padding: 6px; // 利用padding的特性，挤出白边
        box-sizing: border-box;
    }
}
 
 
就有了下面的效果：
 
 
方式二：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
        },
    },
}
 　　

利用Vue生成二维码
 
 
 
Author：kak
 
 
         vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；
 
1、qrcode
 
npm ``install` `--save qrcodejs2
//所需页面导入
import QRCode from 'qrcodejs2'
 
<div class="qrcode" ref="qrCodeUrl"></div>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  methods: {
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
},
mounted() {
    this.creatQrCode();
},
};
</script>
 
 
2、vue-qr
 
 
 
可以增加icon
 
 
npm install vue-qr --save
import vueQr from 'vue-qr'
 
 
<vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
 
<script>
    export default {
        name: "qecode",
        data() {
            return {
                imageUrl: require("../img/logo.png"),//icon路径
            }
        },
        components: {
            vueQr
        },
    },
}
</script>
 
 
完整代码
 
<template>
  <div>
    <div class="qrcode" ref="qrCodeUrl"></div>
    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import vueQr from "vue-qr";
export default {
  data() {
    return {
      imageUrl: require("./sw.jpg"),
    };
  },
  components: {
    vueQr,
  },
  methods: {
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: "https://blog.csdn.net/weixin_42601136", // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  },
  mounted() {
    this.creatQrCode();
  },
};
</script>


<style scoped>
.qrcode {
  display: inline-block;
  width: 132px;
  height: 132px;
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
}
</style>

 
 
本文主要介绍vue生成二维码
 
 
一、qrcode
 
1.1效果图
 
 
npm install --save qrcodejs2
 
1.2关键代码
 
<template>
	<div class="qrcode" ref="qrCodeUrl"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  name: "Index",
  data() {
    return {}
  },
  	mounted() {
	    this.creatQrCode();
	},
	methods: {
	    creatQrCode() {
	        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
	            text: '2021', // 需要转换为二维码的内容
	            width: 100,
	            height: 100,
	            colorDark: '#000000',
	            colorLight: '#ffffff',
	            correctLevel: QRCode.CorrectLevel.H
	        })
	    },
	},

}
</script>
 
1.3样式
 
<style scoped>
.qrcode{
    display: inline-block;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    padding: 6px;
    box-sizing: border-box;
    margin: 6px;
}
</style>
 
二、vue-qr
 
 
 
vue-qr比qrcode多了一个再中间添加logo的功能
 
 
2.1效果图
 
 
npm install vue-qr --save
 
2.2关键代码
 
<template>
	<vue-qr :logoSrc="imageUrl" text="qrText" :size="200"></vue-qr>
</template>
<script>
import vueQr from 'vue-qr
export default {
  name: "Index",
  data() {
    return {
      imageUrl: require("../assets/logo.png"),
      qrText:"1314520",
    }
  },
  components: {
      vueQr
  },
}
</script>

首先安装一下面这个插件
 
 cnpm install vue-qr -S
 
接下来在需要生产并下载二维码的页面引入
 
import VueQr from 'vue-qr'
 
并在components中注册为组件
 
components: {
    VueQr // 二维码组件
},
data() {
	return {
	        config: { // 二维码配置
                logo: '',
                value: ''
            }
	}
},
methods: {
	// 点击触发下载二维码
	downQRImg (data, type) {
	    this.config = {
	        logo: '二维码中心logo',
	        value: '二维码内容'
	    }
	    let timer = setInterval(() => {	// 做一个定时器防止二维码未生成时候就下载而获取不到二维码地址
	        if (this.$refs.Qrcode.$el.src) {
	            const iconUrl = this.$refs.Qrcode.$el.src	// 二维码地址
	            let a = document.createElement('a')
	            let event = new MouseEvent('click')
	            a.download = data.TenantName	// 二维码名称
	            a.href = iconUrl
	            a.dispatchEvent(event)
	            clearInterval(timer)
	            this.$message.success('二维码已下载')
	            this.config = {
	                logo: '',
	                value: ''
	            }
	        }
	    }, 100)
	},
}
 
在html代码里面加入以下代码
 
<vue-qr
    id="qrcodeimg"
    ref="Qrcode"
    style="display:none"
    :logo-src="config.logo"
    :text="config.value"
    :size="200"
    :margin="0"
/>