使用说明：
二维码生成工具地址： http://jvm123.com/qr-code/
此工具纯前端生成二维码，可生成一般的文本、网址和邮件地址。
网址二维码在扫描之后，会启动手机浏览器或微信浏览器打开网址；
邮件地址二维码在扫描之后，会启动发邮件的程序。
如果不需要再扫描后自动打开网址，或启动邮箱软件，请使用文本类型生成二维码。
开源源码：
使用了qrcodejs2依赖库，关键源码如下：
完整源码已经在gitee开源，并且采用中国首个开源软件协议： “木兰宽松许可证, 第1版 ”
源码地址： https://gitee.com/yawensilence/vue-qr
<template>
<div id="qr">
<div >
<p>
<label>
二维码类型：
<input type="radio" value="text" v-model="type"> 文本
<input type="radio" value="web" v-model="type"> 网址
<input type="radio" value="mail" v-model="type"> 邮箱
</label>
</p>
<p>
<label>
请输入内容：
<input v-model.trim="str"/>
</label>
</p>
<p>
<label>
二维码边长：
<input v-model.trim="len" value="140" type="range" max="600" min="80"/>
{{len}}px
</label>
</p>
<p style="text-align: right">
<button @click="doit()">确定生成</button>
</p>
</div>
<div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->
</div>
</template>
<script>
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
name : 'qr',
data() {
return {
type: "text",
str: "",
len: 100
}
},
mounted () {
this.type = this.getParam("type");
this.str = this.getParam("str");
this.len = this.getParam("len");
if (this.type === "null") {
this.type = "txt";
}
if (this.str === "null") {
this.str = "这是示例文本";
}
if (this.len === "null") {
this.len = 140;
}
this.qr();
},
methods: {
qr() {
var str = this.str;
if (this.type === "web" && !str.startsWith("http")) {
str="http://" + str;
}
if (this.type === "mail" && !str.startsWith("mailto:")) {
str="mailto:" + str;
}
let qrcode = new QRCode('qrcode', {
width: this.len,
height: this.len,
text: str, // 二维码地址
colorDark : "#000",
colorLight : "#FFF",
})
},
getParam(name){
return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
},
doit() {
window.location.href='index.html?str='+this.str+"&len="+this.len+"&type="+this.type;
}
}
}
</script>