JS使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
成都創(chuàng)新互聯(lián)專(zhuān)注于湖南企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城開(kāi)發(fā)。湖南網(wǎng)站建設(shè)公司,為湖南等地區(qū)提供建站服務(wù)。全流程按需策劃設(shè)計(jì),專(zhuān)業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,成都創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)
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)無(wú)論怎么點(diǎn),菜單始終定位在右上角
slot的元素位置確實(shí)發(fā)生了變化,然而菜單位置始終不變化
這可把我折騰了半天,也沒(méi)弄出個(gè)結(jié)果。抱著 極不情愿 一探究竟的心情,我打開(kāi)了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的定位是依賴(lài)于外層的這個(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ù)搗騰,改造了一下
<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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
新聞名稱(chēng):JS使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單
鏈接URL:http://bm7419.com/article8/jdjdip.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、動(dòng)態(tài)網(wǎng)站、電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、ChatGPT、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(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)