iview“官方“實現的右鍵菜單


  博客開篇,沒想到第一篇博文竟然是前端的,雖略顯尷尬,但正能量溢出,你我可能遇到同樣問題,在這里分享下個人方案,希望對你有用。

官方目前不提供右鍵菜單,這里借助Dropdown(下拉菜單)來實現,故為“官方“。

  既然Dropdown有類似功能,如果將其文字隱藏,並且在合適時機彈出,便可實現,其自身就是iview中一個組件,不言而喻,功能強大、簡潔。

  源碼之下,了無秘密,簡單陳述下思路,在模板中正常使用Dropdown組件,屬性、樣式需要單獨設置(style="display:none" trigger="click"),即默認不顯示,click觸發,右鍵按下時首先設置其可見,在更改reference對象引用即可。

模板如下

邏輯如下:

 

截圖效果:

源碼跟蹤:

  一。標簽a不可見,原本以為只要改變left top,菜單會自動跟隨,其位置是通過調用元素的getBoundingClientRect來獲取,因標簽不可見,拿到都是0,此路不通,pass;

  二。也可以改變標簽的z-index順序,使其在目標節點之下,這里動態改變其引用節點來實現。

  理論上任何組件都可實現右鍵菜單。


免責聲明!

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



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