在Vue项目中，你可以使用html5-qrcode库来实现H5扫一扫功能。以下是一个简单的例子：
首先，安装html5-qrcode库：
npm install html5-qrcode然后，在Vue组件中使用它：
<template>
<div>
<button @click="startScan">扫一扫</button>
<p v-if="result">扫描结果：{{ result }}</p>
</div>
</template>
<script>
import { Html5QrcodeScanner } from 'html5-qrcode';
export default {
data() {
return {
result: null,
html5QrCodeScanner: null,
};
},
methods: {
startScan() {
this.html5QrCodeScanner = new Html5QrcodeScanner(
"reader", { fps: 10, qrbox: 250 }, (decodedText, decodedResult) => {
this.result = decodedText;
this.html5QrCodeScanner.stop();
},
(error) => {
console.error(error);
}
);
this.html5QrCodeScanner.render(
{
width: 250,
height: 250,
},
"reader"
);
},
},
};
</script>
<style>
#reader {
margin: auto;
width: 250px;
height: 250px;
}
</style>在这个例子中，我们创建了一个startScan方法，当按钮被点击时，会启动扫描。扫描结果会存储在result数据属性中，并显示在页面上。Html5QrcodeScanner的实例会在扫描完成后调用stop方法停止摄像头。
请确保你的Vue模板中有一个元素与readerID相对应，这个元素将用作扫描框。
注意：这个例子假设你的页面上有一个元素<div id="reader"></div>来承载扫描框和结果显示。此外，由于涉及摄像头使用，请确保你的网站在HTTPS下运行，并且得到用户的相应授权。