Vue Vant 實現頂部關鍵字搜尋欄

2022-06-23 16:21:17 字數 901 閱讀 6236

:

<

section

class

="city-search"

>

<

van-icon

class

="search-icon"

name

="search"

/>

<

input

placeholder

="請輸入城市關鍵字"

v-model

="keyword"

>

<

van-icon

class

="clear-icon"

name

="clear"

v-show

="keyword"

@click

="clearsearchinput"

/>

section

>

此時效果圖:

很明顯需要新增 css 美化。

css 如下:

.city-search input .clear-icon }
新增方法:

data() 

},methods:

}

此時介面如下:

我們可以看到,已經是一個相對美觀的佈局了。