Блог

Я хочу использовать значок телефона ( mdi-phone ) prepend-inner в качестве v-text-field входа .

Я могу написать это, как показано ниже, и все работает нормально:

 <v-text-field
    type="tel"
    v-if="!numberIsEntered"
    label="phone number"
    clearable
    required
    color="#ff5b1b"
    :rules="[
        rules.required,
        rules.internationalNumber,
        rules.nationalNumber
    ]"
    class="mt-10 mb-15"
    v-model="userLoginDetails.userNumber"
    outlined></v-text-field>
 

значок в этом коде меняет цвет при изменении состояния ввода. если есть ошибка и ввод меняет цвет на красный, цвет значка также меняется на красный.

но я хотел, чтобы значок был повернут, поэтому я добавил приведенный ниже код в <v-text-field></v-text-field> :

   <template v-slot:prepend-inner>
      <v-icon style="transform:rotateY(-180deg)">mdi-phone</v-icon>
  </template>
 

теперь цвет значка не меняется при разных состояниях ввода (например: ошибка,…).

это ошибка или есть способ ее исправить?

ИЗМЕНИТЬ: Эта проблема вызвана тем, что vuetify переопределяет стили значков со dark свойствами темы. Я переписал код следующим образом:

 <template v-slot:prepend-inner>
    <i aria-hidden="true" class="v-icon notranslate mdi mdi-phone" 
        style="transform: rotateY(-180deg);"></i>
</template>
 

Попробуйте передать имя значка в качестве реквизита, чтобы получить тот же цвет входных данных, затем определите правило стиля для поворота значка :

 <v-text-field
    type="tel"
     class="phone-input"
     prepend-inner-icon="mdi-phone"
   ...
    outlined></v-text-field>
 

Стиль :

 .phone-input .v-icon{
  transform:rotateY(-180deg)
}
 

ЖИВАЯ ДЕМОНСТРАЦИЯ