Vue+Vant實(shí)現(xiàn)頂部搜索欄
更新時(shí)間：2021年06月07日 13:56:59 作者：在奮斗的大道
這篇文章主要為大家詳細(xì)介紹了Vue+Vant實(shí)現(xiàn)頂部搜索欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue+Vant實(shí)現(xiàn)頂部搜索欄的具體代碼，供大家參考，具體內(nèi)容如下
搜索欄組件源碼(SearchBar.vue)
<template>
<section class="city-search">
<van-icon class="search-icon" name="search" />
<input placeholder="在此輸入檢索關(guān)鍵字" v-model="KeyWord">
<van-icon class="clear-icon" name="clear" v-show="KeyWord" @click="clearSearchInput" />
</section>
</template>
<script>
export default {
data() {
return {
KeyWord: '',
}
},
methods: {
clearSearchInput() {
this.KeyWord = '';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.city-search {
background-color: #F7F8FA;
display: flex;
justify-content: flex-start;
align-items: center;
height: 2.3rem;
width: 94vw;
margin: 2vw 4vw;
border-radius: 8px;
}
.search-icon {
margin-left: 5px;
}
input {
margin: 0 1.5vw;
background-color: #F7F8FA;
border: 0px;
font-size: 14px;
flex: 1
}
.clear-icon { color: #999;}
</style>
其他組件依賴(lài)引用檢索組件
首頁(yè)引用搜索組件:
<template>
<div>
<search></search>
首頁(yè)
</div>
</template>
<script>
import Search from '@/components/SearchBar'
export default {
name: "home",
components: {
'search': Search,
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
效果截圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue axios 跨域請(qǐng)求無(wú)法帶上cookie的解決
這篇文章主要介紹了Vue axios 跨域請(qǐng)求無(wú)法帶上cookie的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue-cli項(xiàng)目修改文件熱重載失效的解決方法
今天小編就為大家分享一篇vue-cli項(xiàng)目修改文件熱重載失效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3.3?+?TS4構(gòu)建實(shí)現(xiàn)ElementPlus功能的組件庫(kù)示例
Vue.js?是目前最盛行的前端框架之一,而?TypeScript?則是一種靜態(tài)類(lèi)型言語(yǔ),它能夠讓開(kāi)發(fā)人員在編寫(xiě)代碼時(shí)愈加平安和高效,本文將引見(jiàn)如何運(yùn)用?Vue.js?3.3?和?TypeScript?4?構(gòu)建一個(gè)自主打造媲美?ElementPlus?的組件庫(kù)2023-10-10
Vue自定義el-table表格表頭高度的多種實(shí)現(xiàn)方法
在Vue項(xiàng)目中,使用Element?UI的el-table組件可以輕松創(chuàng)建功能豐富的表格,然而,默認(rèn)情況下,el-table的表頭高度是固定的,本文將詳細(xì)介紹如何自定義el-table表頭的高度,提供多種實(shí)現(xiàn)方法,需要的朋友可以參考下2024-10-10
仿ElementUI實(shí)現(xiàn)一個(gè)Form表單的實(shí)現(xiàn)代碼
這篇文章主要介紹了仿ElementUI實(shí)現(xiàn)一個(gè)Form表單的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
v-model通常用于input的雙向數(shù)據(jù)綁定,它并不會(huì)向子組件傳遞數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue2和vue3組件v-model區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue如何預(yù)覽后端傳來(lái)的二進(jìn)制圖片
這篇文章主要介紹了vue如何預(yù)覽后端傳來(lái)的二進(jìn)制圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue?下載文檔亂碼的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue使用自定義指令實(shí)現(xiàn)一鍵復(fù)制功能
在Vue中,通過(guò)自定義指令v-copy和document.execCommand方法,可以實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪貼板的功能,適用于處理長(zhǎng)文本或多行文本的復(fù)制需求,而readonly屬性可避免內(nèi)容被修改和移動(dòng)設(shè)備上的虛擬鍵盤(pán)干擾,感興趣的朋友一起看看吧2024-09-09
Vue JS對(duì)URL網(wǎng)址進(jìn)行編碼解碼,轉(zhuǎn)換為對(duì)象方式
這篇文章主要介紹了Vue JS對(duì)URL網(wǎng)址進(jìn)行編碼解碼,轉(zhuǎn)換為對(duì)象方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03