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

一、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属性。这样，我们就可以通过读取本地文件来生成二维码。