5）導航和菜單

導航菜單是相對比較困難的一塊，如何設定頂端導航和側邊欄

對vue前端是比較複雜的，在工作中我們往往通過後端擷取使用者的權限和所有菜單

然後通過前端予以展示，看下去

1、菜單和子菜單

<Menu node="horizontal" theme="dark" active-name="1"> ... 主菜單 ... </Menu>
<Submenu name=3> ... 子菜單 ... </Submenu>
<MenuGroup title="use"> ... 菜單組 ... </Menugroup>
<MenuItem name="1" to="component"> ... 菜單項 ... </MenuItem>           

mode ==> 設定菜單模式{horizontal 水準,vertical 垂直}
theme ==> 設定菜單背景色 {light,dark,parmary}
title ==> 設定菜單組标題
to ==> 跳轉連結, 支援vue-router對象
active-name ==> 通過名字設定預設選擇的子菜單
open-names ==> 通過名字設定預設展開的子菜單
accordion ==> 屬性：設定為手風琴模式
@on-select ==> 監聽事件,選擇MenuItem時觸發
@on-open-change ==> 監聽事件,展開/收起子菜單時觸發           

2、側邊欄

<Sider ref="sidebar" class="sidebar" hide-trigger collapsible width="240" 
  :collapsed-width="80" v-model.trim="isCollapsed">           

說明:

ref="sidebar"           定義特殊屬性,通路底層Dom對象this.$refs.sidebar

class="sidebar"         指定樣式類

width="240"             指定左側欄寬度

:collapsed-width="80"   左側欄折疊寬帶

v-model.trip="isCollapsed"   綁定資料屬性, 控制折疊開關

hide-trigger      隐藏預設的折疊開關

  collapsible       可折疊的

3、表格

<Tabs value="name1"> ... 标簽組 ... </Tabs>
<TabPane label="标簽一" name="name1">标簽一大内容</TabPane>           

value ==> 指定标簽<TabPane>中的name屬性,預設顯示标簽
type ==> 設定标簽類型,可以是{card/line}，預設是line
size ==> 設定标簽大小,可以是{small/large},僅在line類型有效
animated ==> 關閉标簽時的動畫效果
label ==> 設定标簽上的文字内容
name ==> 設定标簽的名字,與value相同
icon ==> 設定标簽左側的Logo
diabled ==> 屬性：禁用标簽
closeable ==> 屬性：可關閉，僅在card類型有效           

4、分割線

水準分割線 <Divider>

帶标題的分割線 <Divider> With Text </Divider>

分割線的樣式 <Divider dashed />

垂直分割線  <Divider type="vertical">

标題的位置定義 <Divider orientation="left"> Left Text </Divider>

5、告警資訊

<Alter type="success"> Asuccessprompt </Alter>

type ==> 告警資訊類型,可以是info/success/warning/error
show-icon ==> 根據類型，是否顯示圖示
closable ==> 顯示關閉按鈕
banner ==> 應用與頂層樣式，即不退出不可操作           

使用slot模式: <span slot="close"> No longer prompt </span>

==> desc 表示描述資訊
==> icon 自定義圖示
==> close 自定義關閉内容           

6、全局提示語

this.$Message.info('This is a info tip')

this.$Message.success('This is a success tip')

this.$Message.warning('This is a warning tip')

this.$Message.error(This is an error tip)

this.$Message.loading(args)

background: true,           === 背景色開關
  content: 'this message',    === 提示内容
  duration: 0,                === 顯示時間,0表示永久
  closable: ture              === 可以關閉
}           

7、全局提醒語

title: Notification title, === 提醒的大字标題
desc: 'this message',      === 提示主要内容
duration: 0                === 顯示時間,0表示永久
}