如何正确对齐 v-text-field 中的图标并更改颜色？

问题描述

我有一个带有 Vuetify 的 vue.js 应用程序。我有几个看起来像这样的 v-text-fields：

我想做两件事：

1. 将图标向右移动。

2. 更改图标的颜色。

关于如何做到这一点，有关于 stackoverflow 的建议，但在我的情况下没有任何效果，所以我正在寻找一些新的想法。

这是第一个 v-text-field 的实现方式：

          <v-text-field
            slot="activator"
            v-model="date"
            label="Date"
            prepend-inner-icon="$vuetify.icons.calendar"
            :rules="[(v) => !!v || 'Date is required']"
            required
            readonly
            outline
          ></v-text-field>

这是第二个 v-text-field 的实现方式：

    <v-text-field
      slot="activator"
      ref="text-field"
      clearable
      :label="label"
      :value="content"
      :prepend-inner-icon="showIcon ? '$vuetify.icons.clock' : ''"
      readonly
      outline
      :rules="[v => required == null || !!v || label + ' is required',v => !isInPast || pastValidationMessage,v => !startAfterEnd || startAfterEndValidationMessage]"
      :required="required"
      @click:clear="onClear()"
    ></v-text-field>

如果还可以更改轮廓的颜色就好了。我也找到了答案，但没有一个对我的案例有效。

谢谢。

解决方法

您可以使用 prepend 插槽代替道具：

this.myRequestPost('myUrl',value).pipe(
  concatMap(result1 => my2ndRequest.pipe(
    map(result2 => result1),),);

LIVE DEMO