iview通過Dropdown(下拉菜單)實現(xiàn)的右鍵菜單
官方目前不提供右鍵菜單，這里借助Dropdown（下拉菜單）來實現(xiàn)，故為“官方“。
既然Dropdown有類似功能，如果將其文字隱藏，并且在合適時機彈出，便可實現(xiàn)，其自身就是iview中一個組件，不言而喻，功能強大、簡潔。
源碼之下，了無秘密，簡單陳述下思路，在模板中正常使用Dropdown組件，屬性、樣式需要單獨設(shè)置（style="display:none" trigger="click"），即默認(rèn)不顯示，click觸發(fā)，右鍵按下時首先設(shè)置其可見，在更改reference對象引用即可。
模板如下
邏輯如下：
源碼跟蹤：
一。標(biāo)簽a不可見，原本以為只要改變left top，菜單會自動跟隨，其位置是通過調(diào)用元素的getBoundingClientRect來獲取，因標(biāo)簽不可見，拿到都是0，此路不通，pass;
二。也可以改變標(biāo)簽的z-index順序，使其在目標(biāo)節(jié)點之下，這里動態(tài)改變其引用節(jié)點來實現(xiàn)。
理論上任何組件都可實現(xiàn)右鍵菜單。
總結(jié)
以上所述是小編給大家介紹的iview通過Dropdown(下拉菜單)實現(xiàn)的右鍵菜單 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
靜態(tài)頁面實現(xiàn) include 引入公用代碼的示例
下面小編就為大家?guī)硪黄o態(tài)頁面實現(xiàn) include 引入公用代碼的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
javascript使用substring實現(xiàn)的展開與收縮文字功能示例
這篇文章主要介紹了javascript使用substring實現(xiàn)的展開與收縮文字功能,涉及javascript元素遍歷與屬性設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
支持各種瀏覽器的右下角浮動窗口，需要的朋友可以參考下。2010-04-04
跟我學(xué)習(xí)javascript的全局變量，告訴大家三種避免全局變量的方法，感興趣的小伙伴們可以參考一下2015-11-11
下面小編就為大家?guī)硪黄狫S時間控制實現(xiàn)動態(tài)效果的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁定位導(dǎo)航功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
利用javaScript實現(xiàn)點擊輸入框彈出窗體選擇信息
這篇文章主要是對利用javaScript實現(xiàn)點擊輸入框彈出窗體選擇信息進的實例行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
WEB開發(fā)之注冊頁面驗證碼倒計時代碼的實現(xiàn)
近期在搞一個H5+backbone 項目,驗證輸入手機號 驗證碼倒計時功能，代碼中包含了前端樣式布局代碼和后端邏輯實現(xiàn)，思路明確，具有參考借鑒價值，需要的朋友參考下吧2016-12-12
JavaScript實現(xiàn)當(dāng)網(wǎng)頁加載完成后執(zhí)行指定函數(shù)的方法
這篇文章主要介紹了JavaScript實現(xiàn)當(dāng)網(wǎng)頁加載完成后執(zhí)行指定函數(shù)的方法,實例分析了javascript加載頁面及執(zhí)行函數(shù)的技巧,需要的朋友可以參考下2015-03-03
js屏蔽鼠標(biāo)鍵盤(右鍵/Ctrl+N/Shift+F10/F11/F5刷新/退格鍵)
屏蔽鼠標(biāo)右鍵、Ctrl+N、Shift+F10、F11、F5刷新、退格鍵/Alt+ 方向鍵 →等等，太多了就不一一寫來了感興趣的朋友可以了解下啊，希望本文對你有所幫助2013-01-01