xiangyuan-app/src/components/form/CheckBoxDefaultButton.vue

<template>
  <view class="nana-check-default-button" :style="{
    ...themeStyles.checkButtonOutView.value,
    ...selectStyleType(shape, 'round', {
      round: { borderRadius: themeContext.resolveThemeSize(size) },
      square: { borderRadius:  themeContext.resolveSize(0) },
    }),
    width: themeContext.resolveSize(size),
    height: themeContext.resolveSize(size),
    borderStyle: 'solid',
    borderWidth: themeContext.resolveSize(borderWidth),
    borderColor: themeContext.resolveThemeColor(disabled ?
      (on ? disableCheckedBorderColor : disableBorderColor) :
      (on ? checkedBorderColor : borderColor)
    ),
    backgroundColor: themeContext.resolveThemeColor(disabled ?
      (on ? disableCheckedBackgroundColor : disableBackgroundColor) :
      (on ? checkedBackgroundColor : backgroundColor)
    ),
    ...style,
  }">
    <Icon
      v-if="on && type=='icon'" 
      :icon="icon" 
      :color="disabled ? disableCheckColor : checkColor" 
      :size="iconSize"
    />
    <view v-else-if="on && type=='radio'" :style="{
      borderRadius: shape === 'round' ? themeContext.resolveThemeSize(iconSize) : undefined,
      width: themeContext.resolveThemeSize(iconSize), 
      height: themeContext.resolveThemeSize(iconSize),
      backgroundColor: themeContext.resolveThemeColor(disabled ? disableCheckColor : checkColor),
    }" />
  </View>
</template>

<script setup lang="ts">
import Icon from '../basic/Icon.vue';
import { useTheme, type TextStyle, type ViewStyle } from '../theme/ThemeDefine';
import { DynamicSize, selectStyleType } from '../theme/ThemeTools';

export interface CheckBoxDefaultButtonProps {
  /**
   * 是否处于激活状态
   * @default false
   */
  on?: boolean;
  /**
   * 未选中状态下边框颜色。
   * @default border.input
   */
  borderColor?: string|undefined;
  /**
   * 选中状态下边框颜色。
   * @default primary
   */
  checkedBorderColor?: string|undefined;
  /**
   * 禁用并且未选中状态下边框颜色。
   * @default grey
   */
  disableBorderColor?: string|undefined;
  /**
   * 禁用并且选中状态下边框颜色。
   * @default grey
   */
  disableCheckedBorderColor?: string|undefined;
  /**
   * 图标颜色。
   * @default white
   */
  checkColor?: string|undefined;
  /**
   * 禁用状态下图标颜色。
   * @default grey
   */
  disableCheckColor?: string|undefined;
  /**
   * 未选中状态下按钮背景颜色。
   * @default white
   */
  backgroundColor?: string|undefined;
  /**
   * 且选中状态下按钮背景颜色。
   * @default primary
   */
  checkedBackgroundColor?: string|undefined;
  /**
   * 禁用并且未选中状态下按钮背景颜色。
   * @default background
   */
  disableBackgroundColor?: string|undefined;
  /**
   * 禁用并且选中状态下按钮背景颜色。
   * @default background
   */
  disableCheckedBackgroundColor?: string|undefined;
  /**
   * 按钮大小。
   * @default 36
   */
  size?: number|undefined;
  /**
   * 图标大小。
   * @default 30
   */
  iconSize?: number|undefined;
  /**
   * 边框粗细。
   * @default 2
   */
  borderWidth?: number|undefined;
  /**
   * 图标。
   * @default 'check-mark'
   */
  icon?: string;
  /**
   * 是否处于禁用状态。
   * @default false
   */
  disabled?: boolean;
  /**
   * 自定义样式
   */
  style?: ViewStyle,
  /**
   * 这个按钮的形状。
   * * square：正方形
   * * round：圆形
   * @default 'round'
   */
  shape?: "square"|"round";
  /**
   * 这个按钮的显示模式。
   * * icon：多选按钮显示的图标
   * * radio：单选按钮显示的圆形
   * @default 'icon'
   */
  type?: "icon"|"radio";
}

const themeContext = useTheme(); 

withDefaults(defineProps<CheckBoxDefaultButtonProps>(), {
  on: false,
  borderColor: 'border.input',
  checkedBorderColor: 'primary',
  disableBorderColor: 'grey',
  disableCheckedBorderColor: 'grey',
  checkColor: 'white',
  disableCheckColor: 'grey',
  backgroundColor: 'white',
  checkedBackgroundColor: 'primary',
  disableBackgroundColor: 'background',
  disableCheckedBackgroundColor: 'background',
  size: 36,
  iconSize: 30,
  borderWidth: 2,
  icon: 'check-mark',
  disabled: false,
  shape: 'round',
  type: 'icon',
});

const themeStyles = themeContext.useThemeStyles({
  checkButtonOutView: {
    marginRight: DynamicSize('CheckBoxButtonMarginRight', 8),
  },
})

defineOptions({
  options: {
    styleIsolation: "shared",
    virtualHost: true,
  }
})
</script>

<style>
.nana-check-default-button {
  display: flex;
  overflow: hidden;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
</style>