energy_storage/web/src/components/OperateCom.vue

<template>
  <div class="operate">

    <template v-if="operateList.length < 4">
      <a-button
        v-for="item in operateList"
        :key="item.type"
        type="primary"
        style="margin-right: 5px"
        :class="['operateCol', item.type]"
        :disabled="item.disabled"
        @click="munuClick(item.type)"
        >{{ item.label }}
      </a-button>
    </template>
   

  </div>
</template>

<script>
export default {
  name: 'OperateCom',
  components: {  },
  props: {
    operateList: {
      type: Array,
      default: () => {
        return []
      }
    },
    record: {
      type: Object,
      default:()=>{}
    },
    flag: {
      type: String,
      default:''
    }
  },

  data() {
    return {}
  },
  watch: {
    operateList: {
      handler(n, o) {},
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    munuClick(type) {
      this.$emit('operateForm', type, { ...this.record })
    }
  }
}
</script>

<style lang="scss" scoped>
.moreIcon{
  color:#fff !important
}
:deep(.ant-btn) {
  padding: 0px 7px !important;
  height: 24px !important;
  font-size: 13px !important;
  letter-spacing: -1px;
  border-radius: 4px;
  & > span + .anticon {
    margin-inline-start: 4px;
  }
}
:deep(.ant-btn-primary) {
  box-shadow: none !important;
  background: var(--theme-btn3);
}
:deep(.ant-btn,.ant-btn-primary){
  &:hover{
    opacity: 0.9;
  }
  &:disabled{
    color: rgba(255,255,255,0.5);
  }
  }
.operate{
  display: flex;
  justify-content: center;
}
.operateCol {
  background: var(--theme-btn3);

  &.more {
    background: var(--theme-btn1);
  }

  &.del {
    background: var(--theme-btn2);
  }

}
.ant-dropdown .ant-dropdown-menu{
  background-color:var(--theme-opert-bg)!important;
}

</style>