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

Question

我有一个带有 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>

如果还能够更改轮廓的颜色，那就太好了。我也找到了答案，但没有一个在我的案例中真正有效。

谢谢。

标签： vue.jsiconsvuetify.jstextfield

Answer 1

您可以使用prepend插槽而不是道具：

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

现场演示