vue.js - 更改 v-select 和 v-autocomplete 中的文本颜色

Question

我有以下下拉菜单

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfa9a0a1bb8ffbe1b7" rel="noreferrer noopener nofollow">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c7a796978656a754c3e2274" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e89e9d8da8dac690" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04727161706d627d44362a7c" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.js"></script>

<div id="app">
  <v-app>
     <v-autocomplete label="Country" item-color="secondary" placeholder="Country" color="#B28C81" outlined dense></v-autocomplete>

     <v-select item-color="secondary" label="Coin" placeholder="Coin" color="#B28C81" outlined dense></v-select>

  </v-app>
</div>

我的目标是在选择一个项目后更改字段的文本颜色。我发现 API 允许我在激活时使用 color 更改边框颜色，并使用 item-color 更改列表中项目的颜色，但我想更改文本选择项目后的颜色。

如果还不清楚，例如我希望文本“澳大利亚”为蓝色，我该怎么做？

Answer 1

您可以使用一些简单的 CSS 来覆盖默认的 Vuetify 样式。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    countries: ["Australia", "New Zealand"],
    coins: ["AUD", "NZD"]
  })
})

/*
  These are the selectors controlling the selected item
  in v-autocomplete and v-select
*/
.v-select__selection,
.v-select__selection--comma,
.v-select.v-text-field input {
  color: blue !important;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfb9baaabba6a9b68ffde1b7" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2949787a2d0cc9a" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdbbb8a8b9a4abb48dffe3b5" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-container fluid>
     <v-autocomplete :items="countries" label="Country" placeholder="Country" outlined dense></v-autocomplete>

     <v-select :items="coins" label="Coin" placeholder="Coin" outlined dense></v-select>
    </v-container>
  </v-app>
</div>