时间戳

首页 > 解决方案 > 在 Vuetify.js 中更改输入文件组件的颜色和图标

javascript - 在 Vuetify.js 中更改输入文件组件的颜色和图标

问题描述

如何更改v-file-inputVuetify 中组件的图标和颜色？

对于 v-text-field 和其他组件，插槽方法有效，但对于此组件，我无法使其工作：

<div id="app">
  <v-app id="inspire">
    <v-file-input show-size label="File input">
      <template v-slot:prepend>
         <v-tooltip bottom>
            <template v-slot:activator="{ on }">
               <v-icon v-on="on" color="yellow lighten-3">
                  notes
               </v-icon>
           </template>
        </v-tooltip>
     </template>
    </v-file-input>
  </v-app>
</div>

代码笔。

标签： javascriptvue.jsvuetify.js

解决方案

因为它没有prepend插槽。您可以使用道具更改图标，prepend-icon但不能更改颜色。您可以前往 Vuetify Github 并提出功能请求。

同时，您还可以使用以下小技巧（仅因为您使用带有 CSS/webfont 的 MDI 图标才有效）

在您的 css 文件中：

.mdi-myFileIcon::before {
  content: "\F39A";
  color: blue;
}

<v-file-input show-size label="File input" prepend-icon="mdi-myFileIcon" />

推荐阅读