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的tree组件
Dec 03 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 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
调频问题解答
2021/03/01 无线电
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
vue实现微信分享功能
2018/11/28 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
vue实现评价星星功能
2020/06/30 Javascript
Python栈类实例分析
2015/06/15 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
python实现随机梯度下降法
2020/03/24 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
AUC计算方法与Python实现代码
2020/02/28 Python
什么是python类属性
2020/06/10 Python
Python 实现一个计时器
2020/07/28 Python
is_file和file_exists效率比较
2021/03/14 PHP
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
中软Java笔试题
2012/11/11 面试题
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
2014年机关植树节活动方案
2014/02/27 职场文书
护士求职自荐信范文
2014/03/19 职场文书
车辆委托书范本
2014/10/05 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
趵突泉导游词
2015/02/03 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python