閱讀(1.6k) 書簽贊(0) 我要糾錯(cuò)

Angular EasyUI 菜單

2020-06-24 17:28 更新

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

屬性列表

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

字段列表

名稱	類型	作用描述
subItems	QueryList<MenuItemComponent>	所有子菜單項(xiàng)。

事件列表

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

方法列表

名稱	參數(shù)	返回值	作用描述
findItem	value:any	MenuItemComponent	細(xì)選項(xiàng)菜單組件。
show	left:number,top:number	void	顯示菜單組件。
showContextMenu	left:number,top:number	void	將菜單組件顯示為contextmenu。
showAt	target:HTMLElement, align:string='left'	void	顯示菜單組件并對(duì)齊到指定的元素。“align”參數(shù)值可以是 'left', 'right'。

注：
- 繼承： None 。
- 選擇器： eui-menu 。

使用方法

<eui-menu [inline]="true" (itemClick)="onItemClick($event)">
    <eui-menu-item value="new" text="New"></eui-menu-item>
    <eui-menu-item text="Open">
        <eui-submenu>
            <eui-menu-item value="word" text="Word"></eui-menu-item>
            <eui-menu-item value="excel" text="Excel"></eui-menu-item>
            <eui-menu-item value="ppt" text="PowerPoint"></eui-menu-item>
        </eui-submenu>
    </eui-menu-item>
    <eui-menu-item value="save" text="Save" iconCls="icon-save"></eui-menu-item>
    <eui-menu-item value="print" text="Print" iconCls="icon-print" [disabled]="true"></eui-menu-item>
    <eui-menu-sep></eui-menu-sep>
    <eui-menu-item value="exit" text="Exit"></eui-menu-item>
</eui-menu>

以上內(nèi)容是否對(duì)您有幫助：

在文檔使用的過程中是否遇到以下問題：