javascript - 隐藏时如何打开组件 v-file-input？

Question

我需要使用组件 v-file-input用于上传文件。但是这个组件不适合设计。

我尝试下一步。我把这个组件完全隐藏了 <v-file-input hide-input prepend-icon=""></v-file-input> .我还做了一个按钮，我需要的设计。但是我无法启动组件 v-file-input在方法中单击按钮。

如何在方法中启动这个组件？

Answer 1

你可以尝试把标签做成按钮，标签点击时调用方法:

.upload {
  margin: 2em;
}
#btn {
  border: 2px solid #3457D5;
  border-radius: .5em;
  padding: 1em;
  cursor: pointer;
}
#btn:hover {
  background: #3457D5;
  color: white;
}

<div class="upload">
  <input id="up" type="file" style="display: none" />
  <label id="btn" for="up">Upload</label>
</div>