AntDesignVue中Menu菜單怎么用

這篇文章將為大家詳細(xì)講解有關(guān)AntDesign Vue中Menu菜單怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

10年積累的網(wǎng)站制作、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有都勻免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

常用屬性

屬性	說(shuō)明	默認(rèn)值
mode	菜單類(lèi)型，現(xiàn)在支持垂直、水平、和內(nèi)嵌模式三種	`vertical`
inlineCollapsed	`inline` 時(shí)菜單是否收起狀態(tài)
theme	主題顏色(`light`/`dark`)	`light`
openKeys(.sync)	當(dāng)前展開(kāi)的 `SubMenu` 菜單項(xiàng) `key` 數(shù)組
defaultOpenKeys	初始展開(kāi)的 `SubMenu` 菜單項(xiàng) `key` 數(shù)組
selectedKeys(v-model)	當(dāng)前選中的菜單項(xiàng) `key` 數(shù)組
defaultSelectedKeys	初始選中的菜單項(xiàng) `key` 數(shù)組

說(shuō)明
defaultSelectedKeys 是默認(rèn)選中的key（a-menu-item上綁定的key），被選中會(huì)有高亮的顯示效果；selectedKeys 也是一樣的作用，不要同時(shí)使用，區(qū)別在于如果只希望指定一個(gè)初始化的菜單選項(xiàng)就使用defaultSelectedKeys，如果需要通過(guò)自己修改數(shù)據(jù)來(lái)選中菜單的選中項(xiàng)就使用selectedKeys。

（openKeys和defaultOpenKeys也是同理）

常用事件

openChange 是Menu的事件，SubMenu 展開(kāi)/關(guān)閉的回調(diào)

遞歸嵌套多級(jí)菜單

若只有兩級(jí)菜單則直接使用v-for和v-if指令即可完成；若菜單級(jí)數(shù)≥3則需要使用函數(shù)式組件。具體原因官網(wǎng)已經(jīng)做了說(shuō)明：

Before v2.0, 因組件內(nèi)部會(huì)動(dòng)態(tài)更改a-sub-menu的屬性，如果拆分成單文件，無(wú)法將屬性?huà)燧d到a-sub-menu上，你需要自行聲明屬性并掛載。為了方便，避免屬性的聲明，我們推薦使用函數(shù)式組件。

代碼
App.vue (測(cè)試就隨便在App.vue里寫(xiě)了)

這里省略了router配置，相信在座的各位也會(huì)?。ú粫?huì)的底下留言，包教包會(huì)?。?/p>

如果vue報(bào)編譯錯(cuò)誤You are using the runtime-only build of Vue，可以在vue的配置文件里加一行runtimeCompiler: true，重新運(yùn)行即可。

如果點(diǎn)擊同一個(gè)菜單報(bào)錯(cuò)了NavigationDuplicated: Avoided redundant navigation to current location，需要修改下Router設(shè)置（router/index.js）：

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

效果

AntDesign Vue中Menu菜單怎么用

自動(dòng)渲染多級(jí)嵌套菜單；刷新會(huì)保存選中的菜單；點(diǎn)擊菜單，收起其他展開(kāi)的所有菜單。

關(guān)于“AntDesign Vue中Menu菜單怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

新聞標(biāo)題：AntDesignVue中Menu菜單怎么用
分享URL：http://m.jiaotiyi.com/article/ijgsge.html

網(wǎng)站建設(shè)知識(shí)

AntDesignVue中Menu菜單怎么用

常用屬性

常用事件

遞歸嵌套多級(jí)菜單

效果

其他資訊