Vue EasyUI 搜索框

搜索框（ SearchBox ）用于提示用戶輸入搜索值。它可以結(jié)合一個(gè)菜單，允許用戶選擇不同的搜索類別。當(dāng)用戶按下 ENTER 鍵或者點(diǎn)擊組件右側(cè)的搜索按鈕時(shí)，搜索動(dòng)作將被執(zhí)行。

屬性列表

事件列表

注：
- 繼承： InputBase 。

使用方法

搜索框（ SearchBox ）的創(chuàng)建十分簡單，僅需要以 HTML 標(biāo)記創(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="運(yùn)動(dòng)新聞" iconCls="icon-man"></MenuItem>
    </Menu>


</SearchBox>

注：
- 1-4行中包含了輸入框與搜索按鈕及其搜索事件。
- 6-9行中包含了一個(gè)清空輸入框的點(diǎn)擊事件。
- 11-14行創(chuàng)建了一個(gè)搜索提示菜單。

• 參考圖例：