And*_*ter 6 frontend vue.js vue-component vuejs2 vuetify.js
默认情况下,Vuetify 自动完成具有自定义的“向上”和“向下”箭头图标:
如何更改此图标以在其他事件(活动或非活动)中搜索图标并获得此视图:
此示例使用v-text-field以下方法创建:
代码:
<v-text-field
flat
solo
hide-details
append-icon="search"
label="Search..."
color="#000000"
></v-text-field>
Run Code Online (Sandbox Code Playgroud)
我累了将图标附加到 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>
Run Code Online (Sandbox Code Playgroud)
结果:
一般来说,我如何将箭头图标更改为搜索图标并将其设置为可点击以进行搜索?
使用append-icon=""并将其设置为空白
这是示例。
如果要附加带有回调函数的图标,请使用 append-icon-cb="()"
https://codepen.io/anon/pen/WqXVWj?&editable=true&editors=101
| 归档时间: |
|
| 查看次数: |
5907 次 |
| 最近记录: |