Ionic Vue：如何更改所选选项的文本颜色？答案

【问题标题】：Ionic Vue: How do I change the text color of a selected option?Ionic Vue：如何更改所选选项的文本颜色？
【发布时间】：2021-01-11 22:05:55
【问题描述】：

我有一个简单的带有 vue 的离子选择组件：

<template>
  <ion-item>
    <ion-label position="floating">Select</ion-label>
    <ion-select>
      <ion-select-option value="brown">Brown</ion-select-option>
      <ion-select-option value="blonde">Blonde</ion-select-option>
      <ion-select-option value="black">Black</ion-select-option>
      <ion-select-option value="red">Red</ion-select-option>
    </ion-select>
  </ion-item>
</template>

<script>
import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';

export default{
  components: { IonItem, IonLabel, IonSelect, IonSelectOption },
};
</script>

一旦用户选择了一个选项，我想分别给它上色：

不幸的是，文档只向我揭示了选择下拉列表中选择选项的颜色 (here)。

要为所选选项着色，我尝试了类似

<ion-select-option value="brown"><span style="color:brown">Brown</span></ion-select-option>

或

<ion-select-option value="brown" style="color:brown">Brown</ion-select-option>

如何将它染成棕色？

【问题讨论】：

标签： vue.js ionic-framework select ion-select

【解决方案1】：

离子 5

您可以为此使用CSS Shadow Parts。
对于ion-select组件，暴露部分为icon、placeholder和text。

ion-select::part(text) {
  color: brown;
}

不幸的是，我不知道使用早期版本的 Ionic 可以实现这一点。
不过，它可能适用于最新版本的 Ionic 4。

【讨论】：

完美运行。谢谢！