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，菜單會(huì)自動(dòng)跟隨，其位置是通過調(diào)用元素的getBoundingClientRect來獲取，因標(biāo)簽不可見，拿到都是0，此路不通，pass;
二。也可以改變標(biāo)簽的z-index順序，使其在目標(biāo)節(jié)點(diǎn)之下，這里動(dòng)態(tài)改變其引用節(jié)點(diǎn)來實(shí)現(xiàn)。
理論上任何組件都可實(shí)現(xiàn)右鍵菜單。
總結(jié)
以上所述是小編給大家介紹的iview通過Dropdown(下拉菜單)實(shí)現(xiàn)的右鍵菜單 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
使用JavaScript監(jiān)視有沒有被刷新后跳轉(zhuǎn)其他頁面
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript監(jiān)視有沒有被刷新后跳轉(zhuǎn)其他頁面,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2025-01-01
基于Electron實(shí)現(xiàn)桌面應(yīng)用開發(fā)代碼實(shí)例
這篇文章主要介紹了基于Electron實(shí)現(xiàn)桌面應(yīng)用開發(fā)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
關(guān)于TypeScript應(yīng)該盡量避免的語法總結(jié)
TypeScript是JavaScript的超集,具有類型系統(tǒng),支持ES6語法,支持面向?qū)ο缶幊痰母拍?下面這篇文章主要給大家介紹了關(guān)于TypeScript應(yīng)該盡量避免的語法,需要的朋友可以參考下2022-04-04
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript 正則表達(dá)式語法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
簡單實(shí)現(xiàn)js倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了js倒計(jì)時(shí)效果的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
前端接口報(bào)錯(cuò)Required?request?body?is?missing解決辦法
這篇文章主要給大家介紹了關(guān)于前端接口報(bào)錯(cuò)Required?request?body?is?missing的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
去除數(shù)組重復(fù)值的方法有很多，本文整理了四種不同方式，在此與大家分享下，希望對大家有所幫助2013-09-09
解決uni-app微信小程序input輸入框在底部時(shí),鍵盤彈起頁面整體上移問題
問題是這樣的input?獲取焦點(diǎn)時(shí)會(huì)自動(dòng)調(diào)起手機(jī)鍵盤，設(shè)置?:adjust-position="true"，會(huì)導(dǎo)致鍵盤彈起時(shí)頁面整體上移，這篇文章主要介紹了解決uni-app微信小程序input輸入框在底部時(shí)，鍵盤彈起頁面整體上移問題,，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了微信公眾號H5支付接口調(diào)用方法，微信內(nèi)H5調(diào)用支付接口代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
JS返回只包含數(shù)字類型的數(shù)組實(shí)例分析
這篇文章主要介紹了JS返回只包含數(shù)字類型的數(shù)組實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了循環(huán)遍歷數(shù)組及正則匹配兩種實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12