vue頂部菜單欄實現(xiàn)小結(jié)
參考:
使用element-ui的el-menu導(dǎo)航選中后刷新頁面保持當(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平臺</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平臺</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">首頁</el-menu-item> <el-submenu index="2"> <template slot="title">測試</template> <el-menu-item index="2-1">選項1</el-menu-item> <el-menu-item index="2-2">選項2</el-menu-item> <el-menu-item index="2-3">選項3</el-menu-item> <el-submenu index="2-4"> <template slot="title">選項4</template> <el-menu-item index="2-4-1">選項1</el-menu-item> <el-menu-item index="2-4-2">選項2</el-menu-item> <el-menu-item index="2-4-3">選項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> /* 取消過渡效果 */ .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頂部菜單欄實現(xiàn)小結(jié)的文章就介紹到這了,更多相關(guān)vue頂部菜單欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
webpack項目調(diào)試以及獨立打包配置文件的方法
下面小編就為大家分享一篇webpack項目調(diào)試以及獨立打包配置文件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02淺談Vue數(shù)據(jù)響應(yīng)思路之?dāng)?shù)組
這篇文章主要介紹了淺談Vue數(shù)據(jù)響應(yīng)思路之?dāng)?shù)組,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11vue項目base64字符串轉(zhuǎn)圖片的實現(xiàn)代碼
這篇文章主要介紹了vue項目base64字符串轉(zhuǎn)圖片的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07vue axios sessionID每次請求都不同的原因以及修改方式
這篇文章主要介紹了vue axios sessionID每次請求都不同的原因以及修改方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12關(guān)于vue?src路徑動態(tài)拼接的小知識
這篇文章主要介紹了vue?src路徑動態(tài)拼接的小知識,具有很好的參考價值,希望對大家有所幫助。2022-04-04vue如何利用store實現(xiàn)兩個平行組件間的傳值
這篇文章主要介紹了vue如何利用store實現(xiàn)兩個平行組件間的傳值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04