vue项目实现微信支付二维码，页面中有两个按钮分别对应不同的方法实现不同价格收费，当用户点击按钮后，会有个弹窗 <el-dialog :visible.sync="wxdialogVisible" > <h2>打开微信扫一扫</h2> <div id="qrcode" ref="qrcode" align="center" ></div> </el-dialog> 展示二维码。qrcode为微信返回的 this.qrcode = new QRCode("qrcode", { width: 250,//二维码宽度 height: 250,//二维码高度 text: res.data.data.codeUrl,//调用微信支付接口返回的微信特殊链接：例如"weixin://wxpay/bizpayurl?pr=uDKsQ4E00" colorDark: "#000",//颜色配置 colorLight: "#fff", }) 现在存在问题是用户点击第一个按钮后，弹窗展示一个二维码，用户点击第二个按钮，弹窗展示两个二维码。如何做到用户点击第二个按钮时仍展示一个二维码呢？

可以将生成二维码的代码封装在一个函数中，并在点击按钮时调用该函数生成二维码，并将二维码图片存储在一个变量中。然后在弹窗中展示这个变量即可，不需要再次生成二维码。具体实现代码如下：

<template>
  <div>
    <button @click="showQRCode(10)">10元</button>
    <button @click="showQRCode(20)">20元</button>
    <el-dialog :visible.sync="wxdialogVisible">
      <h2>打开微信扫一扫</h2>
      <div id="qrcode" ref="qrcode" align="center"></div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  data() {
    return {
      wxdialogVisible: false,
      qrCodeImage: null // 存储二维码图片
    }
  },
  methods: {
    showQRCode(price) {
      // 调用生成二维码的函数
      this.generateQRCode(`weixin://wxpay/bizpayurl?pr=uDKsQ4E00&price=${price}`)
      this.wxdialogVisible = true
    },
    generateQRCode(text) {
      const qrcode = new QRCode('qrcode', {
        width: 250,
        height: 250,
        text: text,
        colorDark: '#000',
        colorLight: '#fff'
      })
      // 将二维码图片存储到变量中
      this.qrCodeImage = qrcode._oDrawing._elImage
    }
  }
}
</script>

然后在弹窗中展示存储的二维码图片即可：

<el-dialog :visible.sync="wxdialogVisible">
  <h2>打开微信扫一扫</h2>
  <div align="center">
    <img :src="qrCodeImage" alt="二维码" />
  </div>
</el-dialog>