与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。
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>
就有了下面的效果:
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 前端生成二维码的资料请关注站长技术其它相关文章!
4月11日20:30~22:00通过腾讯会议进行了第二次在线学习讨论我把学习笔记整理一下...
正则忽略大小写 – RegexOptions.IgnoreCase 例如: 复制代码 代码如下: Str = R...
Elasticsearch 是通过 Lucene 的倒排索引技术实现比关系型数据库更快的过滤。特...
复制代码 代码如下: % URL="http://news.163.com/special/00011K6L/rss_newstop....
工具:Eclipse,Oracle,smartupload.jar;语言:jsp,Java;数据存储:Oracle。...
错误描述: 在开发.net项目中,通过microsoft.ACE.oledb读取excel文件信息时,报...
本文实例讲述了Laravel框架源码解析之反射的使用。分享给大家供大家参考,具体如...
DELETEFROMTablesWHEREIDNOTIN(SELECTMin(ID)FROMTablesGROUPBYName) Min的话保...
项目中用到的一些特殊字符和图标 html代码 XML/HTML Code 复制内容到剪贴板 div ...
上篇文章给大家介绍了 Java正则表达式匹配,替换,查找,切割的方法 ,接下来,...