Vue EasyUI 菜單

2020-06-24 11:47 更新

菜單( Menu )通常用于上下文菜單。 菜單( Menu )是創(chuàng)建其他菜單組件的基礎(chǔ)組件。 菜單( Menu )也能用于導(dǎo)航和執(zhí)行命令。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
menuCls string 菜單樣式類。 null
menuStyle Object 菜單內(nèi)聯(lián)樣式。 null
menuWidth number, string 菜單寬度。 null
inline boolean 為True時,保留在其父元素中,false時位于所有元素之上。 false
noline boolean 是否在菜單上顯示垂直線。 false
duration number 以毫秒為單位定義持續(xù)時間,在鼠標(biāo)離開菜單時隱藏。 100

事件列表

名稱 參數(shù) 作用描述
itemClick value 單擊菜單項時觸發(fā)。

方法列表

名稱 參數(shù) 返回值 作用描述
findItem value MenuItem 細(xì)選項菜單組件。
show left, top void 顯示菜單組件。
showContextMenu left, top void 將菜單組件顯示為contextmenu。
showAt target,  align void 顯示菜單組件并對齊到指定的元素?!癮lign”參數(shù)值可以是 'left', 'right'。

注:
- 繼承: None 。

使用方法

  • 通過標(biāo)記創(chuàng)建菜單( Menu )。并在菜單( Menu )中通過標(biāo)記創(chuàng)建若干個菜單項( MenuItem )。
  • 在每個菜單項( MenuItem )中都可以通過標(biāo)記創(chuàng)建一個含有若干個菜單項( MenuItem )的子菜單( SubMemu )。
  • 請認(rèn)真參考以下實(shí)例,嚴(yán)謹(jǐn)遵循使用規(guī)范。

<Menu :inline="true" @itemClick="onItemClick($event)">
    <MenuItem value="new" text="New"></MenuItem>
    <MenuItem text="Open">
        <SubMenu>
            <MenuItem value="word" text="Word"></MenuItem>
            <MenuItem value="excel" text="Excel"></MenuItem>
            <MenuItem value="ppt" text="PowerPoint"></MenuItem>
        </SubMenu>
    </MenuItem>
    <MenuItem value="save" text="Save" iconCls="icon-save"></MenuItem>
    <MenuItem value="print" text="Print" iconCls="icon-print" :disabled="true"></MenuItem>
    <Menu-sep></Menu-sep>
    <MenuItem value="exit" text="Exit"></MenuItem>
</Menu>

子菜單( SubMemu )

  • 屬性列表
名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
menuCls string 菜單樣式類。 null
menuStyle Object 菜單內(nèi)聯(lián)樣式。 null
menuWidth any 菜單寬度。 null

注:
- 繼承: None 。

菜單項( MenuItem )

  • 屬性列表
名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
value any 綁定到菜單項的值。 null
text string 菜單項文本。 null
disabled boolean 是否禁用菜單項。 false
iconCls string 用于在菜單項上顯示16x16圖標(biāo)的CSS類。 null

注:
- 繼承: None 。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號