Vue的ElMenu是一款非常實用的菜單組件。它使用簡單方便,支持多級菜單和子菜單的展開,可以快速實現一個美觀、實用的菜單。
下面是一個ElMenu的示例代碼,展示了如何通過Vue實現一個基本的二級菜單:
<template> <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>導航一</span> </template> <el-menu-item-group title="分組一"> <el-menu-item index="1-1">選項1</el-menu-item> <el-menu-item index="1-2">選項2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分組二"> <el-menu-item index="1-3">選項3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title"> <i class="el-icon-menu"></i> <span>選項4</span> </template> <el-menu-item index="1-4-1">選項4-1</el-menu-item> <el-menu-item index="1-4-2">選項4-2</el-menu-item> <el-menu-item index="1-4-3">選項4-3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">導航二</span> </el-menu-item> <el-menu-item index="3"> <i class="el-icon-menu"></i> <span slot="title">導航三</span> </el-menu-item> </el-menu> </template> <script> export default { methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script>
在這個示例中,我們通過設置default-active
來指定默認選中的菜單項。通過el-menu-item
和el-submenu
標簽來生成菜單項和子菜單。菜單項和子菜單都需要設置index
屬性,這個屬性可以在菜單項被選中時傳遞給事件處理器,用于標識選中的菜單項是哪一個。
除了default-active
屬性之外,還有很多其他的屬性可以設置,例如unique-opened
、collapse
、router
等,請參考官方文檔了解更多。
總之,Vue的ElMenu組件是一個非常實用的菜單組件,可以幫助我們輕松構建一個美觀、易用的菜單。
上一篇python 類引用函數
下一篇vue elment