Vue前端项目 |
您所在的位置：网站首页 › 鸿业左侧菜单栏 › Vue前端项目 |
Vue前端项目
|
目录 1、修改侧边栏组件 2、滚动条样式 3、导入并使用组件 实现效果：
NavMenu 的详细用法： https://element.eleme.cn/#/zh-CN/component/menu 1、修改侧边栏组件为侧边栏组件，添加导航菜单 侧边栏组件： src / layout / components / Sidebar / index.vue 导航一 分组一 选项1 选项2 选项3 选项4 选项1 导航二 导航三 导航四 导航四 导航四 导航四 导航四 导航四 导航四 导航四 导航12 export default { data() { return {} }, components: {}, methods: { handleOpen(key, keyPath) { console.log(key, keyPath) }, handleClose(key, keyPath) { console.log(key, keyPath) } }, computed: {} } 2、滚动条样式在上一步我们已经使用了滚动条样式， 接下来我们将 定义滚动条样式 在 src / assets / styles / sidebar.scss 中新增滚动条样式 位置在 .sidebar-container 里边定义 .scrollbar-wrapper { height: 100%; overflow-x: hidden !important; } 3、导入并使用组件 import { Scrollbar, Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui' Vue.use(Scrollbar) Vue.use(Menu) Vue.use(Submenu) Vue.use(MenuItem) Vue.use(MenuItemGroup)
|
【本文地址】
今日新闻 |
推荐新闻 |