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+Element实现增删改查的示例源码
Nov 23 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue router 动态路由清除方式
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 empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python 发送邮件方法总结
2020/08/10 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
个人实用的自我评价范文
2013/11/23 职场文书
教师节横幅标语
2014/10/08 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
医院营销工作计划
2015/01/16 职场文书
蓬莱阁导游词
2015/02/04 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
工作自我评价范文
2019/03/21 职场文书