vue頂部菜單欄實(shí)現(xiàn)小結(jié)
參考:
使用element-ui的el-menu導(dǎo)航選中后刷新頁(yè)面保持當(dāng)前選中狀態(tài)
效果圖1:
<!--home--> <template> <div class="homeContainer"> <div style=" display: flex; height: 60px; line-height: 60px; align-items: center; " > <div style=" display: flex; align-items: center; margin-left: 30px; cursor: pointer; " > <img src="http://rivermap-file.oss-cn-hangzhou.aliyuncs.com/lj/WeServerManage/logo-weserver.png" style="width: 40px; height: 40px; margin-right: 10px" /> <div>xxx平臺(tái)</div> </div> <div style=" display: flex; align-items: center; margin-left: auto; margin-right: 20px; " > <a rel="external nofollow" rel="external nofollow" target="_blank"> <li>外鏈百度</li> </a> <li>菜單1</li> <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png " style="margin: 0 5px" ></el-avatar> <li>admin</li> </div> </div> </div> </template> <script> export default { name: "home", props: {}, data() { return {}; }, methods: {}, }; </script> <style lang="scss" scoped> .homeContainer { background-color: #017bc4; li { list-style-type: none; padding: 0 10px; cursor: pointer; &:hover { background-color: rgba(0, 0, 0, 0.124); } } } </style>
效果圖2:
<!--home--> <template> <div class="homeContainer"> <div style=" display: flex; height: 60px; line-height: 60px; align-items: center; " > <div style=" display: flex; align-items: center; margin-left: 30px; cursor: pointer; " > <img src="http://rivermap-file.oss-cn-hangzhou.aliyuncs.com/lj/WeServerManage/logo-weserver.png" style="width: 40px; height: 40px; margin-right: 10px" /> <div>xxx平臺(tái)</div> </div> <el-menu default-active="2-4-2" mode="horizontal" background-color="#017bc4" text-color="white" active-text-color="orange" style="margin-left: 30px" > <el-menu-item index="1">首頁(yè)</el-menu-item> <el-submenu index="2"> <template slot="title">測(cè)試</template> <el-menu-item index="2-1">選項(xiàng)1</el-menu-item> <el-menu-item index="2-2">選項(xiàng)2</el-menu-item> <el-menu-item index="2-3">選項(xiàng)3</el-menu-item> <el-submenu index="2-4"> <template slot="title">選項(xiàng)4</template> <el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item> <el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item> <el-menu-item index="2-4-3">選項(xiàng)3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> </el-menu> <div class="header_right"> <a rel="external nofollow" rel="external nofollow" target="_blank"> <li>外鏈百度</li> </a> <li>菜單1</li> <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png " style="margin: 0 5px" ></el-avatar> <li>admin</li> </div> </div> </div> </template> <script> export default { name: "home", props: {}, data() { return { activeIndex2: "1", }; }, methods: {}, }; </script> <style> /* 取消過(guò)渡效果 */ .el-menu-item { transition-duration: 0s; } </style> <style lang="scss" scoped> .homeContainer { background-color: #017bc4; .header_right { display: flex; align-items: center; margin-left: auto; margin-right: 20px; li { list-style-type: none; padding: 0 10px; cursor: pointer; &:hover { background-color: rgba(0, 0, 0, 0.205); } } } } </style>
到此這篇關(guān)于vue頂部菜單欄實(shí)現(xiàn)小結(jié)的文章就介紹到這了,更多相關(guān)vue頂部菜單欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue實(shí)現(xiàn)右鍵菜單欄
- vue+el-menu實(shí)現(xiàn)菜單欄無(wú)限多層級(jí)分類(lèi)
- 如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)側(cè)邊菜單欄
- vue如何實(shí)現(xiàn)自定義底部菜單欄
- vue列表單項(xiàng)展開(kāi)收縮功能之this.$refs的詳解
- Vue2(三)實(shí)現(xiàn)子菜單展開(kāi)收縮,帶動(dòng)畫(huà)效果實(shí)現(xiàn)方法
- vuejs實(shí)現(xiàn)折疊面板展開(kāi)收縮動(dòng)畫(huà)效果
- vue2左側(cè)菜單欄收縮展開(kāi)功能
相關(guān)文章
webpack項(xiàng)目調(diào)試以及獨(dú)立打包配置文件的方法
下面小編就為大家分享一篇webpack項(xiàng)目調(diào)試以及獨(dú)立打包配置文件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02解決Vue.js Devtools未檢測(cè)到Vue實(shí)例的問(wèn)題
在開(kāi)發(fā)Vue.js應(yīng)用時(shí),Vue.js Devtools是一個(gè)不可或缺的調(diào)試工具,然而,有時(shí)我們可能會(huì)遇到“Vue.js not detected”的提示,這意味著Vue.js Devtools未能成功識(shí)別和連接到我們的Vue應(yīng)用,本文將詳細(xì)解析這個(gè)問(wèn)題,并提供相應(yīng)的解決步驟與代碼示例,需要的朋友可以參考下2024-01-01淺談Vue數(shù)據(jù)響應(yīng)思路之?dāng)?shù)組
這篇文章主要介紹了淺談Vue數(shù)據(jù)響應(yīng)思路之?dāng)?shù)組,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11vue項(xiàng)目base64字符串轉(zhuǎn)圖片的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目base64字符串轉(zhuǎn)圖片的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07vue axios sessionID每次請(qǐng)求都不同的原因以及修改方式
這篇文章主要介紹了vue axios sessionID每次請(qǐng)求都不同的原因以及修改方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12關(guān)于vue?src路徑動(dòng)態(tài)拼接的小知識(shí)
這篇文章主要介紹了vue?src路徑動(dòng)態(tài)拼接的小知識(shí),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2022-04-04vue如何利用store實(shí)現(xiàn)兩個(gè)平行組件間的傳值
這篇文章主要介紹了vue如何利用store實(shí)現(xiàn)兩個(gè)平行組件間的傳值,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04