簡介

10年積累的成都網站建設、成都網站設計經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有石峰免費網站建設讓你可以放心的選擇與我們合作。

先來看最終成果：

操作邏輯為：

• 點擊 ... 彈出 context-menu;
• 點擊非 context-menu 區(qū)域，隱藏 context-menu；
• 點擊 context-menu 中的任何一個選項，隱藏 context-menu；
  

思考

項目是基于 vux 做的，本想著偷懶直接在 vux 庫翻組件用，但看了一圈下來，居然這么通用的組件在 vuex 中沒有！接著又去翻開源的解決方案，看了幾個庫還算 ok，但此時前端小哥來了，說實現(xiàn)這個菜單不需要用到這么重的東西，直接寫就行了。

當時我的腦海中在思考了把 context-menu 封裝成一個 component ，通過數(shù)據(jù)配置的方式動態(tài)拓展菜單選項。但沒想到前端小哥直接給我干了回來，沒必要進行封裝，這個組件對頁面依賴性太強，就算封裝完了下次也不一定能直接用，PM 的思路又這么清奇。

所以，最后的做法就直接硬上了。

實現(xiàn)

調整操作邏輯

該頁面是一個通俗意義上的列表展示頁，使用了 vux 的 swipeout 表單組件，給用戶提供了側滑操作，需要把原先寫好的側滑功能刪除。

調整 UI

在調整 UI 的過程中我感到了 CSS 滿滿的惡意，當然說是這么說，但實際上還是因為太久沒有用而導致的不夠熟悉。非常費勁的終于調整了好了新 UI，此時已經過去了整整一天了，非常懷念 autoLayout 。

context-mune

在正式開始寫之前，上文已經說了我一直在翻開源庫，主要是不懂得如何下手去寫。距離上一次寫 vue 已經過去快兩個月了，而且也沒搞清楚如何寫一個組件，所以中間有一段時間浪費在了這上。最后的解決思路讓我感到意外：

 

  
更換分類
  
向上移動
  
移至頂部
  
取消收藏
 

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網站標題：深入理解使用Vue實現(xiàn)Context-Menu的思考與總結-創(chuàng)新互聯(lián)
轉載源于：http://weahome.cn/article/dgdjic.html