xiangyuan-gov-app/src/components/display/Footer.vue

<template>
  <FlexCol center :padding="padding" :backgroundColor="props.backgroundColor">
    <slot class="links">
      <FlexRow v-if="props.links?.length" wrap align="center">
        <template v-for="(item, i) in props.links" :key="i">
          <A
            :href="item.url"
            :linkType="item.type"
            :fontSize="props.textSize"
            :color="props.linkColor"
            v-bind="props.linkProps"  
            @click="item.onClick"
          >
            {{ item.text }}
          </A>
          <Divider v-if="i < props.links.length - 1" type="vertical" />
        </template>
      </FlexRow>
    </slot>
    <slot class="text"> 
      <Text 
        v-if="props.text" 
        fontConfig="footerText"
        :fontSize="props.textSize"
        :color="props.textColor"
        v-bind="props.textProps"
      >
        {{ props.text }}
      </Text>
    </slot>
  </FlexCol>
</template>

<script setup lang="ts">
import Text, { type TextProps } from '../basic/Text.vue';
import FlexCol from '../layout/FlexCol.vue';
import FlexRow from '../layout/FlexRow.vue';
import A, { type AProps } from '../typography/A.vue';
import Divider from './Divider.vue';

export interface FooterProps {
  backgroundColor?: string,
  padding?: number|number[],
  text?: string,
  textProps?: TextProps,
  textSize?: number,
  textColor?: string,
  linkProps?: AProps,
  linkColor?: string,
  links?: {
    text: string,
    url: string,
    type: 'uni-page'|'url'|'back'|'custom',
    onClick?: (e: any) => void
  }[]
}

const props = withDefaults(defineProps<FooterProps>(), {
  padding: 20,
});

</script>