minnan/src/components/layout/FlexView.vue

<template>
  <view
    :id="innerId ?? id"
    :class="[
      'nana-flex-layout', { 
        'nana-flex-row': direction === 'row', 
        'nana-flex-column': direction === 'column' 
      },
      innerClass,
    ]"
    :style="finalStyle"
  >
    <slot />
  </view>
</template>

<script setup lang="ts">

/**
 * 组件说明：Flex组件，用于一些布局中快速写容器，是一系列盒子的基础组件。
 */
import { computed, getCurrentInstance } from 'vue';
import { type ThemePaddingMargin } from '../theme/ThemeDefine';
import { RandomUtils } from '@imengyu/imengyu-utils';
import { useBaseViewStyleBuilder } from './BaseView';

export type FlexDirection = "row"|"column"|'row-reverse'|'column-reverse';
export type FlexJustifyType =  'flex-start' | 'flex-end' | 'center' |'space-between' |'space-around' |'space-evenly';
export type FlexAlignType = "stretch"|'center'|'start'|'end'|'flex-start' | 'flex-end' | 'center';
export type StateType = 'default' | 'active' | 'pressed';

export interface FlexProps {
  innerId?: string,
  /**
   * 盒子定位
   */ 
  position?: "absolute" | "relative" | 'fixed' | 'sticky',
  /**
   * 弹性盒子方向
   */
  direction?: FlexDirection,
  /**
   * 子元素在主轴上的对齐方式
   */
  justify?: FlexJustifyType,
  /**
   * 子元素在交叉轴上的对齐方式
   */
  align?: FlexAlignType|"auto",
  /**
   * 当前元素在主轴上的对齐方式
   */
  alignSelf?: FlexAlignType|"auto",
  /**
   *  主轴与交叉轴是否居中
   */
  center?: boolean,
  /**
   * 弹性布局是否换行
   */
  wrap?: boolean,
  /**
   * 特殊样式
   */
  innerStyle?: object,
  /**
   * 特殊类名
   */
  innerClass?: string|string[]|object,
  /**
   * flex 参数
   */
  flex?: number|string,
  /**
   * flexBasis 参数
   */
  flexBasis?: number|string,
  /**
   * flexGrow 参数
   */
  flexGrow?: number,
  /**
   * flexShrink 参数
   */
  flexShrink?: number,
  /**
   * 内边距参数（支持数字或数组）
   */
  padding?: number|Array<number>|ThemePaddingMargin,
  /**
   * 外边距参数（支持数字或数组）
   */
  margin?: number|Array<number>|ThemePaddingMargin,
  /**
   * 位置参数
   */
  top?: number|string,
  right?: number|string,
  bottom?: number|string,
  left?: number|string,
  /**
   * 圆角
   */
  radius?: number|string,
  /**
   * 间距
   */
  gap?: number|string,
  /**
   * 背景颜色
   */
  backgroundColor?: string,
  /**
   * 阴影。使用主题中的阴影预设。
   */
  shadow?: string,
  /**
   * 边框。使用主题中的边框预设。
   */
  border?: string,
  /**
   * 边框颜色
   */
  borderColor?: string,
  /**
   * 边框宽度
   */
  borderWidth?: number|string,
  /**
   * 边框样式
   */
  borderStyle?: string,
  /**
   * 宽度
   */
  width?: number|string,
  /**
   * 高度
   */
  height?: number|string,
  overflow?: 'visible'|'hidden'|'scroll'|'auto'
  /**
   * 层级
   */
  zIndex?: number,
}

const props = withDefaults(defineProps<FlexProps>(), {
  direction: "column",
  backgroundColor: '',
});
const { commonStyle } = useBaseViewStyleBuilder(props);
const finalStyle = computed(() => {
  const obj : Record<string, any> = {};
  const o = {
    ...commonStyle.value,
    ...obj
  } 
  for (const key in o) {
    if (o[key] === undefined)
      delete o[key]; 
  }
  return o;
})

defineOptions({
  options: {
    styleIsolation: "shared",
    virtualHost: true
  }
});
const instance = getCurrentInstance();
const id = 'flex-item-' + RandomUtils.genNonDuplicateID(15);

defineExpose({
  measure() {
    return new Promise((resolve) => {
      const tabItem = uni.createSelectorQuery()
        .in(instance)
        .select(`#${id}`);
      tabItem.boundingClientRect().exec((res) => {
        resolve(res)
      })
    });
  },
})
</script>

<style>
.nana-flex-layout {
  display: flex;
}
.nana-flex-row {
  flex-direction: row;
}
.nana-flex-column {
  flex-direction: column;
}
</style>