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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 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中取得URL的根域名的代码
2011/03/23 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
js创建对象的方式总结
2015/01/10 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python库安装速度过慢解决方案
2020/07/14 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
什么是反射
2012/03/17 面试题
求职信模板
2014/05/23 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
行为规范主题班会
2015/08/13 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
创业计划书之废品回收
2019/09/26 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
Java异常体系非正常停止和分类
2022/06/14 Java/Android