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