vue 生成二维码(完整源码在gitee)

使用说明:

二维码生成工具地址: 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>

本文转载自:http://jvm123.com/2019/08/qr-code-post/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券