# t-footer
Footer 页脚
t-footer 组件介绍
页脚组件，用于显示页面底部的辅助信息、导航链接或版权声明，支持固定在页面底部，且可以包含多个可点击的导航项。
t-footer 平台兼容
| Harmony | H5 | Android | iOS | 小程序 | UTS |
|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
t-footer 基础用法
基础用法参考 demo/footer/footer.uvue。
vue
<template>
<view>
<tui-theme-switch></tui-theme-switch>
<t-card class="m-15"
title="Footer 页眉 页脚"
sub-title="页脚组件提供了一个固定的页面底部区域，用于显示辅助信息、导航链接或版权声明。其功能亮点包括：支持自定义样式和文本，可固定在页面底部，且可以包含多个可点击的导航项。使用场景包括：在网站或应用的底部提供额外的导航选项，显示版权信息，或放置其他辅助性内容。"></t-card>
<t-footer></t-footer>
<t-footer :navigate="navigate"></t-footer>
<t-footer :navigate="navigate2"></t-footer>
<t-footer :isFixed="true"
:navigate="navigate"></t-footer>
</view>
</template>
<script setup>
import { ref } from 'vue'
const navigate = ref([
{
text: '底部链接',
id: 0
}
])
const navigate2 = ref([
{
text: '底部链接',
id: 1
},
{
text: '底部链接2',
id: 2
}
])
</script>t-footer Props
| 属性名 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | "medium" | 组件尺寸 | large, medium, small, mini |
| type | String | "primary" | 组件类型 | info, primary, error, warning, success |
| disabled | Boolean | false | 组件是否禁用 | true, false |
| hover | Boolean | false | 是否有点击效果 | true, false |
| path | String | "" | 点击组件后跳转的页面路径 | - |
| effect | String | "normal" | 组件显示主题 | normal, dark, light, plain |
| text | Array | ["Copyright © 2024"] | 显示的内容 | - |
| navigate | Array | [] | 导航配置 | - |
| textClass | String | "" | 内容样式 | - |
| isFixed | Boolean | false | 是否固定定位 | true, false |
t-footer Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | - |
| transitionend | 动画结束时触发 | - |
| initFinished | 组件初始化完成触发 | 组件的节点信息 |
| touchstart | 触摸开始时触发 | 触摸事件对象 |
| touchend | 触摸结束时触发 | 触摸事件对象 |
| touchmove | 触摸移动时触发 | 触摸事件对象 |
| touchcancel | 触摸取消时触发 | 触摸事件对象 |
t-footer Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义内容插槽，用于替换默认的页脚内容 |