el-dropdown组件，菜单自适应

记录个问题：在切换屏幕大小的时候菜单没有自适应，菜单会展示在整个页面的左上角。

1、 根据这个情况，首先想到的是使用 position 属性，用于设置弹出菜单的位置。可以将其设置为start、end、top、bottom等值，用来控制菜单出现的位置。

2、el-dropdown-menu提供了 visible 属性，用于控制下拉菜单的显示和隐藏。通过监听窗口大小变化事件，在窗口大小变化是手动设置 visible 属性，但是并没有实现菜单的自动化。

3、通过自定义 css 样式控制下拉菜单的位置。（未尝试，感兴趣的小伙伴可以试试）

下面就说说我是怎么实现的：

使用 el-dropdown 的 visible-change 下拉框出现/隐藏时触发事件，并结合 mouseenter 和 mouseleave 事件

话不多说直接上代码

<div
          slot-scope="{ node, data }"
          class="custom-tree-node"
          @mouseenter="mouseenter(data)" @mouseleave="data.isLeave && mouseleave(data)"
        >
          
          {{node.reportName}}
          <div style="flex: 1" />
          <div v-show="currentHover === data.id">
            <el-dropdown trigger="click" @command="clickMenu($event, data)" style="margin-top: 0;" @visible-change="dropDownShow($event, data)">
              <span class="el-dropdown-link">
                <i class="el-icon-more rotate" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in suboperateList"
                  :key="item.label"
                  :command="item.funcName"
                  :icon="item.icon"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

  data() {
    return {
      suboperateList: [
        {
          funcName: "detail",
          label: "详情",
          icon: "el-icon-warning-outline",
        },
        {
          funcName: "edit",
          label: "编辑",
          icon: "el-icon-edit",
        },
        {
          funcName: "del",
          label: "删除",
          icon: "el-icon-delete",
        },
      ],
    };
  },

methods: {
    
    /**
     * 点击三点,下拉框出现
     */
		dropDownShow (show, data) {
			if (show) {
				data.isLeave = false
			} else {
				data.isLeave = true
			}
			data.isDrapShow = show
			this.$set(data, 'del', show)
		},
    /**
     * 鼠标进入tree
     */
		mouseenter (data) {
			data.isLeave = true
			if (data.isDrapShow) {
				data.isLeave = false
			}
			this.$set(data, 'del', true)
		},

    /**
     * 离开tree
     */
		mouseleave (data) {
			this.$set(data, 'del', false)
		},
    /**
     * 菜单回调事件
     */
    clickMenu() {
       console.log('菜单回调事件')
    },
},

.el-icon-more:before {
  color: #c0c4cc;
  font-size: 20px;
}
.rotate {
  cursor: pointer;
  margin-left: 5px;
  transform: rotate(90deg);
}