如何删除vuetify自动完成组件默认图标

时间:2019-06-28 04:56:03

标签: vue.js vuejs2 frontend vue-component vuetify.js

默认情况下,Vuetify自动完成功能具有自定义的“向上”和“向下”箭头图标:

Down arrow by default Up arrow when input active

如何更改此图标以在其他事件(活动或不活动)中搜索图标并获得此视图:

Text field example search bar

此示例使用v-text-field创建:

代码:

<v-text-field
  flat
  solo
  hide-details
  append-icon="search"
  label="Search..."
  color="#000000"
></v-text-field>

我厌倦了附加图标来验证自动完成组件,但是无法删除默认的上下行。

代码:

<v-autocomplete
  v-model="select"
  :append-outer-icon="search ? 'search' : 'search'"
  label="Search..."
  type="text"
  :loading="loading"
  :items="items"
  :search-input.sync="search"
  cache-items
  class=""
  flat
  hide-no-data
  hide-details
  @click:append-outer="startSearch"
></v-autocomplete>

结果:

enter image description here

一般如何将箭头图标更改为搜索图标并使其可点击以进行搜索?

2 个答案:

答案 0 :(得分:3)

使用append-icon=""并将其设置为空白

这里是例子。

如果您想使用回调函数附加图标,请使用append-icon-cb="()"

https://codepen.io/anon/pen/WqXVWj?&editable=true&editors=101

答案 1 :(得分:0)

如果您不想保留

append-icon=""

空白 您可以使用

append-icon="false"