僅使用圖標驗證 v-file-input

Question

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

我想使用v-file-input組件，但我希望它只有回形針圖標而沒有文本框。 我試着玩 css 和指令，但我沒能做到。

知道怎么做嗎？

Answer 1

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

使用“隱藏輸入”

我們正在將隱藏輸入添加到 v-file-input（來自 v2.3.0-beta.6）

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

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

Answer 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