今天做的是實現點擊input框時彈出下拉選擇菜單,點擊下拉列表中要搜尋將數據賦值給input框,然後再加個清楚按鈕,當input框沒有數據的時候隱藏,當有數據輸入的時候就顯示改功能,下面是功能演示。
工具/原料
VUE
方法/步驟
首先我們先來設計input框加搜尋按鈕,這裡我們直接用字體圖標來實現, 我引用了bootstrap和element-ui的字體圖標,所以直接在i標籤中加入對應的圖標樣式即可。
接著我們為這幾個元素設置樣式,這裡我們把input自帶的邊框給清除了,包括獲取焦點之後的邊框也給清除了,為了避免刪除按鈕因隱藏再顯示而導致input框有長度變化,所以這裡我們就用了個相對/絕對位置將刪除按鈕移到了input框中,這樣就不會出現一下長一下短的問題了,這樣我們就得到了一個帶刪除按鈕的搜尋框。
當然還有一種方法就是我們在刪除按鈕外再加個div,然後給個寬高,這樣再隱藏就不會收縮了,可以給刪除按鈕占個位,同樣可以達到效果的。
實現數據清除功能,這個只要在input中綁定了v-mode數據,在刪除按鈕上綁定一個click點擊事件,當點擊按鈕時就將input框中的數據清空,這時我們只要點擊刪除按鈕就可以清除input中的數據了。
但是沒數據的時候刪除按鈕放那裡是不是很難看,我要實現有數據時才顯示,沒數據時就隱藏的效果,這時我們就要對searchpro進行判斷了,當沒有數據時就隱藏,有數據時就顯示,這裡我們用到v-if的功能。
<i class="el-icon-close clear_x" v-if="searchpro == '' ? false : true" @click="cleardata"></i>
這時我們已經實現了簡單的input刪除數據功能,接著我還想要有提示,當input獲取焦點時我就彈出下拉框,顯示最近的搜尋數據,提高用戶體驗,所以這裡我們在添加一個列表選項。
因為我們要在input框下顯示,所以這裡我用到的相對/絕對定位來放置該元素,這個有個特點因為引用了bootstrap樣式,所以底部會多出10px的外邊框樣式,這樣需要手動清除下,隱藏顯示我們直接用css樣式搞定,將列表默認隱藏,當上層元素獲取焦點的時候將該元素的樣式顯示出來(重點是將獲取焦點放置上層元素)。
而li標籤我們只要將其點擊時的樣式更改下,這樣當我們選中某個樣式時就可以與其他樣式進行區分了,這裡我們用黃色只是為了更好的區分元素之間的關係,當我們把樣式調好之後在改成自己需要的樣式即可。
最後就是賦值了,當我選中列表中的元素時我要把這個數據填充到input框中去,這時我們就要給列表添加點擊事件@click="select(pro),通過select方法,最後就是搜尋按鈕的實現了,這樣要跟後台交互獲取數據(當然也可以在點擊列表中的數據時直接提交搜尋,這樣會更簡單便捷,就看個人需求了)。