Vuetify仅带有图标的v文件输入

Question

我是Vue的新手，尤其是Vuetify。

我想使用 v-file-input 组件，但是我希望它只具有回形针图标，而没有文本框。我尝试使用css和指令，但我没有做到这一点。

有什么想法吗？

Answer 1

您可以使用deep

<div id="app">
  <v-app id="inspire">
    <v-file-input multiple label="File input"></v-file-input>
  </v-app>
</div>


//scss
#inspire {
  /deep/ {
    .v-input__control {
      display: none;
    }
  }
}
//or
#inspire {
  ::v-deep {
    .v-input__control {
      display: none;
    }
  }
}

演示：https://codepen.io/wzc570738205/pen/ZEQQKwm

这是文档：https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

Answer 2

https://vuetifyjs.com/en/components/file-inputs/#file-inputs

带有“隐藏输入”

我们正在将隐藏输入添加到v文件输入（来自v2.3.0-beta.6）

<v-file-input multiple label="File input" hide-input></v-file-input>

https://codepen.io/yipingruan/pen/ExPPozL