Vuetify v-file-input 仅带有图标答案

【问题标题】：Vuetify v-file-input with icon onlyVuetify v-file-input 仅带有图标
【发布时间】：2020-06-10 08:09:07
【问题描述】：

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

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

知道怎么做吗？

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

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

使用“隐藏输入”

我们正在向 v-file-input 添加 hide-input（来自 v2.3.0-beta.6）

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

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

【讨论】：

谢谢！官方 v2.3.0 版本有计划的发布日期吗？我看到里程碑逾期 3 天。此版本正式发布后，我会标记为正确解决方案。
V2.3.0已经出，可以查看github.com/vuetifyjs/vuetify/releases/tag/v2.3.0

【解决方案2】：

你可以使用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

【讨论】：

嘿！感谢您的回答，但是当我尝试时，它抛出了一个错误：Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected selector. ╷ 27 │ /deep/{ │ ^ ╵ /Users/sshadur/WebstormProjects/vue-sandbox/src/App.vue 27:3 root stylesheet 知道为什么会这样吗？
使用 >>> 替换 /deep/
#inspire >>> .v-input__control { 显示：无； }
这是scss不是sass，如果报错可以试试>>>
使用#inspire >>> .v-input__control { display: none; } 不会引发错误，但文本框仍然存在...