vue+element-ui實(shí)現(xiàn)頭部導(dǎo)航欄組件
本文實(shí)例為大家分享了vue+element-ui實(shí)現(xiàn)頭部導(dǎo)航欄組件具體代碼,供大家參考,具體內(nèi)容如下
話不多說,先上一張效果圖:
這是一個(gè)頭部導(dǎo)航欄,網(wǎng)站最常見的一個(gè)功能,鼠標(biāo)點(diǎn)擊切換不同界面,樣式跟隨。
首先就是下載element-ui框架
npm install element-ui
在main.js文件里面全局引入這個(gè)ui框架
然后就是在app.vue文件里面注冊(cè)這個(gè)top組件
這是用vue和“餓了么”來實(shí)現(xiàn)的頭部導(dǎo)航欄,看一下代碼:
<template> <div class="header"> <div class="img"> <img src="@/assets/image/index/logo.png" alt=""> </div> <el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" router 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.name"> <template slot="title"> <span> {{ item.navItem }}</span> </template> </el-menu-item> </el-menu> </div> </template> <script> export default { data() { return { navList:[ {name:'/home', navItem:'首頁(yè)'}, {name:'/home/classRoom',navItem:'我的班級(jí)'}, {name:'/home/course',navItem:'我的課程'}, {name:'/home/exam',navItem:'創(chuàng)建考試'}, {name:'/home/practice',navItem:'創(chuàng)建練習(xí)'}, ] } }, methods: { handleSelect(key, keyPath) { } } } </script> <style> .el-menu-item{ font-size: 18px !important; } .el-menu-item.is-active { color: #ea5b2c !important; font-size: 18px !important; } .el-menu--horizontal>.el-menu-item.is-active { border-bottom: 2px solid #ea5b2c !important; } </style> <style lang="scss" scoped> .header { display: flex; width: 100%; .img { background: #ffffff; border-bottom: solid 1px #e6e6e6; img { height:50px; padding:10px; } } } </style>
能力有限,寫的不好的地方還望路過的大佬指點(diǎn)一二。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
通過命令行創(chuàng)建vue項(xiàng)目的方法
這篇文章主要介紹了通過命令創(chuàng)建vue項(xiàng)目的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07使用vue編寫h5公眾號(hào)跳轉(zhuǎn)小程序的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用vue編寫h5公眾號(hào)跳轉(zhuǎn)小程序,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11vue移動(dòng)端時(shí)彈出側(cè)邊抽屜菜單效果
這篇文章主要介紹了vue移動(dòng)端時(shí)彈出側(cè)邊抽屜菜單,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06Vue局部組件數(shù)據(jù)共享Vue.observable()的使用
隨著組件的細(xì)化,就會(huì)遇到多組件狀態(tài)共享的情況,今天我們介紹的是 vue.js 2.6 新增加的 Observable API ,通過使用這個(gè) api 我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況,感興趣的可以了解一下2021-06-06解決element-ui table設(shè)置列fixed時(shí)X軸滾動(dòng)條無(wú)法拖動(dòng)問題
這篇文章主要介紹了解決element-ui table設(shè)置列fixed時(shí)X軸滾動(dòng)條無(wú)法拖動(dòng)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue3.x中useRouter()執(zhí)行后返回值是undefined問題解決
這篇文章主要給大家介紹了關(guān)于vue3.x中useRouter()執(zhí)行后返回值是undefined問題的解決方法,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3.x具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09vue3的ref,computed,reactive和toRefs你都了解嗎
這篇文章主要為大家詳細(xì)介紹了vue3的ref,computed,reactive和toRefs,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03vue+echarts動(dòng)態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式
這篇文章主要介紹了vue+echarts動(dòng)態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06