Vue实现生成二维码的简单方式

下面是Vue实现生成二维码的简单方式的攻略：

1. 安装库

首先，我们需要安装一个能够方便地生成二维码的库，这里推荐使用 qrcodejs2。

安装方式如下：

npm install qrcodejs2 --save

2. 创建组件

接下来，我们创建一个 Vue 组件，用于生成二维码。

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

<script>
import QRCode from 'qrcodejs2'

export default {
  props: {
    text: {
      type: String,
      required: true
    },
    width: {
      type: Number,
      default: 256
    },
    height: {
      type: Number,
      default: 256
    }
  },

  mounted () {
    this.generateQRCode()
  },

  methods: {
    generateQRCode () {
      const qrcode = new QRCode(this.$refs.canvas, {
        width: this.width,
        height: this.height
      })
      qrcode.makeCode(this.text)
    }
  }
}
</script>

以上代码中，我们引入了 qrcodejs2 库，并创建了一个组件。组件接收三个 prop：text 表示要生成二维码的文本，width 和 height 表示二维码的宽度和高度。

在 mounted 钩子函数中，调用 generateQRCode 方法生成二维码。generateQRCode 方法中，我们通过传入 ref 为 canvas 的元素来创建一个 QRCode 的实例，并在实例上调用 makeCode 方法生成二维码。

3. 使用组件

最后，我们可以在 Vue 应用中使用上述组件。

<template>
  <div>
    <qrcode :text="text"></qrcode>
  </div>
</template>

<script>
import QRCode from './QRCode'

export default {
  components: {
    'qrcode': QRCode
  },
  data () {
    return {
      text: 'https://www.example.com'
    }
  }
}
</script>

以上代码中，我们引入了刚刚定义的 QRCode 组件，并在模板中使用。在 data 中定义了要生成二维码的文本。

这样，我们就可以在页面中看到生成的二维码了。

示例1

下面是一个更完整的示例，演示如何在一个页面中生成不同的二维码。

在 App.vue 中，我们定义了一个 data 为 qrcodeList 的数组，数组中包含了每个二维码的文本和尺寸。

<template>
  <div>
    <div v-for="(item, index) in qrcodeList" :key="index">
      <p>文本：{{item.text}}</p>
      <qrcode :text="item.text" :width="item.width" :height="item.height"></qrcode>
    </div>
  </div>
</template>

<script>
import QRCode from './QRCode'

export default {
  components: {
    'qrcode': QRCode
  },
  data () {
    return {
      qrcodeList: [
        {
          text: 'https://www.example.com',
          width: 256,
          height: 256
        },
        {
          text: 'https://www.google.com',
          width: 128,
          height: 128
        }
      ]
    }
  }
}
</script>

在模板中，我们使用 v-for 指令遍历 qrcodeList 数组，并将每个数组元素传递给 QRCode 组件，生成不同的二维码。

示例2

下面是一个示例，演示如何将生成的二维码保存为图片。

在 QRCode.vue 组件中，我们添加了一个 save 方法，用于将生成的二维码保存为图片。

<template>
  <canvas ref="canvas"></canvas>
  <button @click="save">保存为图片</button>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  props: {
    text: {
      type: String,
      required: true
    },
    width: {
      type: Number,
      default: 256
    },
    height: {
      type: Number,
      default: 256
    }
  },

  mounted () {
    this.generateQRCode()
  },

  methods: {
    generateQRCode () {
      const qrcode = new QRCode(this.$refs.canvas, {
        width: this.width,
        height: this.height
      })
      qrcode.makeCode(this.text)
    },

    save () {
      const canvas = this.$refs.canvas
      const image = canvas.toDataURL('image/png')
      const link = document.createElement('a')
      link.download = 'qrcode.png'
      link.href = image
      link.click()
    }
  }
}
</script>

以上代码中，我们添加了一个 save 方法。在 save 方法中，我们首先通过调用 toDataURL 方法将 canvas 中的内容转换为图片，然后通过创建一个 a 标签，并设置 download 属性和 href 属性，将图片保存为文件。

在 App.vue 组件中，我们引入了 QRCode 组件，并将 text、width、height 传递给 QRCode 组件。在页面中，当点击保存为图片按钮时，会调用 QRCode 组件的 save 方法，将生成的二维码保存为图片。

这就是如何使用 Vue 实现生成二维码，并将二维码保存为图片的简单方式。