1. <template>
    2.   <div>
    3.     <el-dropdown class="mainBtn">
    4.       <el-button type="primary" size="mini"
    5.                  @click="btnClick('')">
    6.         {{ mainBtnLabel }}<i class="el-icon-arrow-down el-icon--right"></i>
    7.       </el-button>
    8.       <div class="dropdownBtn">
    9.         <div class="dropButton" :style="'width:100px;height:28px'" v-for="item in buttonData"
    10.              :key="item.label"
    11.              @click="btnClick(item.methodName,item.type)">
    12.           <span class="dropButtonSpan">{{ item.label }}</span>
    13.         </div>
    14.       </div>
    15.       <el-dropdown-menu class="hidden">
    16.       </el-dropdown-menu>
    17.     </el-dropdown>
    18.   </div>
    19. </template>
    21. <script>
    22. export default {
    23.   name: "ZjdsjjgCommonDropdownButton",
    24.   props: {
    25.     mainBtnLabel: {
    26.       type: String,
    27.       default: "保存并关闭"
    28.     },
    29.     buttonData: {
    30.       type: Array,
    31.       default: () => {
    32.         return [
    33.           {
    34.             label: "保存",
    35.             method: "",
    36.           },
    37.         ]
    38.       }
    39.     },
    40.   },
    41.   methods: {
    42.     btnClick(methodName, type) {
    43.       methodName = methodName || "" ? methodName : "saveAndBack";
    44.       if (!type) {
    45.         type = "";
    46.       }
    47.       this.$emit(methodName, type);
    48.     },
    49.   },
    50.   computed: {},
    51.   data() {
    52.     return {
    53.       showBtn: false,
    54.     }
    55.   }
    56. }
    57. </script>
    59. <style scoped>
    60. .mainBtn:hover .dropdownBtn {
    61.   display: block;
    62. }
    64. .mainBtn .dropdownBtn {
    65.   display: none;
    66. }
    68. .dropdownBtn {
    69.   position: absolute;
    70.   z-index: 999;
    71.   line-height: 0;
    72.   box-shadow: 0 1px 2px -0.8px #333333;
    73.   background-color: #FFFFFF;
    74.   padding-top: 5px;
    75.   /*display: none;*/
    76. }
    78. .hidden {
    79.   display: none;
    80. }
    82. .dropButton {
    83.   height: 25px;
    84.   text-align: center;
    85.   line-height: 25px;
    86.   cursor: pointer;
    87.   margin-bottom: 5px;
    88. }
    90. .dropButton:before {
    91.   content: '';
    92.   display: inline-block;
    93.   vertical-align: middle;
    94.   height: 100%;
    95. }
    97. .dropButton:hover {
    98.   background-color: #F1F4F7;
    99.   color: #409EFF;
    100. }
    102. .dropButtonSpan {
    103.   font-size: 12px;
    104.   font-family: 'Microsoft YaHei 微软雅黑', serif;
    105. }
    106. </style>

    GIF1.gif