使用iView的Dropdown實現一個右鍵菜單

sihai 發布于2019-08-23 17:17 / 3529人閱讀

摘要：前言前段時間在用做個項目，其中需要使用自定義的右鍵菜單，然后去官網找了一下，發現有個的組件，便想著能不能用來做個右鍵菜單的組件你可能需要對有一定的使用經驗嘗試的使用大概是這個樣子下拉菜單驢打滾炸醬面豆汁兒冰糖葫蘆北京烤鴨發現有個觸發元素

前言

前段時間在用iView做個項目，其中需要使用自定義的右鍵菜單，然后去官網找了一下，發現有個Dropdown的組件，便想著能不能用來做個右鍵菜單的組件

你可能需要對iView有一定的使用經驗

嘗試

Dropdown的使用大概是這個樣子

發現有個觸發元素slot，可以自定義的插入元素，我一想，只要把slot的內容設置為position: fixed，在右鍵的時候給它實時設置一下鼠標所在的位置不就行了嘛，然后一頓搗騰

看上去很不錯，然后興高采烈地一試，發現無論怎么點，菜單始終定位在右上角

slot的元素位置確實發生了變化，然而菜單位置始終不變化

這可把我折騰了半天，也沒弄出個結果。抱著 ~~極不情愿~~ 一探究竟的心情，我打開了Dropdown的源碼

可以看到標注的地方，slot的外層還有個div，而Dropdown的定位是依賴于外層的這個div的，所以無論你slot里的內容位置，在初始化之后再怎么變化，都不會影響到組件的位置了（也有可能是position: fixed的影響）

調整

發現slot外層的div有一個ref="reference"的屬性

突然有了想法，我是不是可以直接通過Dropdown的refs直接把整個外層div替換掉，于是繼續搗騰，改造了一下

根據鼠標的位置實時創建一個position: fixed的div，通過給Dropdown添加ref屬性，獲取到Dropdown對象之后再通過$ref屬性將div賦值到reference

大功告成，現在Dropdown會根據鼠標所在的位置出現啦

最后把一些點擊的回調方法補全，就是一個像樣的右鍵菜單組件了

當然作為一個可以復用的組件，還需要把一些通用邏輯再提取出來，以及補全一些常用的API，具體代碼可以參考這個倉庫

云服務器 GPU云服務器右鍵菜單右鍵菜單類 jquery右鍵菜單 js右鍵菜單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104118.html

HeyUI組件庫按需加載功能上線，盤點HeyUI組件庫有哪些獨特功能？

摘要：測試復制至剪切板的文本測試相關文檔復制剪切板滾動至視圖內其實，這是一個非常方便的功能，比如說，分頁加載后滾動至頭部，切換頁面時切換至頭部。HeyUI組件庫如果你還不了解heyui組件庫，歡迎來我們的官網或者github參觀。官網 github 當然，如果能給我們一顆???，那是最贊的了！按需加載當heyui組件庫的組件越來越多的時候，按需加載的功能終于上線了。話不多說，先把按需...

IamDLY 2019-05-22 19:08 評論0 收藏0
iView 發布 3.0 版本，以及開發者社區等 5 款新產品

摘要：相對時間組件錨點組件面板分割組件分割線組件單元格組件相對時間組件用于表示幾分鐘前幾小時前等相對于此時此刻的時間描述。單元格組件在手機上比較常見，在上則常用于固定的側邊菜單項。開發者社區這是發布會最勁爆的一款產品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我們成功地召開了 iView 3...

FreeZinG 2019-08-23 10:31 評論0 收藏0
Vue 2.x 實戰之后臺管理系統開發（一）

摘要：導語下文實戰之后臺管理系統開發二該文章將從頭到尾梳理我是如何使用開發一個后臺管理項目的，我會將自己遇到的問題貼出，希望可以幫助到其他人。構建項目框架準備對于大陸用戶，建議將的注冊表源設置為國內的鏡像，如淘寶鏡像，可以大幅提升安裝速度。 1. 導語下文：Vue 2.x 實戰之后臺管理系統開發（二）該文章將從頭到尾梳理我是如何使用 Vue 2 開發一個后臺管理項目的，我會將自己遇到的問...

darkbaby123 2019-08-20 16:49 評論0 收藏0
iView2 來了，全面支持 Vue.js 2.x

摘要：來了兩個星期的緊張開發，終于發布了支持的版本。整體性能也大幅度提升。報名費用元，報名地址微信掃描二維碼更新日志目前已發布至，文檔還需一段時間，但很快會發布新版本的來支持。 showImg(https://segmentfault.com/img/remote/1460000008640063?w=1600&h=900); iView2 來了兩個星期的緊張開發，iView 終于發布了支...

YFan 2019-08-21 11:34 評論0 收藏0
Bootstrap Mega Menu

摘要：完整的代碼放在。鼠標事件組件通過點擊打開菜單，不符合大菜單場景，需要修改成，鼠標移入時打開菜單，鼠標移出時關閉菜單。鼠標移入時，顯示菜單。自適應屏幕寬度當屏幕尺寸小于像素時，菜單會自動折疊，恢復默認行為，通過點擊來打開菜單。完整的代碼放在 jsFiddle Bootstrap Mega Menu 。我們管 Mega Menu 叫做大菜單吧，巨、超級啥的，不足以彰顯我們的草根貴氣。 ...

booster 2019-08-21 17:19 評論0 收藏0