Day07--导航菜单的引入和使用
导航菜单的引入和使用NavMenu导航菜单修改Sidebar.vue中的代码<!-- 左侧边栏 --><template><div class="sidebar"><el-menudefault-active="2"class="left-menu"background-color="#304151"text-color="#bfcbd1"active-t
·
导航菜单的引入和使用
-
修改Sidebar.vue中的代码
<!-- 左侧边栏 --> <template> <div class="sidebar"> <el-menu default-active="2" class="left-menu" background-color="#304151" text-color="#bfcbd1" active-text-color="#409EFF"> <div class="menu"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</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" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </div> </el-menu> </div> </template> <script> export default { name: 'Sidebar' } </script> <style scoped lang="stylus"> .left-menu boder none user-select none .menu overflow hidden </style>
-
在 main.js 中引入所需要的组件
import { Button, Menu, Submenu, MenuItem } from 'element-ui' // 引入 element-ui 的 Button 组件 Vue.config.productionTip = false Vue.component(Button.name, Button) // 将 Button 挂载到 Vue 实例上 Vue.component(Menu.name, Menu) // 将 Menu 挂载到 Vue 实例上 Vue.component(Submenu.name, Submenu) // 将 Submenu 挂载到 Vue 实例上 Vue.component(MenuItem.name, MenuItem) // 将 MenuItem 挂载到 Vue 实例上
-
使用 npm run dev 运行项目,可以看到左侧导航菜单已经添加成功
项目仓库
更多推荐
已为社区贡献6条内容
所有评论(0)