簡(jiǎn)介

10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有石峰免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

先來(lái)看最終成果：

操作邏輯為：

• 點(diǎn)擊 ... 彈出 context-menu;
• 點(diǎn)擊非 context-menu 區(qū)域，隱藏 context-menu；
• 點(diǎn)擊 context-menu 中的任何一個(gè)選項(xiàng)，隱藏 context-menu；
  

思考

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

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

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

實(shí)現(xiàn)

調(diào)整操作邏輯

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

調(diào)整 UI

在調(diào)整 UI 的過(guò)程中我感到了 CSS 滿滿的惡意，當(dāng)然說(shuō)是這么說(shuō)，但實(shí)際上還是因?yàn)樘脹](méi)有用而導(dǎo)致的不夠熟悉。非常費(fèi)勁的終于調(diào)整了好了新 UI，此時(shí)已經(jīng)過(guò)去了整整一天了，非常懷念 autoLayout 。

context-mune

在正式開(kāi)始寫(xiě)之前，上文已經(jīng)說(shuō)了我一直在翻開(kāi)源庫(kù)，主要是不懂得如何下手去寫(xiě)。距離上一次寫(xiě) vue 已經(jīng)過(guò)去快兩個(gè)月了，而且也沒(méi)搞清楚如何寫(xiě)一個(gè)組件，所以中間有一段時(shí)間浪費(fèi)在了這上。最后的解決思路讓我感到意外：

<div class="more-menu-wrapper">
 <ul v-show="item.showOption">
  <li>更換分類</li>
  <li>向上移動(dòng)</li>
  <li>移至頂部</li>
  <li>取消收藏</li>
 </ul>
</div>

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

當(dāng)前題目：深入理解使用Vue實(shí)現(xiàn)Context-Menu的思考與總結(jié)-創(chuàng)新互聯(lián)
文章URL：http://chinadenli.net/article2/dgdjic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站改版、網(wǎng)站收錄、標(biāo)簽優(yōu)化、定制開(kāi)發(fā)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)