更新记录

0.0.3（2025-12-09） 下载此版本

• fix: 修复类型问题

0.0.2（2025-04-21） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.0.1（2025-04-12） 下载此版本

• init

平台兼容性

uni-app(4.83)

uni-app x(4.85)

其他

lime-footer 页脚组件

一个功能丰富的页脚组件，用于展示页面底部信息。支持品牌Logo、导航链接和版权信息等多种配置，可用于网站底部、应用程序底部等多种场景。组件提供了丰富的自定义选项，可以满足各种页脚展示需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 页脚组件文档 - 站点1
• 页脚组件文档 - 站点2
• 页脚组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-footer
2. 导入后可能需要重新编译项目
3. 在页面中使用l-footer组件

代码演示

基础用法

最简单的页脚组件用法，只显示版权信息。

<l-footer text="Copyright © 2024-2025 LimeUI. All Rights Reserved." />

带导航链接的页脚

添加导航链接，方便用户快速访问重要页面。

<l-footer 
  :links="[
    {name: '用户协议', url: '/pages/agreement'},
    {name: '隐私政策', url: '/pages/privacy'},
    {name: '联系我们', url: '/pages/contact'}
  ]" 
  text="Copyright © 2024-2025 LimeUI. All Rights Reserved." 
/>

带品牌Logo的页脚

添加品牌Logo和名称，提升品牌形象。

<l-footer 
  :logo="{
    icon: '/static/logo.png',
    title: '品牌名称',
  }" 
  text="Copyright © 2024-2025 LimeUI. All Rights Reserved." 
/>

完整页脚

结合Logo、导航链接和版权信息的完整页脚。

<l-footer 
  :logo="{
    icon: '/static/logo.png',
    title: '品牌名称',
    url: '/pages/index'
  }" 
  :links="[
    {name: '用户协议', url: '/pages/agreement'},
    {name: '隐私政策', url: '/pages/privacy'},
    {name: '联系我们', url: '/pages/contact'}
  ]" 
  text="Copyright © 2024-2025 LimeUI. All Rights Reserved." 
/>

自定义颜色

自定义页脚中各元素的颜色。

<l-footer 
  :links="[
    {name: '用户协议', url: '/pages/agreement'},
    {name: '隐私政策', url: '/pages/privacy'}
  ]" 
  text="Copyright © 2024-2025 LimeUI. All Rights Reserved." 
  linkColor="#1989fa"
  lineColor="#dcdee0"
  textColor="#646566"
  color="#323233"
/>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-footer/components/lime-footer -->
<lime-footer />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

links 链接配置

链接列表的每个项目应包含以下属性：

interface Link {
  name: string;      // 链接名称
  url?: string;      // 跳转链接地址
  openType?: string; // 跳转方式
}

logo 配置

Logo配置对象应包含以下属性：

interface Logo {
  icon: string;      // 图标链接地址
  title: string;     // 标题文本
  url?: string;      // 跳转链接地址
  target?: string;   // 跳转方式
}

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助