如何解决如何正确对齐 v-text-field 中的图标并更改颜色?
我有一个带有 Vuetify 的 vue.js 应用程序。我有几个看起来像这样的 v-text-fields:
我想做两件事:
-
将图标向右移动。
-
更改图标的颜色。
关于如何做到这一点,有关于 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),),);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。