Vue——前端生成二维码的示例


Posted in Vue.js onDecember 19, 2020

与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,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>
  • 样式(这里再提供一个给二维码添加边框的小技巧:如下图所示,我们生成的二维码是没有边框的,看起来不是很好看) 

Vue——前端生成二维码的示例

就有了下面的效果:

Vue——前端生成二维码的示例

方式二: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
        },
    },
}
</script>

以上就是Vue——前端生成二维码的示例的详细内容,更多关于vue 前端生成二维码的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 #Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 #Vue.js
vue 通过base64实现图片下载功能
Dec 19 #Vue.js
Vue中computed和watch有哪些区别
Dec 19 #Vue.js
Vue与React的区别和优势对比
Dec 18 #Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 #Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 #Vue.js
You might like
PHP session有效期问题
2009/04/26 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
php实现学生管理系统
2020/03/21 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
详解angular应用容器化部署
2018/08/14 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python with语句用法原理详解
2020/07/03 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
计算机系毕业生推荐信
2013/11/06 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2014年财政所工作总结
2014/11/22 职场文书
2014年建筑工作总结
2014/11/26 职场文书
离职感谢信怎么写
2015/01/22 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
Android中View.post和Handler.post的关系
2022/06/05 Java/Android
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL