cip-components/cip-button/index.js

import { computed, h, inject } from 'vue'
import { ElButton } from 'element-plus'
const defaultButtonConfigMap = {
  search: {
    type: 'primary',
    icon: 'el-icon-search',
    text: '搜索'
  },
  reset: {
    type: 'warning',
    icon: 'el-icon-refresh-left',
    text: '重置'
  },
  create: {
    type: 'primary',
    icon: 'el-icon-plus',
    text: '新建'
  },
  batchDelete: {
    type: 'danger',
    icon: 'el-icon-delete',
    text: '批量删除'
  }
}

export default {
  name: 'CipButton',
  props: {
    buttonType: String,
    size: {
      type: String,
      default: 'small'
    }
  },
  setup (props, context) {
    const cipConfig = inject('cip-config', {})
    const buttonConfigMap = computed(() => { // 默认buttonConfig配置与cipConfig配置合并
      const result = {}
      Object.keys(defaultButtonConfigMap).forEach(key => {
        const defaultButtonConfig = defaultButtonConfigMap[key]
        if (cipConfig.buttonConfigMap?.[key]) {
          result[key] = Object.assign({}, defaultButtonConfig, cipConfig.buttonConfigMap?.[key])
        } else {
          result[key] = defaultButtonConfig
        }
      })
      return result
    })
    const buttonConfig = computed(() => {
      return buttonConfigMap.value[props.buttonType] || {}
    })
    return () => h(ElButton, { ...context.attrs, size: props.size, type: buttonConfig.value.type, icon: buttonConfig.value.icon }, {
      default: () => (context.slots.default?.({ text: buttonConfig.value.text ?? '' }) || buttonConfig.value.text)
    })
  }
}