MTP20_H5_PLUS/src/packages/pc/components/modules/button-group/index.vue

<!-- 按钮组 -->
<template>
  <ul class="app-button-group" v-if="dataList.length">
    <li class="app-button-group__item" v-for="(item, index) in dataList" :key="index">
      <el-button :type="getButtonType(item.code)" @click="onClick(item.code)">{{ item.label }}</el-button>
    </li>
  </ul>
</template>

<script lang="ts" setup>
const emit = defineEmits(['click'])

defineProps({
  dataList: {
    type: Array,
    default: () => ([])
  }
})

const getButtonType = (code: string) => {
  const codes: { [key: string]: string[] } = {
    primary: ['trade', 'add', 'modify'],
    danger: ['delete'],
  };

  for (const key in codes) {
    if (codes[key].includes(code)) {
      return key;
    }
  }

  return 'info';
}

const onClick = (code: string) => {
  emit('click', code);
}
</script>

<style lang="less">
@import './index.less';
</style>