vue3使用qrcodejs2-fix生成二维码

电脑版发表于：2025/8/21 11:09

tn2> qrcodejs2-fix 是 qrcodejs2 的一个修复版本，专门解决了在现代前端框架（包括 Vue3）中使用时可能出现的兼容性问题，比如错误： "Cannot read properties of undefined (reading '_android')"。

[TOC]

### 环境安装
```
npm i qrcodejs2-fix --save
```

### 基础的使用
```
<template>
    <div class="qrcode-demo">
        <h3>基础二维码示例</h3>
        
        <div ref="qrCodeContainer" class="qr-container"></div>
        
        
        <div class="controls">
            <el-input 
                v-model="qrContent" 
                placeholder="输入二维码内容" 
                style="width: 300px;"
            />
            <el-button @click="generateQRCode">生成二维码</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import QRCode from 'qrcodejs2-fix'

// 二维码内容
const qrContent = ref('https://www.example.com')
// 二维码容器引用
const qrCodeContainer = ref(null)
// 二维码实例
let qrInstance = null

// 组件挂载后初始化二维码
onMounted(() => {
    nextTick(() => {
        generateQRCode()
    })
})

// 生成二维码方法
const generateQRCode = () => {
    // 确保容器存在
    if (!qrCodeContainer.value) return
    
    // 清除已有二维码
    clearQRCode()
    
    // 创建新二维码
    try {
        qrInstance = new QRCode(qrCodeContainer.value, {
            text: qrContent.value,  // 二维码内容
            width: 200,             // 宽度
            height: 200,            // 高度
            colorDark: '#000000',   // 前景色
            colorLight: '#ffffff',  // 背景色
            correctLevel: QRCode.CorrectLevel.L  // 容错级别 (L/M/H)
        })
    } catch (error) {
        console.error('生成二维码失败:', error)
    }
}

// 清除二维码
const clearQRCode = () => {
    if (qrCodeContainer.value) {
        qrCodeContainer.value.innerHTML = ''
    }
    qrInstance = null
}
</script>

<style scoped>
.qrcode-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px;
}

.qr-container {
    border: 1px solid #eee;
    padding: 10px;
}

.controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
</style>

```

### 在弹窗里边使用
```
<template>
    <div>
        <el-button @click="showQRCode">点击生成二维码</el-button>
        <el-dialog 
            title="课程二维码" 
            v-model="dialogVisible" 
            width="190px" 
            @close="handleClose"
        >
            
            <div id="qrCodeContainer" ref="qrCodeContainer" class="qrcode-wrapper"></div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'
import QRCode from 'qrcodejs2-fix'

// 状态管理
const dialogVisible = ref(false)
const qrCodeContainer = ref(null)
let qrInstance = null
let containerElement = null // 存储DOM元素引用

// 组件挂载时获取元素引用
onMounted(() => {
    // 提前获取一次元素引用，确保元素存在
    nextTick(() => {
        containerElement = qrCodeContainer.value
    })
})

// 显示弹窗并生成二维码
const showQRCode = () => {
    dialogVisible.value = true
    // 等待弹窗完全渲染
    setTimeout(() => {
        nextTick(() => {
            generateQRCode()
        })
    }, 0)
}

// 生成二维码
const generateQRCode = () => {
    // 多重检查确保元素有效
    if (!qrCodeContainer.value) {
        console.error('二维码容器元素不存在')
        // 尝试通过ID获取元素作为备选方案
        containerElement = document.getElementById('qrCodeContainer')
    } else {
        containerElement = qrCodeContainer.value
    }

    // 如果仍无法获取元素，终止执行
    if (!containerElement || !(containerElement instanceof HTMLElement)) {
        console.error('无法获取有效的DOM元素')
        return
    }

    // 清除已有实例
    clearQRCode()
    
    try {
        // 创建新二维码
        qrInstance = new QRCode(containerElement, {
            text: 'https://www.baidu.com/', // 二维码内容
            width: 150,
            height: 150,
            colorDark: '#333333',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    } catch (error) {
        console.error('生成二维码失败:', error)
    }
}

// 清除二维码
const clearQRCode = () => {
    if (containerElement) {
        containerElement.innerHTML = ''
    }
    qrInstance = null
}

// 关闭弹窗时处理
const handleClose = () => {
    clearQRCode()
    dialogVisible.value = false
}
</script>

<style scoped>
.qrcode-wrapper {
    display: flex;
    justify-content: center;
    margin: 10px 0;
    width: 100%;
    height: 150px; /* 固定高度确保容器存在 */
}
</style>
```

剑轩

vue3使用qrcodejs2-fix生成二维码

{{item.title}}