您好,登錄后才能下訂單哦!
JS使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單?相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
Dropdown的使用大概是這個(gè)樣子
<template> <Dropdown> <a href="javascript:void(0)" rel="external nofollow" > 下拉菜單 <Icon type="ios-arrow-down"></Icon> </a> <DropdownMenu slot="list"> <DropdownItem>驢打滾</DropdownItem> <DropdownItem>炸醬面</DropdownItem> <DropdownItem disabled>豆汁兒</DropdownItem> <DropdownItem>冰糖葫蘆</DropdownItem> <DropdownItem divided>北京烤鴨</DropdownItem> </DropdownMenu> </Dropdown> </template> <script> export default { } </script>
發(fā)現(xiàn)有個(gè)觸發(fā)元素slot,可以自定義的插入元素,我一想,只要把slot的內(nèi)容設(shè)置為position: fixed,在右鍵的時(shí)候給它實(shí)時(shí)設(shè)置一下鼠標(biāo)所在的位置不就行了嘛,然后一頓搗騰
<template> <Dropdown transfer placement="right-start" trigger="custom" :visible="currentVisible" @on-clickoutside="handleCancel" > <div :></div> <DropdownMenu slot="list"> <DropdownItem>驢打滾</DropdownItem> <DropdownItem>炸醬面</DropdownItem> <DropdownItem disabled>豆汁兒</DropdownItem> <DropdownItem>冰糖葫蘆</DropdownItem> <DropdownItem divided>北京烤鴨</DropdownItem> </DropdownMenu> </Dropdown> </template> <script> export default { data () { return { posX: 0, posY: 0, currentVisible: false } }, computed: { locatorStyle () { return { position: 'fixed', left: `${this.posX}px`, top: `${this.posY}px` } } }, methods: { handleContextmenu ({ button, clientX, clientY }) { if (button === 2) { if (this.posX !== clientX) this.posX = clientX if (this.posY !== clientY) this.posY = clientY this.currentVisible = true } }, handleCancel () { this.currentVisible = false } }, mounted () { document.addEventListener('contextmenu', this.handleContextmenu, true) document.addEventListener('mouseup', this.handleContextmenu, true) }, destroyed () { document.removeEventListener('contextmenu', this.handleContextmenu, true) document.removeEventListener('mouseup', this.handleContextmenu, true) } } </script>
看上去很不錯(cuò),然后興高采烈地一試,發(fā)現(xiàn)無論怎么點(diǎn),菜單始終定位在右上角
slot的元素位置確實(shí)發(fā)生了變化,然而菜單位置始終不變化
這可把我折騰了半天,也沒弄出個(gè)結(jié)果。抱著 極不情愿 一探究竟的心情,我打開了Dropdown的源碼
<template> <div :class="[prefixCls]" v-click-outside="onClickoutside" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"> <!-- 注意此處 --> <div :class="relClasses" ref="reference" @click="handleClick" @contextmenu.prevent="handleRightClick"><slot></slot></div> <transition name="transition-drop"> <Drop :class="dropdownCls" v-show="currentVisible" :placement="placement" ref="drop" @mouseenter.native="handleMouseenter" @mouseleave.native="handleMouseleave" :data-transfer="transfer" :transfer="transfer" v-transfer-dom><slot name="list"></slot></Drop> </transition> </div> </template> <script> // 以下省略 </script>
可以看到標(biāo)注的地方,slot的外層還有個(gè)div,而Dropdown的定位是依賴于外層的這個(gè)div的,所以無論你slot里的內(nèi)容位置,在初始化之后再怎么變化,都不會(huì)影響到組件的位置了(也有可能是position: fixed的影響)
調(diào)整
發(fā)現(xiàn)slot外層的div有一個(gè)ref="reference"
的屬性
突然有了想法,我是不是可以直接通過Dropdown的refs直接把整個(gè)外層div替換掉,于是繼續(xù)搗騰,改造了一下
<template> <Dropdown transfer placement="right-start" trigger="custom" ref="contextMenu" :visible="currentVisible" @on-clickoutside="handleCancel" > <DropdownMenu slot="list"> <DropdownItem>驢打滾</DropdownItem> <DropdownItem>炸醬面</DropdownItem> <DropdownItem disabled>豆汁兒</DropdownItem> <DropdownItem>冰糖葫蘆</DropdownItem> <DropdownItem divided>北京烤鴨</DropdownItem> </DropdownMenu> </Dropdown> </template> <script> export default { data () { return { posX: 0, posY: 0, currentVisible: false, locator: null } }, methods: { createLocator () { // 獲取Dropdown const contextmenu = this.$refs.contextMenu // 創(chuàng)建locator const locator = document.createElement('div') locator.style.cssText = `position:fixed;left:${this.posX}px;top:${this.posY}px` document.body.appendChild(locator) // 將locator綁定到Dropdown的reference上 contextmenu.$refs.reference = locator this.locator = locator }, removeLocator () { if (this.locator) document.body.removeChild(this.locator) this.locator = null }, handleContextmenu ({ button, clientX, clientY }) { if (button === 2) { if (this.posX !== clientX) this.posX = clientX if (this.posY !== clientY) this.posY = clientY if (this.trigger !== 'custom') { this.createLocator() this.currentVisible = true } } }, handleCancel () { this.currentVisible = false this.removeLocator() } }, mounted () { document.addEventListener('contextmenu', this.handleContextmenu, true) document.addEventListener('mouseup', this.handleContextmenu, true) }, destroyed () { document.removeEventListener('contextmenu', this.handleContextmenu, true) document.removeEventListener('mouseup', this.handleContextmenu, true) } } </script>
看完上述內(nèi)容,你們掌握J(rèn)S使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。