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

<template>
  <FlexRow
    v-if="title || description || cancelText || confirmText" 
    :innerStyle="{
      ...themeStyles.titleView.value,
      ...border ? themeStyles.titleViewBorder.value : {},
    }"
    justify="space-between"
  >
    <Button v-if="cancelText" type="text" :textColor="cancelTextColor" @click="emit('cancel')">{{ cancelText }}</Button>
    <view v-else />
    <FlexCol v-if="title || description" :style="themeStyles.titleTextView.value" center>
      <text v-if="title" :style="themeStyles.title.value">{{ title }}</text>
      <text v-if="description" :style="themeStyles.description.value">{{ description }}</text>
    </FlexCol>
    <Button v-if="confirmText" type="text" :textColor="confirmTextColor" :touchable="!confirmDisabled" @click="emit('confirm')">{{ confirmText }}</Button>
    <view v-else />
  </FlexRow>
</template>

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

export interface ActionSheetTitleProps {
  /**
   * 标题
   */
  title?: string,
  /**
  * 说明
  */
  description?: string,
  /**
  * 取消按钮文字，如果不为空则会在左边添加一个取消按钮
  */
  cancelText?: string,
  /**
  * 确定按钮文字，如果不为空则会在右边添加一个确定按钮
  */
  confirmText?: string,
  /**
  * 取消按钮文字颜色
  * @default text.content
  */
  cancelTextColor?: string,
  /**
  * 确定按钮文字颜色
  * @default primary
  */
  confirmTextColor?: string,
  /**
  * 确定按钮是否禁用
  * @default false
  */
  confirmDisabled?: boolean,
  /**
  * 是否显示底部边框
  * @default true
  */
  border?: boolean;
}

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  titleView: {
    padding: DynamicSize2('ActionSheetTitlePaddingHorizontal', 'ActionSheetTitlePaddingVertical', 16, 20),
  },
  titleViewBorder: {
    borderBottomStyle: 'solid',
    borderBottomColor: DynamicColor('ActionSheetTitleBorderBottomColor', 'border.cell'),
    borderBottomWidth: DynamicSize('ActionSheetTitleBorderBottomWidth', 2),
  },
  titleTextView: {
    paddingTop: DynamicSize('ActionSheetTitleTextPaddingVertical', 5),
    paddingBottom: DynamicSize('ActionSheetTitleTextPaddingVertical', 10),
  },
  title: {
    fontSize: DynamicSize('ActionSheetTitleTextFontSize', 32),
    color: DynamicColor('ActionSheetTitleTextColor', 'text.content'),
  },
  description: {
    fontSize: DynamicSize('ActionSheetTitleDescriptionFontSize', 26),
    color: DynamicColor('ActionSheetTitleDescriptionColor', 'text.second'),
  },
});

const emit = defineEmits([ 'cancel', 'confirm' ]);
const props = withDefaults(defineProps<ActionSheetTitleProps>(), {});


</script>