Vue使用vue-qr生成二维码的方法

2022-03-04 14:17:44 分类：vue 阅读()
Vue使用vue-qr生成二维码的方法很多初学者还不知道？这篇文章主要为大家介绍了Vue使用vue-qr生成二维码的方法，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

    “二维码”的英文是“QR Code”，“QR”是“Quick Response”的缩写，反映出这种二维码具有“超高速识读”的特点。“Quick Response Code”也就是“快速响应码”。


    npm下载

    1
    npm install vue-qr --save

    下载成功：

    在这里插入图片描述


    步骤


    （1）导入

    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


    示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    <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>

    结果：

    哈哈，自己动手操作下就知道啦


    郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

    标签：

    相关文章阅读

  • 【干货】Vue2.x 组件通信方式详解，这篇讲全了
  • Vue项目的网络请求代理到封装详细步骤
  • React和Vue怎么实现文件下载进度条
  • Vue的生命周期
  • vue3获取DOM节点的3种方式实例
  • vue+elementUI下拉框自定义颜色选择器方式
  • vue数据监听器watch和watchEffect的使用
  • vue首屏加载慢优化方案,vue页面加载慢,vue终极性能优化方案(解决首页加载慢问题)
  • vue项目配置多个请求域名,
  • vue项目配置多个请求域名,,vue项目如何让局域网ip访问配置设置
  • Vue项目启动,nodejs启动vue项目,如何启动一个Vue.js项目
  • vue项目proxy代理不起作用,vue3 proxy代理
  • vue项目proxy代理不起作用,vue3 proxy代理,Vue中如何实现proxy代理
  • Vue页面刷新,vue动态刷新页面
  • Vue页面刷新,vue动态刷新页面,vue中实现页面刷新以及局部刷新的方法
    • 留言与评论（共有 条评论）
       
    验证码：