minnan/src/components/dialog/ActionSheet.vue

<template>
  <Popup
    v-bind="props"
    :closeable="showCancel"
    :closeIcon="false"
    :position="center ? 'center' : 'bottom'"
    :size="center ? themeContext.resolveThemeSize(centerWidth) : 'auto'"
    backgroundColor="transparent"
    @close="onCancelClick"
  >
    <slot name="content" :close="onCancelClick">
      <FlexCol :padding="innerPadding">
        <FlexCol :innerStyle="themeStyles.topView.value">
          <ActionSheetTitle :title="title" :description="description" />
          <scroll-view 
            :scroll-y="true"
            :style="{
              ...themeStyles.topScroll.value,
              width: center ? themeContext.resolveThemeSize(centerWidth) : undefined,
            }"
          >
            <FlexCol position="relative">
              <ActionSheetItem
                v-for="(item, index) in props.actions"
                :key="item.name"
                :name="item.name"
                :bold="item.bold || themeContext.getVar('ActionSheetItemBold', false)"
                :color="themeContext.resolveThemeColor(item.color || props.textColor || themeContext.resolveThemeColor('ActionSheetItemColor', 'text.content'))"
                :subname="item.subname"
                :disabled="item.disabled"
                @click="onItemClick(item, index)"
              />
            </FlexCol>
          </scroll-view>
        </FlexCol>
        <FlexCol v-if="showCancel" position="relative" :innerStyle="themeStyles.viewCancel.value">
          <ActionSheetItem
            :name="props.cancelText || '取消'"
            :bold="themeContext.getVar('ActionSheetCancelBold', false)"
            :color="themeContext.resolveThemeColor(props.textColor || themeContext.resolveThemeColor('ActionSheetCancelColor', 'text.content'))"
            :subname="''"
            :disabled="false"
            @click="onCancelClick"
          />
        </FlexCol>
      </FlexCol>
    </slot>
  </Popup>
</template>

<script setup lang="ts">
import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize, screenHeight } from '../theme/ThemeTools';
import ActionSheetItem from './ActionSheetItem.vue';
import ActionSheetTitle from './ActionSheetTitle.vue';
import FlexCol from '../layout/FlexCol.vue';
import Popup from './Popup.vue';
import type { PopupProps } from './Popup.vue';
import { computed } from 'vue';

export interface ActionSheetProps extends Omit<PopupProps, 'onClose'|'position'|'closeable'|'position'|'size'> {
  /**
   * 是否显示动作面板
   * @default false
   */
  show: boolean;
  /**
   * 是否显示取消按扭
   * @default false
   */
  showCancel?: boolean;
  /**
   * 取消条目的文字
   */
  cancelText?: string;
  /**
   * 顶部标题
   */
  title?: string;
  /**
   * 选项上方的描述信息
   */
  description?: string;
  /**
   * 面板选项列表
   */
  actions?: ActionSheetItem[];
  /**
   * 是否在点击条目后自动关闭
   * @default false
   */
  autoClose?: boolean;
  /**
   * 是否在屏幕居中显示
   * @default false
   */
  center?: boolean;
  /**
   * 居中显示时的宽度
   */
  centerWidth?: string|number;
  /**
   * 条目文字颜色
   */
  textColor?: string;
}
export interface ActionSheetItem {
  /**
   * 标题
   */
  name: string;
  /**
   * 二级标题
   */
  subname?: string;
  /**
   * 选项文字颜色
   */
  color?: string;
  /**
   * 是否加粗当前选项
   */
  bold?: boolean;
  /**
   * 是否禁用当前选项
   */
  disabled?: boolean;
}

const emit = defineEmits([ 'close', 'select' ]);
const props = withDefaults(defineProps<ActionSheetProps>(), {
  mask: true,
  safeArea: true,
  centerWidth: () => propGetThemeVar('ActionSheetCenterWidth', '600rpx'),
});

const innerPadding = computed(() => themeContext.getVar('ActionSheetInnerPadding', 20));

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  viewCancel: {
    backgroundColor: DynamicColor('ActionSheetCancelBackgroundColor', 'white'),
    borderRadius: DynamicSize('ActionSheetCancelBorderRadius', 22),
    marginTop: DynamicSize('ActionSheetCancelMarginTop', 20),
    overflow: 'hidden',
  },
  topScroll: {
    maxHeight: DynamicSize('ActionSheetMaxScrollHeight', (screenHeight - 200) + 'px'),
  },
  topView: {
    backgroundColor: DynamicColor('ActionSheetCancelBackgroundColor', 'white'),
    borderRadius: DynamicSize('ActionSheetCancelBorderRadius', 22),
    overflow: 'hidden',
  },
});

function onItemClick(item: ActionSheetItem, index: number) {
  emit('select', index, item.name);
  if (props.autoClose === true)
    onCancelClick();
}
function onCancelClick() {
  emit('close');
}

</script>