NaEasy UI

Appearance

Footer 页脚 ​

介绍 ​

Footer 页脚组件用于在页面底部显示导航链接、版权信息等内容。

导入 ​

js
import Footer from '@/components/display/Footer.vue'

使用方法 ​

基础用法 ​

显示简单的页脚，仅包含版权信息。

vue
<template>
  <Footer text="Copyright © 2025 Naeasy UI" />
</template>

显示链接 ​

显示包含导航链接的页脚。链接可以选择不同的打开方式，同 A 组件的配置。

vue
<template>
  <Footer 
    text="Copyright © 2025 Naeasy UI" 
    :links="[
      {
        text: 'Github',
        url: 'https://github.com/imengyu/naeasy-ui-uniapp',
        type: 'url',
      },
      {
        text: 'Naeasy UI Docs',
        url: 'https://docs.imengyu.top/naeasy-ui-uniapp-docs/',
        type: 'url',
      },
    ]"
  />
</template>

自定义按钮 ​

添加自定义按钮并绑定点击事件。

vue
<template>
  <Footer 
    text="Copyright © 2025 Naeasy UI" 
    :links="[
      {
        text: '自定义按钮',
        type: 'custom',
        url: '',
        onClick: onClickCustomButton,
      },
      {
        text: '返回上一页',
        url: '',
        type: 'back',
      },
    ]"
  />
</template>

<script setup lang="ts">
function onClickCustomButton() {
  uni.showToast({
    title: '点击了自定义按钮',
    icon: 'none',
  })
}
</script>

API 参考 ​

Props ​

名称说明类型必填默认值
backgroundColor背景颜色string--
padding内边距，如果是数字，则设置所有方向边距；两位数组 [垂直,水平]；四位数组 [上,右,下,左]number|number[]-20
text页脚文字内容string--
textProps文字组件的附加属性TextProps--
textSize文字大小number--
textColor文字颜色string--
linkProps链接组件的附加属性AProps--
linkColor链接颜色string--
links链接列表Array<{text: string, url: string, type: 'uni-page'|'url'|'back'|'custom', onClick?: (e: any) => void}>--

Slots ​

名称说明
default默认插槽，用于自定义整个页脚内容
links链接区域插槽，用于自定义链接显示
text文字区域插槽，用于自定义文字显示