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

Posted 2023-02-22

【中文标题】如何删除 vuetify 自动完成组件默认图标

【英文标题】：How to remove vuetify autocomplete component default icon

【发布时间】：2019-11-10 01:39:32

【问题描述】：

Vuetify 自动完成默认有自定义的“向上”和“向下”箭头图标：

如何更改此图标以在其他事件（活动或非活动）中搜索图标并获取此视图：

这个例子是使用v-text-field创建的：

代码：

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

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

代码：

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

结果：

一般来说，我如何将箭头图标更改为搜索图标并将其设置为可点击搜索？

【问题讨论】：

你使用的是哪个版本的 vuetify 框架？

版本0.5.5@skribe

哇哦。更高版本的框架> 1.0 我相信支持通过传递道具来更改图标。如果更改框架版本不是一种选择（很多事情已经改变并且会中断），那么您可以尝试Vue.prototype.$vuetify.icons = dropdown: 'search'; 但我不确定这是否可行。

我将它与nuxt.js 框架一起使用

否则在过去为了处理类似的问题，我扩展了组件以按照自己的方式自定义它。

【参考方案1】：

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

这是示例。

如果你想添加带有回调函数的图标，请使用append-icon-cb="()"

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

【讨论】：

我需要搜索栏内的搜索图标并使其可点击。它可用吗？ @ßiansor Å。奥美罗

@AndreasHunter 是的，我在 codepen 中编辑了我的示例，请告诉我。

append-icon-cb="()" 现已折旧。使用 v-on:click 事件，如 @click:append="()"