xiangyuan-app/src/common/components/parts/HomeTitle.vue

<template>
  <SubTitle 
    :title="title" 
    :moreText="moreText"
    :showMore="showMore" 
    :padding="[showTopMargin ? 25 : 5, 0, 5, 0]"
    @moreClicked="emit('moreClicked')"
  >
    <template #icon>
      <FlexRow align="center">
        <Image :src="icon" :width="66" :height="42" mode="widthFix" />
        <Width :width="15" />
      </FlexRow>
    </template>
    <template #title> 
      <FlexRow align="center">
        <Text :text="titleBegin2" fontConfig="primaryTitle" color="#55989a" />
        <Text v-if="titleEnd" :text="titleEnd" fontConfig="primaryTitle" color="#5f3f2c" />
      </FlexRow>
    </template>
    <template #right>
      <slot name="right" />
    </template>
  </SubTitle>
</template>

<script setup lang="ts">
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import SubTitle from '@/components/display/title/SubTitle.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Width from '@/components/layout/space/Width.vue';
import { computed } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  icon: {
    type: String,
    default: 'https://xy.wenlvti.net/app_static/images/home/HomeTitleIcon.png',
  },
  showMore: {
    type: Boolean,
    default: false,
  },
  showTopMargin: {
    type: Boolean,
    default: true,
  },
  moreText: {
    type: String,
    default: '更多',
  },
  lightCount: {
    type: Number,
    default: 2,
  },
});
const emit = defineEmits(['moreClicked'])

const titleBegin2 = computed(() => {
  if (props.title.length > props.lightCount) {
    return props.title.slice(0, props.lightCount);
  }
  return props.title;
});
const titleEnd = computed(() => {
  if (props.title.length > props.lightCount) {
    return props.title.slice(props.lightCount);
  }
  return '';
});

</script>