el-dropdown组件，菜单自适应

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

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

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

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

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

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

话不多说直接上代码

          
          {{node.reportName}}
          

          

            
              
                
              
              
                
                  {{ item.label }}
                
              
            
          

        

  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);
}