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

最新推荐文章于 2025-02-24 21:06:55 发布

小方一身坦荡

最新推荐文章于 2025-02-24 21:06:55 发布

阅读量442

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/xiaofangzhen/article/details/129204275

版权

VUE 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何在Vue项目中使用vue-qr库来生成二维码，包括npm安装、组件引入、参数设置以及代码示例，展示了如何绑定文本、设置二维码尺寸、添加背景图和LOGO等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

解释：

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

npm下载

npm install vue-qr --save

vue页面中引入

import vueQr from ‘vue-qr’

vue-qr参数

text                  二维码，即扫描二维码后跳转的页面
size                  二维码大小
margin              二维码图像的外边距
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"
          colorLight="#ffffff"
          colorDark="#008000"
         >
      </vue-qr>
   </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
   name:'', 
   components:{
      VueQr,
   },
   data() {
      return {
         imgUrl: 'https://baidu.com',
         logo: require('@/assets/XXX.png'),
      }
   },
   methods:{
   },
}
</script>