使用html5-qrcode在vue页面扫描二维码并将结果填入输入框

首先，你需要在Vue项目中安装`html5-qrcode`库。可以使用如下命令进行安装：

npm install html5-qrcode --save

接下来，在Vue组件中引入`html5-qrcode`库：

import Html5Qrcode from 'html5-qrcode';

然后，在Vue组件的`mounted()`函数中初始化`Html5Qrcode`对象并设置回调函数。例如，假设你的输入框的`id`为`inputField`，则可以使用如下代码：

mounted() {
  const qrCodeScanner = new Html5Qrcode("qrCodeScanner");
  qrCodeScanner.start(
    (qrCodeMessage) => {
      document.getElementById("inputField").value = qrCodeMessage;
    },
    (errorMessage) => {
      console.log(errorMessage);
    },
    { fps: 10, qrbox: 250 }
  );
}

在上述代码中，`qrCodeScanner`是`Html5Qrcode`对象，`start()`函数用于开始扫描二维码。第一个回调函数用于处理成功扫描到二维码后的逻辑。在这个例子中，我们将扫描到的二维码信息填入输入框中。第二个回调函数用于处理扫描失败的逻辑。`fps`和`qrbox`参数用于设置扫描器的帧率和二维码框的大小。

最后，在Vue组件的`template`中添加一个`div`元素作为扫描器容器，并设置`id`为`qrCodeScanner`：

<template>
  <div>
    <div id="qrCodeScanner"></div>
    <input type="text" id="inputField">
  </div>
</template>

这样就完成了在Vue页面中使用`html5-qrcode`库进行二维码扫描并将结果填入输入框的功能。