Vue.js 如何右对齐v-text-field中的图标并更改颜色？

我有一个带有Vuetify的vue.js应用程序。我有两个v形文本字段，如下所示：

我想做两件事：

将图标向右移动

更改图标的颜色

有关于stackoverflow的建议，但是在我的案例中没有任何效果，所以我正在寻找一些新的想法

这是第一个v文本字段的实现方式：

          <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
      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>

这是第二个v文本字段的实现方式：

          <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
      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>

这将是很好的，也可以改变轮廓的颜色。我也找到了答案，但在我的案例中没有一个真正有效

谢谢。

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

 <v-text-field label="Date">
          <template #prepend>
            <v-icon color="blue" right>
              mdi-calendar
            </v-icon>
          </template>
  </v-text-field>

mdi日历