LimeUI+1.2.0

主题

LimeCard 卡片组件 ​

一个功能丰富的卡片组件，用于展示内容区块。支持标题、副标题、图标、封面图、自定义操作按钮等多种配置，可用于展示图文信息、产品信息、新闻内容等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求。

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

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础用法 ​

最简单的卡片组件用法，只需要设置标题即可。

html
<l-card title="卡片标题"></l-card>

基础卡片 ​

包含标题、副标题、额外信息和更多按钮的卡片。

html
<l-card 
  title="卡片标题" 
  note="副标题"
  extra="更多信息"
  more
>
  <text>这里是卡片内容</text>
</l-card>

带图标的卡片 ​

在卡片左侧添加图标，可以设置图标的名称、颜色和大小。

html
<l-card 
  title="卡片标题" 
  icon="home"
  iconColor="#1989fa"
  iconSize="24px"
>
  <text>这里是卡片内容</text>
</l-card>

带封面图的卡片 ​

添加封面图片，可以设置图片的裁剪和缩放模式。

html
<l-card 
  title="卡片标题" 
  cover="https://example.com/image.jpg"
  coverMode="aspectFill"
>
  <text>这里是卡片内容</text>
</l-card>

带操作按钮的卡片 ​

在卡片底部添加操作按钮，可以设置按钮的对齐方式。

html
<l-card 
  title="卡片标题"
  :actions="actions"
  actionsAlign="space-between"
>
  <text>这里是卡片内容</text>
</l-card>
js
export default {
  data() {
    return {
      actions: [
        {
          content: '操作1',
          type: 'primary'
        },
        {
          content: '操作2',
          type: 'default'
        }
      ]
    }
  },
  methods: {
    handleAction(index) {
      console.log('点击了按钮', index);
      // 处理按钮点击事件
    }
  }
}

快速预览 ​

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

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

插件标签说明 ​

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

Vue2使用说明 ​

main.js中添加以下代码：

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

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

API文档 ​

Props 属性说明 ​

属性名说明类型默认值
title卡片标题string-
note和标题同行的说明文字string-
extra右侧额外文字string-
icon左侧图标名称string-
image左侧图片地址string-
cover封面图片地址string-
more是否显示更多图标booleanfalse
inset是否使用内嵌样式booleantrue
actions操作按钮列表Array-
actionsAlign操作按钮对齐方式string'right'
iconColor左侧图标颜色string-
rightIcon右侧图标名称string-
rightIconColor右侧图标颜色string-
iconSize左侧图标大小string-
rightIconSize右侧图标大小string-
imageStyle左侧图片样式string | object-
coverStyle封面图片样式string | object-
coverMode封面图片裁剪、缩放的模式string'widthFix'
bgColor卡片背景色string-
headerBordered是否显示头部边框booleantrue
footerBordered是否显示底部边框booleantrue
lClass自定义类名string-
lClassLeftIcon左侧图标自定义类名string-
lClassRightIcon右侧图标自定义类名string-

coverMode 可选值 ​

值说明
scaleToFill不保持纵横比缩放图片，使图片完全适应
aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来
aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来
widthFix宽度不变，高度自动变化，保持原图宽高比不变
heightFix高度不变，宽度自动变化，保持原图宽高比不变
top不缩放图片，只显示图片的顶部区域
bottom不缩放图片，只显示图片的底部区域
center不缩放图片，只显示图片的中间区域
left不缩放图片，只显示图片的左边区域
right不缩放图片，只显示图片的右边区域
top left不缩放图片，只显示图片的左上边区域
top right不缩放图片，只显示图片的右上边区域
bottom left不缩放图片，只显示图片的左下边区域
bottom right不缩放图片，只显示图片的右下边区域

Events 事件 ​

事件名说明回调参数
action点击操作按钮时触发index: number
getuserinfo用户点击该按钮时，会返回获取到的用户信息event: UniEvent
contact客服消息回调event: UniEvent
getphonenumber获取用户手机号回调event: UniEvent
error当使用开放能力时，发生错误的回调event: UniEvent
opensetting在打开授权设置页后回调event: UniEvent
launchapp打开 APP 成功的回调event: UniEvent
chooseavatar获取用户头像回调event: UniEvent
agreeprivacyauthorization用户同意隐私协议事件回调event: UniEvent
more右侧更多事件event: UniEvent

Slots 插槽 ​

名称说明
default卡片内容
cover自定义封面
title自定义标题区域
icon自定义图标
header-extra自定义头部右侧区域
footer自定义底部内容

Action 按钮配置 ​

按钮的配置请查看：

操作按钮的配置项：

typescript
interface Action {
  content: string;      // 按钮文本内容
  type?: string;        // 按钮类型，可选值：primary、default等
  block?: boolean;      // 是否为块级元素
  disabled?: boolean;   // 是否禁用
  icon?: string;        // 图标名称
  loading?: boolean;    // 是否显示加载状态
  ghost?: boolean;      // 是否为幽灵按钮
  shape?: string;       // 按钮形状，可选值：rectangle等
  size?: string;        // 按钮大小，可选值：medium等
  variant?: string;     // 按钮变体
  color?: string;       // 按钮颜色
  textColor?: string;   // 文字颜色
  fontSize?: string;    // 文字大小
}

主题定制 ​

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

变量名称默认值描述
--l-card-header-line-height$line-height-md卡片标题行高
--l-card-header-padding-y$spacer卡片头部垂直内边距
--l-card-header-padding-x$spacer卡片头部水平内边距
--l-card-body-padding-y$spacer卡片主体垂直内边距
--l-card-body-padding-x$spacer卡片主体水平内边距
--l-card-bg-color$bg-color-container卡片背景色
--l-card-hover-color$gray-1卡片悬停背景色
--l-card-border-color$border-color-2卡片边框颜色
--l-card-title-color$text-color-1主标题颜色
--l-card-title-font-size$font-size-md主标题字体大小
--l-card-note-color$text-color-3副标题颜色
--l-card-note-font-size$font-size副标题字体大小
--l-card-extra-color$text-color-3额外文本颜色
--l-card-extra-font-size$font-size额外文本字体大小
--l-card-extra-icon-size$font-size-md额外图标大小
--l-card-left-icon-color$primary-color左侧图标颜色
--l-card-left-icon-size$font-size-heading-3左侧图标大小
--l-card-right-icon-color$text-color-3右侧图标颜色
--l-card-right-icon-size22px右侧图标大小
--l-card-image-width48px卡片图片宽度
--l-card-image-height48px卡片图片高度

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码