当前位置：首页 > VUE

vue实现生成二维码

2026-01-12 08:38:11VUE

使用 vue-qrcode 库生成二维码

安装 vue-qrcode 库

npm install @chenfengyuan/vue-qrcode

在 Vue 组件中引入并使用

<template>
  <div>
    <vue-qrcode :value="qrText" :size="200"></vue-qrcode>
  </div>
</template>

<script>
import VueQrcode from '@chenfengyuan/vue-qrcode';

export default {
  components: {
    VueQrcode
  },
  data() {
    return {
      qrText: 'https://example.com'
    }
  }
}
</script>

使用 qrcode.js 库生成二维码

安装 qrcode.js 库

npm install qrcode

在 Vue 组件中使用

<template>
  <div>
    <canvas ref="qrCanvas"></canvas>
  </div>
</template>

<script>
import QRCode from 'qrcode';

export default {
  mounted() {
    this.generateQR();
  },
  methods: {
    generateQR() {
      QRCode.toCanvas(this.$refs.qrCanvas, 'https://example.com', {
        width: 200
      }, (error) => {
        if (error) console.error(error);
      });
    }
  }
}
</script>

自定义二维码样式

通过 CSS 自定义二维码外观

<template>
  <div class="qr-container">
    <vue-qrcode :value="qrText" :size="200" class="qr-code"></vue-qrcode>
  </div>
</template>

<style>
.qr-container {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  display: inline-block;
}

.qr-code {
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

动态生成二维码内容

实现输入内容实时生成二维码

<template>
  <div>
    <input v-model="qrText" placeholder="输入二维码内容">
    <vue-qrcode :value="qrText" :size="200"></vue-qrcode>
  </div>
</template>

<script>
import VueQrcode from '@chenfengyuan/vue-qrcode';

export default {
  components: {
    VueQrcode
  },
  data() {
    return {
      qrText: ''
    }
  }
}
</script>

下载生成的二维码

添加下载功能

<template>
  <div>
    <vue-qrcode :value="qrText" :size="200" ref="qrCode"></vue-qrcode>
    <button @click="downloadQR">下载二维码</button>
  </div>
</template>

<script>
import VueQrcode from '@chenfengyuan/vue-qrcode';

export default {
  components: {
    VueQrcode
  },
  methods: {
    downloadQR() {
      const link = document.createElement('a');
      link.href = this.$refs.qrCode.$el.toDataURL('image/png');
      link.download = 'qrcode.png';
      link.click();
    }
  },
  data() {
    return {
      qrText: 'https://example.com'
    }
  }
}
</script>

二维码容错级别设置

设置不同容错级别

vue实现生成二维码

<template>
  <div>
    <vue-qrcode 
      :value="qrText" 
      :size="200"
      :error-correction-level="errorLevel">
    </vue-qrcode>
    <select v-model="errorLevel">
      <option value="L">L (低)</option>
      <option value="M">M (中)</option>
      <option value="Q">Q (高)</option>
      <option value="H">H (最高)</option>
    </select>
  </div>
</template>

<script>
import VueQrcode from '@chenfengyuan/vue-qrcode';

export default {
  components: {
    VueQrcode
  },
  data() {
    return {
      qrText: 'https://example.com',
      errorLevel: 'M'
    }
  }
}
</script>