elmentUi顶部导航栏
时间: 2023-09-03 13:14:27 浏览: 56
要创建一个Element UI的顶部导航栏,你可以使用`el-menu`组件和`mode`属性设置为`horizontal`来实现。以下是一个简单的示例代码:
首先,在你的Vue组件中引入Element UI的NavMenu组件和相关样式:
```javascript
import { Menu, MenuItem } from 'element-ui';
import 'element-ui/lib/theme-chalk/menu.css';
import 'element-ui/lib/theme-chalk/menu-item.css';
```
然后,在你的Vue组件中注册NavMenu组件:
```javascript
export default {
components: {
'el-menu': Menu,
'el-menu-item': MenuItem,
},
// ...
}
```
接下来,在你的模板中使用NavMenu组件创建顶部导航栏:
```html
<template>
<el-menu mode="horizontal">
<el-menu-item index="1">Home</el-menu-item>
<el-menu-item index="2">About</el-menu-item>
<el-menu-item index="3">Contact</el-menu-item>
</el-menu>
</template>
```
在上述示例中,我们使用了`el-menu`组件创建一个水平导航栏。通过`el-menu-item`组件添加菜单项。
你可以根据自己的需求和设计进行样式和布局的调整。请确保按照官方文档中提供的正确方式引入和使用Element UI组件和样式。