qrcode 相关博客-Java技术分享站

    qrcode qrcode jvm123.com 是一个java技术分享站,内容涉及java、jvm、程序开发,单元测试框架Spock教程,测试视频教程,spring框架教程等, 以及服务器搭建、linux、docker等相关技术。

vue二维码生成工具的使用

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

分类:vue未分类源码项目分享前端笔记
标签:二维码vueqrcode

2019-08-18 00:45:06.0
vue二维码生成工具的使用  qr-code-post