vue-ant框架 - a-menu -關於更改munu的icon為自定義圖標


只要更改i-con 去掉type,改為自己class樣式
    原項目
        <a-menu-item key="/ManageProject" @click='navSelect("/ManageProject")'>
                  <router-link to="/ManageProject">
                      <a-icon type="folder-open" />
                      <span>項目管理</span>
</router-link>
</a-menu-item> 注意不要去掉a-icon直接改為i標簽或其它圖標常用標簽如a 如果自定義標簽的引入-去掉a-icon標簽那么設定完圖標后會出現連鎖問題 問題1: 鼠標移動上去后不再高亮字體 問題2: 點擊則爹面板后圖標旁邊的標題(如項目管理)不會隱藏 可以通過判斷collapsed值展開顯示折疊隱藏 <span :class="{ mydisplaynone: collapsed}">系統管理</span> 問題3: 當解決問題2后因為折疊隱藏導致鼠標移動上去后折疊效果的導航浮框內沒內容了 可以通過設置a-menu-item上設置title="想要顯示出來的文字描述"來解決 <a-menu-item title="系統管理" key="/System" > 這樣添加title的話又會出現問題:浮框出現兩個,原始框架的title和自定義出現title 因此需要按框架上面的結構不去更改它而是直接他在a-icon上加class 一定要注意去掉type,否則會出問題 例如 <a-menu-item key="/ComYibiao" @click='navSelect("/ComYibiao")'> <router-link to="/ComYibiao"> <a-icon class='myIcon yibiaopanIcon'> </a-icon> <span>儀表盤</span> </router-link> </a-menu-item> css: .myIcon{ display: inline-block; width: 1.3em; height: 1.3em; fill: currentcolor; background: red; margin-right:0.8em; margin-top:-0.2em; vertical-align: middle; } .yibiaopanIcon{ background: url(../assets/image/icon/yibiaopan2@2x.png); background-size: cover; background-repeat: no-repeat; }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM