使用 Element Dialog 组件巧妙解决 Vue 项目二维码生成难题

2024-02-13 21:42:46

在纷繁复杂的 Vue 项目中，生成二维码的需求可谓司空见惯，而 Element 的 Dialog 组件无疑是实现这一需求的利器。然而，使用过程中常常会遇到一些令人抓狂的难题，让开发者头疼不已。本文将针对这些问题展开深入探讨，并提供切实可行的解决方案，助你轻松驾驭 Element Dialog 的二维码生成功能。

难题 1：二维码重复生成导致叠加

当用户多次点击生成二维码按钮时，二维码会不断叠加，遮挡之前的二维码，导致无法正常显示。

解决方案：

销毁旧二维码： 在生成新二维码之前，销毁旧二维码元素，防止其叠加。
设置延时： 为二维码生成操作设置延时，防止用户连续点击导致二维码重复生成。

难题 2：Dialog 组件中的标签未渲染

在 Dialog 组件中生成二维码时，标签元素可能无法正确渲染，导致二维码无法正常显示。

解决方案：

使用 Vue.nextTick()： 在生成二维码之前，使用 Vue.nextTick() 方法强制更新 DOM，确保标签已渲染。
设置 CSS 样式： 为二维码元素设置 CSS 样式，如 visibility: visible，以强制其显示。

代码示例

以下是结合上述解决方案实现的 Vue 代码示例：

<template>
  <div>
    <el-dialog :visible="dialogVisible">
      <el-button @click="generateQRCode">生成二维码</el-button>
      <div id="qrcode"></div>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'
import QRCode from 'qrcode'

export default {
  setup() {
    const dialogVisible = ref(false)

    const generateQRCode = () => {
      // 销毁旧二维码
      const qrcodeElement = document.getElementById('qrcode')
      if (qrcodeElement) {
        qrcodeElement.remove()
      }

      // 设置延时
      setTimeout(() => {
        const qrcode = new QRCode('qrcode')

        // 设置标签样式
        qrcode.element.style.visibility = 'visible'

        // 生成二维码
        qrcode.makeCode('https://www.example.com')
      }, 100)

      // 设置 Dialog 可见
      dialogVisible.value = true
    }

    return {
      dialogVisible,
      generateQRCode
    }
  }
}
</script>