将 B 按钮与输入文件 / BootstrapVue 绑定

Posted 2023-02-16

【中文标题】将 B 按钮与输入文件 / BootstrapVue 绑定

【英文标题】：Bind B-Button with input file / BootstrapVue

【发布时间】：2021-11-20 08:31:53

【问题描述】：

我尝试使用输入文件按钮（这是在 v-for 循环中）。但我不想使用b-form-file 标签。

所以我已经尝试了 - 至少 - 我见过的所有东西，但对我来说没有任何效果。

我有以下代码：

<b-button @click="selectFile()" variant="success" :id="index"> Upload </b-button>
<input type="file" ref="file" style="display: none;"/>

这在我的脚本/方法中：

methods: 
  selectFile() 
    this.$refs.file;
  

结果：当我点击按钮时什么也没发生 - 但我也没有收到任何错误。

感谢您的帮助！

【参考方案1】：

您应该使用<label> 而不是使用按钮，而不是使用for 属性。然后，您可以使用 CSS 设置标签的样式，使其看起来像一个按钮。

<label for="file" class="btn btn-success"> Upload </label>
<input id="file" type="file" style="display: none;" />

由于您在v-for 中使用它，您需要为您的输入生成动态 ID。为此，您可以使用唯一标识符（如果您的商品有唯一标识符），也可以使用 index。

<div v-for="(item, index) in items">
  <label :for="`file-$index`" class="btn btn-success"> Upload </label>
  <input :id="`file-$index`" type="file" style="display: none;"/>
</div>

【参考方案2】：

在带有 BootstrapVue 的 Vue 中：

以下代码的工作原理：

点击按钮（标签）打开文件资源管理器； 选择一个文件，继续； @onChange 将检测新文件：

<label>
  <button/> //this can be an icon, link,...
  <input @change="doSomething" type="file" ref="file" accept="image/gif, 
    image/jpeg, image/png" hidden/>
</label>

处理文件

doSomething(e: any)  
  const file = e.target.files[0]

Question 是重复的，my answer tho

【讨论】：

将交互式内容放置在 中是相当糟糕的做法，除非先放置关联的输入，否则它也不起作用，这意味着您写出的示例不起作用。至少当我在win10上测试时，Chrome。

这在 Vue2 中运行没有任何问题。你能告诉我更多关于“不良做法”的信息吗？

在标签内放置交互式内容不利于可访问性，并且通常违反 html 规范。这是我试过的代码，但没有用，codepen。 spec 提到如果没有使用for 属性，则使用第一个labelable element（按钮/标签）。这意味着在您的示例中，单击标签会激活按钮，而不是输入，因为它是第一个。还提到了here