cip-components/cip-button/index.js

import { computed, h } from 'vue'
import { useCipConfig } from '../hooks/use-cip-config'
import { ElButton } from 'element-plus'
import './index.less'
const defaultButtonConfigMap = {
  search: {
    type: 'primary',
    icon: 'el-icon-search',
    text: '搜索'
  },
  reset: {
    type: 'default',
    icon: 'el-icon-refresh-left',
    text: '重置'
  },
  create: {
    type: 'primary',
    icon: 'el-icon-plus',
    text: '新建'
  },
  batchDelete: {
    type: 'danger',
    icon: 'el-icon-delete',
    text: '批量删除'
  },
  export: {
    type: 'warning',
    icon: 'el-icon-download',
    text: '导出'
  }
}

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