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