xiangyuan-app/src/components/display/Divider.vue

<template>
  <view 
    :class="[
      'nana-divider',
      type,
      orientation,
    ]"
    :style="outStyle"
  >
    <template v-if="text">
      <view class="line left" :style="lineStyle">
        <view class="bar" :style="barStyle" />
      </view>
      <text class="line center" :style="{
        ...lineStyle,
        ...textStyle
      }">{{ text }}</text>
      <view class="line right">
        <view class="bar" :style="barStyle" />
      </view>
    </template>
    <view v-else class="line" :style="lineStyle">
      <view class="bar" :style="barStyle" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';


type DividerOrientationTypes = 'left' | 'right' | 'center';

export interface DividerProps {
  /**
   * 是否虚线
   * @default false
   */
  dashed?: boolean;
  /**
   * 是否虚线 (dotted)
   * @default false
   */
  dotted?: boolean
  /**
   * 线的颜色，默认 gray
   * @default gray
   */
  color?: string;
  /**
   * 线的颜色
   * @default none
   */
  backgroundColor?: string;
  /**
   * 分割线标题的位置，默认 center
   */
  orientation?: DividerOrientationTypes;
  /**
   * 水平还是垂直类型
   * @default 'horizontal'
   */
  type?: 'horizontal' | 'vertical';
  /**
   * 分割线上面的文字（仅水平状态有效）
   */
  text?: string,
  /**
   * 分割线上面的文字样式
   */
  textStyle?: object,
  /**
   * 分割线宽度
   * @default 1
   */
  width?: number;
  /**
   * 容器大小（垂直的时候是宽度，水平的时候是高度）
   * @default 36
   */
  size?: number;
}

const theme = useTheme();

const props = withDefaults(defineProps<DividerProps>(), {
  color: () => propGetThemeVar('DividerColor', 'grey'),
  backgroundColor: () => propGetThemeVar('DividerBackgroundColor', undefined)!,
  width: () => propGetThemeVar('DividerWidth', 2),
  size: () => propGetThemeVar('DividerSize', 36),
  type: 'horizontal',
  orientation: 'center',
});

const outStyle = computed(() => {
  return {
    backgroundColor: theme.resolveThemeColor(props.backgroundColor),
  }
})
const lineStyle = computed(() => {
  return {
    fontSize: '22rpx',
    color: theme.resolveThemeColor(props.color),
    width: theme.resolveThemeSize(props.type === 'horizontal' ? '100%' : props.size),
    height: theme.resolveThemeSize(props.type === 'vertical' ? '100%' : props.size),
  }
})
const barStyle = computed(() => {
  const border = `${theme.resolveThemeSize(props.width)} ${props.dashed ? 'dashed' : 'solid'} ${theme.resolveThemeColor(props.color)}`
  return {
    borderLeft: props.type === 'vertical' ? border : undefined,
    borderTop: props.type === 'vertical' ? undefined : border,
    width: theme.resolveThemeSize(props.type === 'horizontal' ? '100%' : props.width),
    height: theme.resolveThemeSize(props.type === 'vertical' ? '100%' : props.width),
  }
})
</script>

<style lang="scss">
.nana-divider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;

  .line {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;

    &.center {
      flex-shrink: 0;
      text-align: center;
    }
  }

  &.left {
    .line.left {
      flex: 0.25;
    }
  }
  &.right {
    .line.right {
      flex: 0.25;
    }
  }


  &.vertical {
    flex-direction: column;
    height: 100%;
  }
  &.horizontal {
    flex-direction: row;
  }
}
</style>