Vue-qrcode：生成二维码简单易用

发布时间：2023-05-18

一、Vue-qrcode生成二维码

Vue-qrcode是一个基于Vue.js的生成二维码的插件。它可以通过简单的配置实现轻松的二维码生成。下面是一个简单的示例：

<template>
  <div>
    <qrcode value="https://www.baidu.com" />
  </div>
</template>
<script>
import Qrcode from 'vue-qrcode';
export default {
  components: {
    Qrcode
  }
}
</script>

该示例中，我们通过import导入Qrcode组件，然后在template里面使用该组件，并传入需要生成二维码的链接。随着value的变化（value可以是任何变量），二维码也会自动更新。

二、Vue-qrcode自定义二维码样式

Vue-qrcode还提供了一些自定义样式的方法，具体可参考API文档。下面我们通过一个实例来展示如何自定义二维码的样式：

<template>
  <div class="qrcode-wrap">
    <qrcode 
      :value="qrCodeValue"
      :size="qrCodeSize"
      :fg-color="fgColor"
      :bg-color="bgColor"
      :level="qrCodeLevel"
      :render-as="qrCodeRenderAs"
      :quiet-zone="qrCodeQuietZone"
      :round-dot="qrCodeRoundDot"
      :percent="qrCodePercent"
    />
  </div>
</template>
<script>
import Qrcode from 'vue-qrcode';
export default {
  data: function() {
    return {
      qrCodeValue: 'https://www.baidu.com',
      qrCodeSize: 100,
      fgColor: '#000000',
      bgColor: '#ffffff',
      qrCodeLevel: 'M',
      qrCodeRenderAs: 'canvas',
      qrCodeQuietZone: 0,
      qrCodeRoundDot: false,
      qrCodePercent: 0.8
    }
  },
  components: {
    Qrcode
  }
}
</script>
<style>
.qrcode-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在这个实例中，我们定义了一个包裹qrcode组件的div，并为其添加了一些样式。qrcode组件的样式通过传递props实现。比如，我们传递了qrCodeSize来设置二维码的大小，传递了fgColor和bgColor来分别设置二维码前景色（即二维码的颜色）和背景色。同样，我们也可以通过传递其他props来调整二维码的其他样式。

三、Vue-qrcode生成并下载本地图片

Vue-qrcode还可以将生成的二维码下载到本地以供使用。以下是一个简单的示例：

<template>
  <div>
    <qrcode 
      value="https://www.baidu.com"
      ref="qrcode"
    />
    <button @click="download">download</button>
  </div>
</template>
<script>
import Qrcode from 'vue-qrcode';
export default {
  methods: {
    download: function() {
      const canvas = this.$refs.qrcode.$children[0].$el;
      const link = document.createElement('a');
      link.download = 'qrcode.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
    }
  },
  components: {
    Qrcode
  }
}
</script>

在这个示例中，我们首先为qrcode组件添加了一个ref属性，然后在download函数中获取到生成的二维码canvas元素，并通过URL.createObjectURL()方法将其包装为一个下载链接。当用户点击download按钮时，我们调用link.click()来触发下载。通过这种方法，我们可以轻松地将二维码保存到本地。

四、Vue-qrcode从文件中读取图片生成二维码

Vue-qrcode还可以通过读取本地图片生成二维码。以下是一个简单的示例：

<template>
  <div>
    <input type="file" @change="getFile">
    <qrcode :value="qrData" />
  </div>
</template>
<script>
import Qrcode from 'vue-qrcode';
export default {
  data: function() {
    return {
      qrData: ''
    }
  },
  methods: {
    getFile: function(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        this.qrData = e.target.result;
      }
    }
  },
  components: {
    Qrcode
  }
}
</script>

在这个示例中，我们首先在template中添加了一个文件选择输入框，然后在getFile函数中通过FileReader来读取用户选择的文件。当文件读取完成时，我们将读取到的数据赋值给qrData变量，并将其传递给qrcode组件的value属性。这样，我们就可以通过读取本地文件来生成二维码。

推荐文章