xiangyuan-app/src/components/display/block/TextBlock.vue

<script lang="ts">
/**
 * 组件说明: 文本块。
 * 
 * 可设置左右文字，左侧文字支持双行。
 * 
 * 此组件适用于需要展示多行文本信息并具备一定交互性和布局灵活性的场景，如列表项、信息展示框等。
 */
export default {}
</script>

<script setup lang="ts">
import FlexCol from '../../layout/FlexCol.vue';
import FlexRow from '../../layout/FlexRow.vue';
import Text, { type TextProps } from '../../basic/Text.vue';
import type { PropType } from 'vue';
import Touchable from '@/components/feedback/Touchable.vue';

defineEmits([ 'click' ])
defineProps({	
  /**
   * 主文本内容
   * @type {string}
   * @default ''
   */
  text : {
    type: String,
    default: '',
  },
  /**
   * 主文本的样式类名
   * @type {string}
   * @default 'contentLight'
   */
  textProps : {
    type: Object as PropType<TextProps>,
    default: () => ({
      color: 'text.second',
      fontSize: 26,
    }),
  },
  /**
   * 副文本内容
   * @type {string}
   * @default ''
   */
  text2 : {
    type: String,
    default: '',
  },
  /**
   * 副文本的样式类名
   * @type {string}
   * @default 'contentSecond'
   */
  text2Props : {
    type: Object as PropType<TextProps>,
    default: () => ({
      color: 'text.content',
      fontSize: 30,
    }),
  },
  /**
   * 前缀文本内容
   * @type {string}
   * @default ''
   */
  prefix : {
    type: String,
    default: '',
  },
  /**
   * 前缀文本样式类名
   * @type {string}
   * @default 'contentSecond'
   */
  prefixProps : {
    type: Object as PropType<TextProps>,
    default: () => ({
      color: 'text.content',
    }),
  },
  /**
   * 后缀文本内容
   * @type {string}
   * @default ''
   */
  suffix : {
    type: String,
    default: '',
  },
  /**
   * 后缀文本的样式类名
   * @type {string}
   * @default 'contentSecond'
   */
  suffixProps : {
    type: Object as PropType<TextProps>,
    default: () => ({
      color: 'text.content',
    }),
  },
  /**
   * 传递给根容器的额外属性对象
   * @type {Object}
   * @default undefined
   */
  viewProps: {
    type: Object,
    default: undefined
  },
  /**
   * 标识文本块是否可点击
   * @type {boolean}
   * @default false
   */
  touchable: {
    type: Boolean,
    default: false,
  },
  /**
   * 标识文本是否换行显示
   * @type {boolean}
   * @default false
   */
  wrap: {
    type: Boolean,
    default: false,
  },
})

</script>

<template>
  <Touchable
    :touchable="touchable"
    justify="space-between"
    align="center"
    direction="row"
    :setCursor="false"
    v-bind="viewProps"
    @click="$emit('click')"
  >
    <slot name="prefix">
      <Text v-if="prefix" class="nana-text-prefix" v-bind="prefixProps" :text="prefix" />
    </slot>
    <slot>
      <FlexCol v-if="text2" class="nana-text">
        <Text 
          :class="[
            'nana-text',
            wrap ? 'wrap' : '',
          ]" 
          v-bind="textProps"
        >
          {{ text }}
        </Text>
        <Text
          :class="[
            'nana-text',
            wrap ? 'wrap' : '',
          ]" 
           v-bind="text2Props"
        >
          {{ text2 }}
        </Text>
      </FlexCol>
      <Text 
        v-else
        :class="[
          'nana-text',
          wrap ? 'wrap' : '',
        ]" 
        v-bind="textProps"
        :text="text"
      />
    </slot>
    <slot name="suffix">
      <Text class="nana-text-suffix" v-bind="suffixProps" :text="suffix" />
    </slot>
  </Touchable>
</template>

<style lang="scss">
.nana-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 100%;
  max-width: 100%;

  &.wrap {
    white-space: normal;
  }
}
.nana-text-prefix {
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 20rpx;
}
.nana-text-suffix {
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>