深入了解Vue使用vue-qr生成二维码的方法

更新时间：2021年12月08日 16:22:18 作者：假我和尚

这篇文章主要为大家介绍了Vue使用vue-qr生成二维码的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

npm下载

npm install vue-qr --save

下载成功：

在这里插入图片描述

步骤

（1）导入

import VueQr from 'vue-qr'

（2）vue-qr参数

text 二维码，即扫描二维码后跳转的页面
size 二维码大小
margin 二维码图像的外边距, 默认 20px
bgSrc 嵌入的背景图地址
logoSrc 嵌入至二维码中心的 LOGO 地址
logoScale 中间图的尺寸
dotScale 二维码的点的大小
colorDark 实点的颜色（注意：和colorLight一起设置才有效）
colorLight 空白的颜色（注意：和colorDark一起设置才有效）
autoColor 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true

示例

<template>
   <div>
      <vue-qr
         :text="imgUrl"
         :size="250"
         :logoSrc="logo"
         :logoScale="0.2">
      </vue-qr>
   </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
   name:'', 
   components:{
      VueQr,
   },
   data() {
      return {
         imgUrl: 'https://baidu.com',
         logo: require('@/assets/tea_128.png'),
      }
   },
   methods:{
   },
}
</script>

结果：

在这里插入图片描述

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

VUE实现日历组件功能
本篇文章主要介绍了VUE实现日历组件功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
详解vue2.0 资源文件assets和static的区别
这篇文章主要介绍了详解vue2.0 资源文件assets和static的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
Vue DPlayer详细使用教程含遇到坑
Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件,本文给大家介绍Vue DPlayer详细使用,本文将从四个方面对Vue-DPlayer进行详细的阐述,感兴趣的朋友一起看看吧
2023-10-10
轻量级富文本编辑器wangEditor结合vue使用方法示例
在我们项目中，有些时候需要使用富文本编辑器。本文将以百度开发的Ueditor结合Vue.js介绍一下。非常具有实用价值，需要的朋友可以参考下
2018-10-10
vue3中vue-meta的使用方法解析
这篇文章主要介绍了vue3中vue-meta的使用方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
在vue中使用 jquery 的两种方法小结
这篇文章主要介绍了在vue中使用 jquery 的两种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue-cli history模式实现tomcat部署报404的解决方式
这篇文章主要介绍了vue-cli history模式实现tomcat部署报404的解决方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
vue-cli创建vue项目的详细步骤记录
vue.cli是vue中的项目构造工具,是一个npm包,需要安装node.js和 git才能用,下面这篇文章主要给大家介绍了关于利用vue-cli创建vue项目的详细步骤,需要的朋友可以参考下
2022-06-06
VUE Element修改el-input和el-select长度的具体步骤
这篇文章主要给大家介绍了关于VUE Element修改el-input和el-select长度的具体步骤,文中通过代码介绍的非常详细,对大家学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-12-12
Vue引用vee-validate插件表单验证问题(cdn方式引用)
这篇文章主要介绍了Vue引用vee-validate插件表单验证问题(cdn方式引用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12