博客開篇,沒想到第一篇博文竟然是前端的,雖略顯尷尬,但正能量溢出,你我可能遇到同樣問題,在這里分享下個人方案,希望對你有用。
官方目前不提供右鍵菜單,這里借助Dropdown(下拉菜單)來實現,故為“官方“。
既然Dropdown有類似功能,如果將其文字隱藏,並且在合適時機彈出,便可實現,其自身就是iview中一個組件,不言而喻,功能強大、簡潔。
源碼之下,了無秘密,簡單陳述下思路,在模板中正常使用Dropdown組件,屬性、樣式需要單獨設置(style="display:none" trigger="click"),即默認不顯示,click觸發,右鍵按下時首先設置其可見,在更改reference對象引用即可。
模板如下
邏輯如下:
截圖效果:
源碼跟蹤:
一。標簽a不可見,原本以為只要改變left top,菜單會自動跟隨,其位置是通過調用元素的getBoundingClientRect來獲取,因標簽不可見,拿到都是0,此路不通,pass;
二。也可以改變標簽的z-index順序,使其在目標節點之下,這里動態改變其引用節點來實現。
理論上任何組件都可實現右鍵菜單。