vue js写二维码

在Vue.js中创建二维码通常是使用第三方库，因为Vue本身并不直接提供生成二维码的功能。一个常用的库是qrcodejs，它是一个轻量级的JavaScript库，用于生成二维码。

首先，你需要安装这个库：

npm install qrcodejs vue-qrcode-reader (如果需要扫描)

然后，在Vue组件中引入并使用它：

<template>
  <div>
    <button @click="generateQR">生成二维码</button>
    <qrcode :data="qrData" :size="200"></qrcode> <!-- 使用vue-qrcode-reader 如果需要扫描 -->
  </div>
</template>

<script>
import QRCode from 'qrcode.react' // 或者 import QRCode from 'vue-qrcode-reader'

export default {
  data() {
    return {
      qrData: '', // 存储要生成的二维码数据
    };
  },
  methods: {
    generateQR() {
      this.qrData = 'https://your-url.com'; // 替换为你实际的数据
      this.$refs.qrcode.generate(this.qrData); // 生成二维码
    }
  },
  components: {
    QRCode,
  },
};
</script>

如果你还需要添加二维码扫描功能，可以使用`vue-qrcode-reader`库，但记得先安装它：

<template>
  <div>
    <button @click="generateQR">生成二维码</button>
    <qrcode-reader ref="qrcodeReader" :value="qrData" @result="handleScanResult" />
  </div>
</template>

<script>
import QRCodeReader from 'vue-qrcode-reader';

export default {
  data() {
    return {
      qrData: '',
    };
  },
  methods: {
    generateQR() {
      this.qrData = 'https://your-url.com';
    },
    handleScanResult(result) {
      this.qrData = result.text;
      // 对扫描结果进行处理或显示
    },
  },
  components: {
    QRCodeReader,
  },
};
</script>