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

　　博客開篇，沒想到第一篇博文居然是前端的，雖略顯尷尬，但正能量溢出，你我可能遇到一樣問題，在這裏分享下我的方案，但願對你有用。

官方目前不提供右鍵菜單，這裏藉助Dropdown（下拉菜單）來實現，故爲「官方「。

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

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

模板以下

邏輯以下：

 

截圖效果：

源碼跟蹤：

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

　　二。也能夠改變標籤的z-index順序，使其在目標節點之下，這裏動態改變其引用節點來實現。

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