minnan/src/components/basic/IconButton.vue

<template>
  <Touchable
    :pressedColor="pressedBackgroundColor"
    :innerStyle="style"
    touchable
    @click="(e) => emit('click', e)"
    v-bind="$attrs"
  >
    <Icon v-if="icon" v-bind="props" />
    <slot />
  </Touchable>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { propGetThemeVar, useTheme, type ViewStyle } from '../theme/ThemeDefine';
import { selectStyleType } from '../theme/ThemeTools';
import type { IconProps } from './Icon.vue';
import Icon from './Icon.vue';
import Touchable from '../feedback/Touchable.vue';

export type IconButtonShapeType = 'round'|'square-full'|'custom';

export interface IconButtonProps extends IconProps {
  /**
   * 按钮按下时的背景颜色
   * @default PressedColor(Color.white)
   */
  pressedBackgroundColor?: string,
  /**
   * 按钮边距
   */
  padding?: number,
  /**
   * 按钮形状预设
   * @default round
   */
  shape?: IconButtonShapeType;
  /**
   * 是否禁用
   * @default false
   */
  disabled?: boolean|undefined;
  /**
   * 按钮样式
   */
  buttonStyle?: ViewStyle;
  /**
   * 按钮大小
   */
  buttonSize?: number|string;
  /**
   * 按钮背景颜色
   */
  backgroundColor?: string;
}

const emit = defineEmits(['click']);
const theme = useTheme();
const props = withDefaults(defineProps<IconButtonProps>(), {
  shape: 'custom',
  pressedBackgroundColor: () => propGetThemeVar('IconButtonPressedColor', 'pressed.white')
});
const style = computed(() => {
  return {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: props.padding,
    width: theme.resolveThemeSize(props.buttonSize),
    height: theme.resolveThemeSize(props.buttonSize),
    backgroundColor: theme.resolveThemeColor(props.backgroundColor),
    ...selectStyleType(props.shape, 'round', {
      "round": {
        borderRadius: theme.resolveThemeSize('IconButtonRoundBorderRadius', 50),
      },
      "custom": {},
      "square-full": {
        height: '100%',
        aspectRatio: 1,
        borderRadius: 0,
      },
    }),
    opacity: props.disabled ? theme.getVar('IconButtonDisabledOpacity', 0.4) : 1,
    ...props.buttonStyle,
  };
});

defineOptions({
  options: {
    inheritAttrs: false,
    virtualHost: true,
  }
})
</script>