搜索框( SearchBox )用于提示用戶輸入搜索值。它可以結合一個菜單,允許用戶選擇不同的搜索類別。當用戶按下 ENTER 鍵或者點擊組件右側的搜索按鈕時,搜索動作將被執(zhí)行。
名稱 | 數(shù)據(jù)類型 | 作用描述 | 默認值 |
---|---|---|---|
value | string | 搜索字段值。 | null |
category | string | 從菜單項檢索類別值。 | null |
menuAlign | string | 菜單對齊??蛇x值:'left', 'right'。 | left |
buttonAlign | string | 搜索按鈕對齊,可選值:'left', 'right'。 | right |
buttonlconcls | string | 搜索按鈕圖標樣式類。 | icon-search |
名稱 | 參數(shù) | 作用描述 |
---|---|---|
search | value, category | 搜索時觸發(fā)。 |
注:
- 繼承: InputBase 。
搜索框( SearchBox )的創(chuàng)建十分簡單,僅需要以 HTML 標記創(chuàng)建即可。
<SearchBox style="width:300px"
placeholder="在這里輸入"
v-model="value"
@search="onSearch($event)">
<Addon>
<span v-if="value" class="textbox-icon icon-clear" title="Clear value" @click="value=null">
</span>
</Addon>
<Menu>
<MenuItem value="all" text="所有新聞" iconCls="icon-ok"></MenuItem>
<MenuItem value="sports" text="運動新聞" iconCls="icon-man"></MenuItem>
</Menu>
</SearchBox>
注:
- 1-4行中包含了輸入框與搜索按鈕及其搜索事件。
- 6-9行中包含了一個清空輸入框的點擊事件。
- 11-14行創(chuàng)建了一個搜索提示菜單。
更多建議: