vue实现扫描二维码功能

要实现扫描二维码功能，可以使用第三方库`vue-qrcode-reader`。以下是一个简单的示例：

1. 安装`vue-qrcode-reader`库

npm install vue-qrcode-reader --save

2. 在Vue组件中引入并使用该库

<template>
  <div>
    <qrcode-stream @decode="onDecode"></qrcode-stream>
    <div v-if="qrCode">{{qrCode}}</div>
  </div>
</template>

<script>
import QrcodeStream from 'vue-qrcode-reader'

export default {
  components: {
    QrcodeStream
  },
  data() {
    return {
      qrCode: ''
    }
  },
  methods: {
    onDecode(data) {
      this.qrCode = data
    }
  }
}
</script>

在这个示例中，我们首先在组件中引入了`vue-qrcode-reader`库中的`QrcodeStream`组件，并且在`template`中使用了该组件。当用户扫描成功时，会触发`@decode`事件，并将扫描到的二维码文本传递给`onDecode`方法，我们在该方法中将扫描到的二维码文本赋值给`qrCode`，并在`template`中显示出来。

注意：为了能够访问摄像头，需要在HTTPS环境下运行该示例。