LimeUI+1.2.0

主题

LimeFooter 页脚组件 ​

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

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

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础用法 ​

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

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

带导航链接的页脚 ​

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

html
<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和名称，提升品牌形象。

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

完整页脚 ​

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

html
<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." 
/>

自定义颜色 ​

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

html
<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"
/>

快速预览 ​

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

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

插件标签说明 ​

标签名说明
l-footer组件标签
lime-footer演示标签

Vue2使用说明 ​

main.js中添加以下代码：

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

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

API文档 ​

Props 属性说明 ​

属性名说明类型默认值
links导航链接列表Object[][]
logoLogo配置对象Object-
text版权信息文本string-
linkColor链接文字颜色string-
lineColor分隔线颜色string-
textColor版权文本颜色string-
color文字颜色string-

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

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

logo 配置 ​

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

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

主题定制 ​

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

变量名称默认值描述
--l-footer-text-color$text-color-3版权信息文本颜色
--l-footer-text-font-size$font-size-sm版权信息文本字号
--l-footer-text-line-height20px版权信息文本行高
--l-footer-text-margin-top$spacer-tn版权信息上边距
--l-footer-link-color$primary-color链接文本颜色
--l-footer-link-font-size$font-size-sm链接文本字号
--l-footer-link-line-height20px链接文本行高
--l-footer-link-dividing-line-padding-x$spacer-sm链接分隔线水平内边距
--l-footer-link-dividing-line-padding-y0链接分隔线垂直内边距
--l-footer-link-dividing-line-color$text-color-3链接分隔线颜色
--l-footer-logo-icon-width24pxLogo图标宽度
--l-footer-logo-icon-height24pxLogo图标高度
--l-footer-logo-icon-margin-right$spacer-xsLogo图标右侧间距
--l-footer-logo-title-font-size$font-size-mdLogo标题字号
--l-footer-logo-title-url-width128pxLogo标题链接宽度
--l-footer-logo-title-line-height24pxLogo标题行高
--l-footer-logo-title-color$text-color-1Logo标题颜色

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码