前端學習的太差了，一個header寫了半天才寫個勉強能用的。

vue-cli引入scss

npm install node-sass --savenpm install sass-loader --save

從element-ui官方拷貝一個導航欄修改

處理中心我的工作臺選項1選項2選項3選項4選項1選項2選項3訂單管理

css樣式完善

/*頂部導航欄盒子*/.myHeader { /** 導航欄固定在頂部*/ .headBack{ width: 100%; background: rgba(40,52,44,0.6); box-shadow: 0 2px 4px rgba(0,0,0,0.2); position: fixed; left: 0; top: 0; z-index: 100; } .headBox .el-menu { background: transparent; border-bottom: none!important; } .headBox .el-menu-demo li.el-menu-item, .headBox .el-menu--horizontal .el-submenu .el-submenu__title { height: 38px; line-height: 38px; border-bottom: none!important; } //導航欄字體修改 .headBox .el-submenu div.el-submenu__title{ color: #fff; } .el-menu--horizontal >ul , .headBox>ul li.el-menu-item:hover, .headBox>ul li.el-submenu:hover .el-submenu__title, .headBox ul .el-submenu .el-menu .el-menu-item , .headBox .el-menu--horizontal.menu ul{ background: #48456C; border-bottom: none; box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.1) !important; } // 如果展開顏色顯示和下拉列表一致 .is-opened{ background: #48456C !important; } // 菜單右邊 .userInfo{ position: absolute; right: 30px; color: #ffffff; line-height: 38px; } .userInfo a { color: #fff; font-size: 13px; transition: all 0.2s ease-out; } .headBox .userInfo a:hover { color: #48456C; } .pcsearchbox{ max-width: 170px; height: 100%; line-height: 38px; position: absolute; top: 0; right: 0; cursor: pointer; } /*pc搜索框*/ .headBox .pcsearchbox { padding: 0; max-width: 170px; /*min-width: 30px;*/ height: 100%; line-height: 38px; position: absolute; top: 0; right: 0; cursor: pointer; } .headBox .pcsearchbox:hover .pcsearchinput { opacity: 1; /*transform: scaleX(1);*/ visibility: visible; } .headBox .pcsearchbox i.pcsearchicon { color: #fff; padding-left: 10px; } .headBox .pcsearchbox .pcsearchinput { width: 180px; padding: 10px 20px 10px 20px; background: rgba(40, 42, 44, 0.6); border-radius: 0 0 2px 2px; position: absolute; right: 0; top: 38px; opacity: 0; visibility: hidden; /*transform: scaleX(0);*/ transform-origin: right; transition: all 0.5s ease-out; } .headBox .pcsearchbox .hasSearched { opacity: 1; /*transform: scaleX(1);*/ visibility: visible; } .headBox .pcsearchbox .el-input { width: 100%; } .headBox .el-input__inner { height: 30px; border: none; background: #fff; /*border: 1px solid #333;*/ border-radius: 2px; padding-right: 10px; }}/*下拉選項菜單*/.el-menu--horizontal .el-menu .el-menu-item,.el-menu--horizontal .el-menu .el-submenu__title { background-color: #64609E !important; float: none; height: 36px; line-height: 36px; color: #909399; position: relative;}// 下拉菜單body > div.el-menu--horizontal.menu > ul{ list-style: none; position: relative; margin: 0; z-index: 100; min-width: 130px; border: none; padding: 0; border-radius: 2px; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);}body > div.el-menu--horizontal.menu > ul > li:hover { background: #48456C !important;}

修改后的頁面

處理中心我的工作臺選項1選項2選項3訂單管理 登錄 | 注冊 個人中心 喜歡列表 收藏列表 退出登錄

效果

總結

以上是生活随笔為你收集整理的vue 搜索框header_vue项目header模块编写的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。