样式效果

效果1

效果2

效果1组件调用

<template>
  <div>
    <div v-for="item in tableArr" :key="item">
      <Dropdown
        :propObj="item" 
        @change="menuChange"
        :selectData="menuSelect.menuSelectData"
        :buttonIcon="menuSelect.buttonIcon"
      ></Dropdown>
    </div>

  </div>
</template>

<script>
import Dropdown from "@/components/selectMenu/index.vue"

export default {
  data () {
    return {
      tableArr: [],
      menuSelect: {
        menuSelectData: [
          { id: "Open", defaultIcon: require("@/views/Home/imgs/open.svg"), hoverIcon: require("@/views/Home/imgs/open_hover.svg") },
          { id: "Rename", defaultIcon: require("@/views/Home/imgs/Rename.png"), hoverIcon: require("@/views/Home/imgs/Rename_hover.svg") },
          { id: "copy", defaultIcon: require("@/views/Home/imgs/copy.png"), hoverIcon: require("@/views/Home/imgs/copy_hover.svg") },
          { id: "Export", defaultIcon: require("@/views/Home/imgs/Export.png"), hoverIcon: require("@/views/Home/imgs/Export_hover.svg") },
          { id: "Delete", defaultIcon: require("@/views/Home/imgs/Delete.png"), hoverIcon: require("@/views/Home/imgs/Delete_hover.svg") },
        ],
        buttonIcon: require('@/views/Home/imgs/btn.svg'),
      }
    }
  },
  methods: {
    // 菜单选择
    menuChange (item, row) {
      // item : 菜单按钮key  row：tableArr中的选中对象
      if (item === 'Open') {
        // 打开
        console.log(item);
      } else if (item === 'Rename') {
        this.openReName(row)
      } else if (item === 'copy') {
        // 复制
      } else if (item === 'Export') {
        // 导出
      } else if (item === 'Delete') {
        // 删除
        this.openDele(row)
      }
    },
  },
  components: {
    Dropdown
  }
}
</script>

效果2组件调用

<template>
  <div>
    <Dropdown
      @change="menuChange"
      :selectData="menuSelect.menuSelectData"
      :buttonIcon="menuSelect.buttonIcon"
      mouseLeaveHidden
      :buttonStyle="{width:'40px'}"
      :styleItem="{lineHeight:`48px`, marginBottom:`8px`}"
    >
      <template v-slot:header>
        <div class="setIcon">
          <img
            src="../../imgs/header.svg"
            alt=""
          >
          <div class="name">
            [email protected]
          </div>
        </div>
      </template>
    </Dropdown>

  </div>
</template>

<script>
import Dropdown from "@/components/selectMenu/index.vue"

export default {
  data () {
    return {
      loginStatus: false,
      menuSelect: {
        menuSelectData: [
          { id: "My Mindmap", defaultIcon: require("@/views/Home/imgs/headerIcon.png"), hoverIcon: require("@/views/Home/imgs/headerIcon.png") },
          { id: "Logout", defaultIcon: require("@/views/Home/imgs/log-out.svg"), hoverIcon: require("@/views/Home/imgs/log-out.svg") },
        ],
        buttonIcon: require('@/views/Home/imgs/header.svg'),
      },
    }
  },
  methods: {
    // 菜单选择
    menuChange (item) {
      // item : 菜单按钮key  row：当前选中对象
      if (item === 'Logout') {
        this.toLoginOut()
      }
    },
  },
  components: {
    Dropdown
  }
}
</script>

<style lang="less" scoped>
.setIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  word-wrap: break-word;
  padding: 0 13px;
  box-sizing: border-box;
  .name {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    margin-top: 12px;
    margin-bottom: 20px;
    width: 251px;
    word-wrap: break-word;
    text-align: center;
    height: 30px;
  }
}
</style>

下拉菜单组件

传参props ：

1. propObj ：数据类型（对象），如果作用再v-for中，可能需要获取传递过来的数据（非必须）
2. selectData：数据类型（数组），格式为[{id,hoverIcon,defaultIcon}] （非必须）
3. buttonIcon：数据类型（字符串），激活按钮图片url，或者使用插槽，v-slot:triggerButton（非必须）
4. mouseLeaveHidden : 数据类型（布尔），是否需要移出下拉菜单后下拉菜单不会立即消息（非必须）
5. buttonStyle：数据类型（对象），当传入buttonIcon后可控制激活按钮图片样式（非必须）
6. styleItem：数据类型（对象），控制下拉菜单单个样式（非必须）

插槽slot：

1. triggerButton：自定义激活按钮
2. header：自定义下拉菜单头部样式

事件event：

1. change ：选中菜单执行， 参数：（选中id，传入的propObj ）：参数2可选

组件代码：

<template>
  <div>
    <el-dropdown
      trigger="click"
      :ref="`dropdown_${propObj.id}`"
      @command="dropdownSelect($event, propObj)"
    >
      <!-- 激活按钮 -->
      <img
        v-if="buttonIcon"
        class="buttonImg"
        :style="{...buttonStyle}"
        :src="buttonIcon"
      >
      <slot
        v-else
        name="triggerButton"
      ></slot>

      <el-dropdown-menu
        slot="dropdown"
        :style="{...boxStyle}"
        @mouseenter.native="singleEnter(propObj)"
        @mouseleave.native="singleNativeLeave(propObj)"
      >
        <slot name="header"></slot>
        <el-dropdown-item
          :command="item.id"
          v-for="item in lists"
          :key="item.id"
          :style="{...styleItem}"
        >
          <div
            class="setDropdownSingle"
            @mouseleave="changImgByLeave(item)"
            @mouseenter="changImgByEnter(item)"
          > <img :src="item.status? item.hoverIcon:item.defaultIcon">
            <span>{
   {item.id}}</span>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import _ from "lodash"
export default {
  data () {
    return {
      lists: [],
      timer:null
    }
  },
  props: {
    // 可能有v-for遍历需要存储当前的遍历值
    propObj: {
      type: Object,
      default: () => {
        return {
          id: 1
        }
      }
    },
    // 下拉选择菜单
    selectData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 按钮图片
    buttonIcon: {
      type: String,
      default: ''
    },
    // 移出modal是否需要隐藏下拉菜单
    mouseLeaveHidden: {
      type: Boolean,
      default: false
    },
    // 激活按钮样式
    buttonStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 单行样式
    styleItem: {
      default: () => {
        return {}
      }
    },
    // 盒子样式
    boxStyle: {
      default: () => {
        return {}
      }
    }
  },

  methods: {
    dropdownSelect (item, row) {
      // item : 菜单按钮key  row：当前选中对象
      this.$emit('change', item, row)
    },
    singleEnter (row) {
      row.menuShow = true
      clearTimeout(this.timer)
    },
    singleLeave (row) {
      row.menuShow = false

    },
    singleNativeLeave (row) {
      if (this.mouseLeaveHidden) {
        this.timer = setTimeout(() => {
          row.menuShow = false
          this.$refs['dropdown_' + row.id].visible = false
        },300)

      }
    },
    changImgByEnter (row) {
      row.status = true
    },
    changImgByLeave (row) {
      row.status = false
    }

  },
  created () {

    this.lists = _.cloneDeep(this.$props.selectData) || []
    this.lists.forEach(item => {
      this.$set(item, 'status', false)
    })

  }
}
</script>

<style scoped lang="less">
.setDropdownSingle {
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 0 8px;
  > img {
    margin-right: 12px;
  }
  &:hover {
    background-color: #5452f6;
    color: #fff;
  }
}
.buttonImg {
  cursor: pointer;
}
/deep/ .el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: transparent;
  color: #606266;
}
/deep/ .el-tooltip__popper {
  max-width: 180px;
  max-height: 94px;
  overflow: hidden;
}
.el-dropdown-menu__item {
  padding: 0 10px;
}
</style>