xiangyuan-app/src/components/dialog/DialogButton.vue

<template>
  <FlexRow
    :innerStyle="{
      ...themeStyles.dialogButton.value,
      ...vertical ? {} : themeStyles.dialogButtonHorz.value,
    }"
    :pressedColor="themeContext.resolveThemeColor(pressedColor)"
    touchable
    @click="loading ? undefined : $emit('click')"
  >
    <ActivityIndicator 
      v-if="loading"
      :color="themeContext.resolveThemeColor(buttonColor)" 
      :size="themeContext.resolveThemeSize('DialogButtonTextFontSize', 30)"
    />
    <text 
      v-else 
      :style="{ 
        ...themeStyles.buttonText.value, 
        color: themeContext.resolveThemeColor(buttonColor)
      }"
    >
      {{props.text}}
    </text>
  </FlexRow>
</template>

<script setup lang="ts">
import ActivityIndicator from '../basic/ActivityIndicator.vue';
import FlexRow from '../layout/FlexRow.vue';
import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize } from '../theme/ThemeTools';

/**
 * 对话框底部按扭组件Props
 */
export interface DialogButtonProps {
  /**
   * 按钮文字
   */
  text?: string|undefined,
  /**
  * 按钮文字
  * @default false
  */
  loading?: boolean,
  /**
  * 按钮文字
  * @default false
  */
  vertical?: boolean|undefined,
  /**
  * 按钮文字
  * @default undefined
  */
  buttonColor?: string|undefined,
  /**
  * 按钮文字
  * @default undefined
  */
  pressedColor?: string|undefined,
}

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  dialogButton: {
    justifyContent: 'center',
    alignItems: 'center',
    height: DynamicSize('DialogButtonHeight', 90),
    borderTopStyle: 'solid',
    borderTopWidth: DynamicSize('DialogButtonBorderTopWidth', 2),
    borderTopColor: DynamicColor('DialogButtonBorderTopColor', 'border.cell'),
    borderRightStyle: 'solid',
    borderRightWidth: DynamicSize('DialogButtonBorderTopWidth', 2),
    borderRightColor: DynamicColor('DialogButtonBorderTopColor', 'border.cell'),
  },
  dialogButtonHorz: {
    flex: 1,
    borderBottomStyle: 'solid',
    borderBottomWidth: DynamicSize('DialogButtonBorderBottomWidth', 2),
    borderBottomColor: DynamicColor('DialogButtonBorderBottomColor', 'border.cell'),
  },
  buttonText: {
    fontSize: DynamicSize('DialogButtonTextFontSize', 30),
    fontWeight: DynamicSize('DialogButtonTextFontWeight', 'bold'),
  },
});

const emit = defineEmits([ 'click' ]);

const props = withDefaults(defineProps<DialogButtonProps>(), {
  text: '确定',
  loading: false,
  vertical: false,
  buttonColor: undefined,
  pressedColor: () => propGetThemeVar('DialogButtonPressedColor', 'pressed.white'),
});


</script>