vue 移动端扫码禁止使用相册

Vue移动端如果想要禁用扫码功能中的相册选择，通常是在处理网页的H5页面时涉及到。为了限制用户只能通过摄像头扫描而不能直接从手机相册选取二维码，你需要在JavaScript代码中控制`<input type="file" accept="image/*">`元素的行为。

首先，在HTML中设置一个扫码按钮，并绑定一个事件监听器：

<button @click="scan QRCode">扫码</button>
<input type="file" id="scanInput" @change="handleScan" accept="image/*" style="display: none;">

然后，在Vue实例中，编写`handleScan`方法：

methods: {
  handleScan(e) {
    // 只允许摄像头访问
    if (e.target.files[0].type.startsWith('image')) {
      const file = e.target.files[0];
      this.scan(file);
    } else {
      alert('仅支持扫描图片文件');
    }
  },
  scan(file) {
    // 使用原生API或者第三方库来进行扫码，比如jsqrcode
    // 这里只是一个示例，实际操作中需要替换为你的扫码逻辑
    // 如果使用原生JS，可以尝试以下代码：
    // navigator.mediaDevices.getUserMedia({ video: true })
    //   .then(stream => {
    //     // 使用stream进行扫码...
    //   });
  },
},

在这个例子中，我们检查了选择的文件类型是否为图片。如果不是，就显示提示信息。如果允许，我们会进一步处理这个文件（通常是发起设备摄像头请求）。请注意，这可能会受到浏览器的同源策略限制，对于完整的实现，你可能需要结合客户端和服务端的安全策略。