vue-qr动态生成二维码

简介

功能：用于生成二维码

优点：简单

缺点：不支持ie

官网：https://www.npmjs.com/package/vue-qr

实现效果

安装

// npm
npm install vue-qr --save

// yarn
yarn add vue-qr

导入

注意vue2、vue3 导入方式有点差异

// vue2.x 
import VueQr from 'vue-qr'
// vue3.x 
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

使用

<div class="code"> 
    <vue-qr  
         ref="qrCode"   
         :text="textValue"
         :logoSrc="logoPath"
         :logoScale="40" 
         :size="190" 
         :margin="10"
     />  
</div>

关于图片导入下面会细说

import logoImg from '@/assets/logo.png'
// 先把图片导入存在一个变量里
export default {
    // 注册组件
    components: {vueQr},
    data(){
        return{
            logoPath: logoImg,
            // 或者用require()来导入
            // logoPath: require('@/assets/logo.png'),
            textValue:'https://cn.vuejs.org/'
        }
    }
}

下载二维码

下载二维码这个功能，只需要加一个按钮元素然后绑定一个点击事件

// 事件处理函数
	downloadQR() {
            const a = document.createElement('a')
            // 下载的文件名
            a.download = '二维码'
            // url
            a.href = this.$refs.qrCode.$el.src
            // 触发点击
            a.click()
        },

主要配置项

text	二维码要展示的内容
logoSrc	二维码中间的小logo
logoScale	小logo的大小（别搞太大，超过容错率识别不出来的）
size	整个二维码所占空间的大小，（宽高相等，包含margin） 可能需要你自己用css设置一下图片宽高100%
margin	二维码的外边距（默认 20px）

全部配置项自行去官网查

注意–安装失败

这个问题我也是通过另一个作者的文章来解决的

原文：https://blog.csdn.net/weixin_42717937/article/details/121405199

安装vue-qr这个包的时候可能卡在某个地方无法安装

需要在根目录下新建一个配置文件

用yarn安装就是 .yarnrc

用npm安装就是 .npmrc

多一句嘴：注意文件名是以点 . 开头的

.yarnrc文件内容

registry "https://registry.npm.taobao.org" 

sass_binary_site "https://npm.taobao.org/mirrors/node-sass/" 

phantomjs_cdnurl "http://cnpmjs.org/downloads" 

electron_mirror "https://npm.taobao.org/mirrors/electron/"

sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/" 

profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/" 

chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver" 

canvas_binary_host_mirror "https://npm.taobao.org/mirrors/node-canvas-prebuilt/"

.npmrc文件内容

home="https://npm.taobao.org" 

registry="https://registry.npm.taobao.org/" 

sass_binary_site="https://npm.taobao.org/mirrors/node-sass/" 

phantomjs_cdnurl="http://cnpmjs.org/downloads" 

electron_mirror="https://npm.taobao.org/mirrors/electron/" 

sqlite3_binary_host_mirror="https://foxgis.oss-cn-shanghai.aliyuncs.com/" 

profiler_binary_host_mirror="https://npm.taobao.org/mirrors/node-inspector/" 

chromedriver_cdnurl="https://cdn.npm.taobao.org/dist/chromedriver"

canvas_binary_host_mirror= "https://npm.taobao.org/mirrors/node-canvas-prebuilt/"

通过上面的方法我成功安装上了vue-qr这个包，但是马上就报了一堆错，我猜应该就是上面的文件导致的，然后直接把刚才创建的文件删除就没事了

注意–图片引入

关于中间那个logo图的导入

因为 :src 会将后面的值当做变量解析

所以我们可以将图片存在一个变量里

或者通过require()方法来导入

import logoImg from '@/assets/logo.png'
// 先把图片导入存在一个变量里
export default {
    components: {vueQr},
    data(){
        return{
            logoPath: logoImg,
            // 或者用require()来导入
            // logoPath: require('@/assets/logo.png'),
            textValue:'https://cn.vuejs.org/'
        }
    }
}

还可以直接在组件中通过require()来导入

	<div class="code">	     
		<vue-qr
                 ref="qrCode"
                 :text="textValue"
                 :logoSrc="require('@/assets/logo.png')"
                 :logoScale="40"
                 :size="190"
                 :margin="10"
             />
       </div>