xiangyuan-app/src/components/nav/SegmentedControlItem.vue

<template>
  <Touchable
    :innerStyle="{
      ...itemStyle,
      ...disabled ? { opacity: 0.5 } : {},
      ...(index === 0 ? {
        borderTopLeftRadius: radius,
        borderBottomLeftRadius: radius,
      } : {}),
      ...(index !== maxLen ? {
        borderRightWidth: 0,
      } : {}),
      ...(index === maxLen ? {
        borderTopRightRadius: radius,
        borderBottomRightRadius: radius,
      } : {}),
      backgroundColor: active ? activeColor : undefined,
    }"
    :pressedColor="pressedColor"
    :touchable="!active && !disabled"
    @click="emit('click')"
  >
    <text :style="{
      ...itemTextStyle,
      color: active ? activeTextColor : activeColor,
    }">{{ label }}</Text>
  </Touchable>
</template>

<script setup lang="ts">
import Touchable from '../feedback/Touchable.vue';
import type { TextStyle, ViewStyle } from '../theme/ThemeDefine';

export interface SegmentedControlItemProps {
  label: string,
  active: boolean,
  index: number,
  disabled: boolean,
  radius: string,
  maxLen: number,
  activeColor: string,
  activeTextColor: string,
  pressedColor: string,
  itemStyle: ViewStyle,
  itemTextStyle: TextStyle,
}

const emit = defineEmits([ 'click' ]);
const props = defineProps<SegmentedControlItemProps>();

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