JS使用iView的Dropdown實現一個右鍵菜單

2024-05-06 16:50:33

字體：大中小

來源：轉載

供稿：網友

前言

前段時間在用iView做個項目，其中需要使用自定義的右鍵菜單，然后去官網找了一下，發現有個Dropdown的組件，便想著能不能用來做個右鍵菜單的組件

你可能需要對iView有一定的使用經驗

嘗試

Dropdown的使用大概是這個樣子

<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>

發現有個觸發元素slot，可以自定義的插入元素，我一想，只要把slot的內容設置為position: fixed，在右鍵的時候給它實時設置一下鼠標所在的位置不就行了嘛，然后一頓搗騰

<template> <Dropdown  transfer  placement="right-start"  trigger="custom"  :visible="currentVisible"  @on-clickoutside="handleCancel" >  <div :style="locatorStyle"></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>

看上去很不錯，然后興高采烈地一試，發現無論怎么點，菜單始終定位在右上角

JS,iView,Dropdown,右鍵菜單

slot的元素位置確實發生了變化，然而菜單位置始終不變化

這可把我折騰了半天，也沒弄出個結果。抱著極不情愿一探究竟的心情，我打開了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>

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

調整

發現slot外層的div有一個ref="reference"的屬性

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

<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   // 創建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>

根據鼠標的位置實時創建一個position: fixed的div，通過給Dropdown添加ref屬性，獲取到Dropdown對象之后再通過$ref屬性將div賦值到reference

大功告成，現在Dropdown會根據鼠標所在的位置出現啦

JS,iView,Dropdown,右鍵菜單