Vue Element按钮Dropdown实现

前言​

欢迎大家来到我的博客，请各位看客们点赞、收藏、关注三连！

欢迎大家关注我的知识库，Java之从零开始·语雀

你的关注就是我前进的动力！

CSDN专注于问题解决的博客记录，语雀专注于知识的收集与汇总，包括分享前沿技术。

主体

需求
按钮打开有两个选项

<template>
  <div>
    <el-dropdown class="mainBtn">
      <el-button type="primary" size="mini"
                 @click="btnClick('')">
        {{ mainBtnLabel }}<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <div class="dropdownBtn">
        <div class="dropButton" :style="'width:100px;height:28px'" v-for="item in buttonData"
             :key="item.label"
             @click="btnClick(item.methodName,item.type)">
          <span class="dropButtonSpan">{{ item.label }}</span>
        </div>
      </div>
      <el-dropdown-menu class="hidden">
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "ZjdsjjgCommonDropdownButton",
  props: {
    mainBtnLabel: {
      type: String,
      default: "保存并关闭"
    },
    buttonData: {
      type: Array,
      default: () => {
        return [
          {
            label: "保存",
            method: "",
          },
        ]
      }
    },
  },
  methods: {
    btnClick(methodName, type) {
      methodName = methodName || "" ? methodName : "saveAndBack";
      if (!type) {
        type = "";
      }
      this.$emit(methodName, type);
    },
  },
  computed: {},
  data() {
    return {
      showBtn: false,
    }
  }
}
</script>

<style scoped>
.mainBtn:hover .dropdownBtn {
  display: block;
}

.mainBtn .dropdownBtn {
  display: none;
}

.dropdownBtn {
  position: absolute;
  z-index: 999;
  line-height: 0;
  box-shadow: 0 1px 2px -0.8px #333333;
  background-color: #FFFFFF;
  padding-top: 5px;
  /*display: none;*/
}

.hidden {
  display: none;
}

.dropButton {
  height: 25px;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
  margin-bottom: 5px;
}

.dropButton:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.dropButton:hover {
  background-color: #F1F4F7;
  color: #409EFF;
}

.dropButtonSpan {
  font-size: 12px;
  font-family: 'Microsoft YaHei 微软雅黑', serif;
}
</style>