亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單

sihai / 3617人閱讀

摘要：前言前段時(shí)間在用做個(gè)項(xiàng)目，其中需要使用自定義的右鍵菜單，然后去官網(wǎng)找了一下，發(fā)現(xiàn)有個(gè)的組件，便想著能不能用來(lái)做個(gè)右鍵菜單的組件你可能需要對(duì)有一定的使用經(jīng)驗(yàn)嘗試的使用大概是這個(gè)樣子下拉菜單驢打滾炸醬面豆汁兒冰糖葫蘆北京烤鴨發(fā)現(xiàn)有個(gè)觸發(fā)元素

前言

前段時(shí)間在用iView做個(gè)項(xiàng)目，其中需要使用自定義的右鍵菜單，然后去官網(wǎng)找了一下，發(fā)現(xiàn)有個(gè)Dropdown的組件，便想著能不能用來(lái)做個(gè)右鍵菜單的組件

你可能需要對(duì)iView有一定的使用經(jīng)驗(yàn)
嘗試

Dropdown的使用大概是這個(gè)樣子

發(fā)現(xiàn)有個(gè)觸發(fā)元素slot，可以自定義的插入元素，我一想，只要把slot的內(nèi)容設(shè)置為position: fixed，在右鍵的時(shí)候給它實(shí)時(shí)設(shè)置一下鼠標(biāo)所在的位置不就行了嘛，然后一頓搗騰

看上去很不錯(cuò)，然后興高采烈地一試，發(fā)現(xiàn)無(wú)論怎么點(diǎn)，菜單始終定位在右上角


slot的元素位置確實(shí)發(fā)生了變化，然而菜單位置始終不變化

這可把我折騰了半天，也沒(méi)弄出個(gè)結(jié)果。抱著 極不情愿 一探究竟的心情，我打開(kāi)了Dropdown的源碼

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

調(diào)整 
發(fā)現(xiàn)slot外層的div有一個(gè)ref="reference"的屬性

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

根據(jù)鼠標(biāo)的位置實(shí)時(shí)創(chuàng)建一個(gè)position: fixed的div，通過(guò)給Dropdown添加ref屬性，獲取到Dropdown對(duì)象之后再通過(guò)$ref屬性將div賦值到reference

大功告成，現(xiàn)在Dropdown會(huì)根據(jù)鼠標(biāo)所在的位置出現(xiàn)啦

最后把一些點(diǎn)擊的回調(diào)方法補(bǔ)全，就是一個(gè)像樣的右鍵菜單組件了

當(dāng)然作為一個(gè)可以復(fù)用的組件，還需要把一些通用邏輯再提取出來(lái)，以及補(bǔ)全一些常用的API，具體代碼可以參考這個(gè)倉(cāng)庫(kù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104118.html

相關(guān)文章

  • HeyUI組件庫(kù)按需加載功能上線，盤點(diǎn)HeyUI組件庫(kù)有哪些獨(dú)特功能？

    摘要：測(cè)試復(fù)制至剪切板的文本測(cè)試相關(guān)文檔復(fù)制剪切板滾動(dòng)至視圖內(nèi)其實(shí)，這是一個(gè)非常方便的功能，比如說(shuō)，分頁(yè)加載后滾動(dòng)至頭部，切換頁(yè)面時(shí)切換至頭部。HeyUI組件庫(kù) 如果你還不了解heyui組件庫(kù)，歡迎來(lái)我們的官網(wǎng)或者github參觀。 官網(wǎng) github 當(dāng)然，如果能給我們一顆???，那是最贊的了！ 按需加載 當(dāng)heyui組件庫(kù)的組件越來(lái)越多的時(shí)候，按需加載的功能終于上線了。 話不多說(shuō)，先把按需...

    IamDLY 評(píng)論0 收藏0

  • iView 發(fā)布 3.0 版本，以及開(kāi)發(fā)者社區(qū)等 5 款新產(chǎn)品

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

    FreeZinG 評(píng)論0 收藏0

  • Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)（一）

    摘要：導(dǎo)語(yǔ)下文實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)二該文章將從頭到尾梳理我是如何使用開(kāi)發(fā)一個(gè)后臺(tái)管理項(xiàng)目的，我會(huì)將自己遇到的問(wèn)題貼出，希望可以幫助到其他人。構(gòu)建項(xiàng)目框架準(zhǔn)備對(duì)于大陸用戶，建議將的注冊(cè)表源設(shè)置為國(guó)內(nèi)的鏡像，如淘寶鏡像，可以大幅提升安裝速度。 1. 導(dǎo)語(yǔ) 下文：Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)（二） 該文章將從頭到尾梳理我是如何使用 Vue 2 開(kāi)發(fā)一個(gè)后臺(tái)管理項(xiàng)目的，我會(huì)將自己遇到的問(wèn)...

    darkbaby123 評(píng)論0 收藏0

  • iView2 來(lái)了，全面支持 Vue.js 2.x

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

    YFan 評(píng)論0 收藏0

  • Bootstrap Mega Menu

    摘要：完整的代碼放在。鼠標(biāo)事件組件通過(guò)點(diǎn)擊打開(kāi)菜單，不符合大菜單場(chǎng)景，需要修改成，鼠標(biāo)移入時(shí)打開(kāi)菜單，鼠標(biāo)移出時(shí)關(guān)閉菜單。鼠標(biāo)移入時(shí)，顯示菜單。自適應(yīng)屏幕寬度當(dāng)屏幕尺寸小于像素時(shí)，菜單會(huì)自動(dòng)折疊，恢復(fù)默認(rèn)行為，通過(guò)點(diǎn)擊來(lái)打開(kāi)菜單。 完整的代碼放在 jsFiddle Bootstrap Mega Menu 。 我們管 Mega Menu 叫做大菜單吧，巨、超級(jí)啥的，不足以彰顯我們的草根貴氣。 ...

    booster 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<