elementui侧边导航栏,element菜单栏
这篇文章主要为大家详细介绍了某视频剪辑软件元素-用户界面实现头部导航栏组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素-用户界面实现头部导航栏组件具体代码，供大家参考，具体内容如下
话不多说，先上一张效果图：
这是一个头部导航栏，网站最常见的一个功能，鼠标点击切换不同界面，样式跟随。
首先就是下载元素-用户界面框架
新公共管理安装元素-用户界面
在主页。射流研究…文件里面全局引入这个用户界面框架
然后就是在app.vue文件里面注册这个顶端组件
这是用某视频剪辑软件和"饿了么"来实现的头部导航栏，看一下代码：
模板
div class=header
div class=img
img src= @/assets/image/index/logo。png alt=
/div
埃尔菜单
：默认-活动=这个.$route.path
el菜单演示
模式=水平
@select=handleSelect
路由器
background-color=#fff
text-color=#333
active-text-color=#0084ff
style=flex:1
el-menu-item v-for=(item，I)in navList :key= I :index= item。名称
模板槽=标题
span {{ item.navItem }}/span
/模板
/El-菜单项
/el-menu
/div
/模板
脚本
导出默认值{
data() {
返回{
导航列表：[
{名称：/home ，导航：首页},
{名称：/家庭/教室，导航：我的班级},
{名称：/家庭/课程，导航：我的课程},
{姓名：/家庭/考试，导航：创建考试},
{姓名：/家庭/实践，导航：创建练习},
]
}
},
方法：{
handleSelect(key，keyPath) {
}
}
}
/脚本
风格。埃尔-菜单项{
字体大小：18px！重要；
}。埃尔-菜单项。处于活动状态{
颜色：#ea5b2c！重要；
字体大小：18px！重要；
}。El-菜单-水平。El菜单项目。处于活动状态{
border-bottom: 2px solid #ea5b2c！重要；
}
/风格
样式lang=scss 范围。标题{
显示器：flex
宽度：100%;img {
背景：# ffffff
边框-底部：实心1px # e6e6e6
img {
高度：50px
填充：10px
}
}
}
/风格
能力有限，写的不好的地方还望路过的大佬指点一二。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。