vue使用qrcode插件生成二维码

标签：src   closed   因此   method   pre   script   img   mamicode   bbs   

步骤：

第一步：vue-cli下载插件

cnpm install --save qrcodejs2

第二步：组件中引入插件

<template>
  <div>
    <div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->
  </div>
</template> <script>
import QRCode from ‘qrcodejs2‘  // 引入qrcode
export default {
  name : ‘test‘,
  mounted () {
    this.qrcode();
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode(‘qrcode‘, {
        width: 132,
        height: 132,
        text: ‘https://www.baidu.com‘, // 二维码地址
      })
    },
  }
}
</script>

存在问题:
但是，在使用过程中，发现这样生成的二维码，退出生成二维码界面后，之前生成的二维码仍存在在界面上，那么下一次点击生成二维码的时候，界面上就会存在多个二维码，因此需要在退出二维码的时候清空二维码界面里生成的二维码，避免下一次生成时，存在多个二维码。

解决方案：

closeDialog() {
      this.$refs.qrcode.innerText = ‘‘
    },

只需在界面关闭事件里，添加清空innerText即可

如此，多次点击生成二维码后，也不会生成多个二维码，而始终只会生成当前的二维码，如下图所示

参考：vue使用qrcode插件生成二维码

vue使用qrcode插件生成二维码

标签：src   closed   因此   method   pre   script   img   mamicode   bbs   

原文地址：https://www.cnblogs.com/spike218/p/13767346.html