更新记录

0.0.4（2025-08-31） 下载此版本

• fix: 修复 more 事件报错的问题

0.0.3（2025-08-31） 下载此版本

• chore: 更新文档

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

• feat: 兼容uniapp

平台兼容性

uni-app(4.73)

uni-app x(4.76)

lime-card 卡片组件

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

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

文档链接

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

• 卡片组件文档 - 站点1
• 卡片组件文档 - 站点2
• 卡片组件文档 - 站点3

安装方法

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

代码演示

基础用法

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

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

基础卡片

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

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

带图标的卡片

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

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

带头像的卡片

在卡片左侧添加头像。

<l-card title="我是标题" note="这一定很美吧" image="https://picsum.photos/300/200?random=1"  >
    <text class="text">内容详情内容详情内容详情</text>
</l-card>

带封面图的卡片

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

<l-card 
  title="卡片标题" 
  cover="https://picsum.photos/300/200?random=1"
  coverMode="aspectFill"
>
  <text>这里是卡片内容</text>
</l-card>

带操作按钮的卡片

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

<l-card 
  title="卡片标题"
  :actions="actions"
  actionsAlign="space-between"
>
  <text>这里是卡片内容</text>
</l-card>

export default {
  data() {
    return {
      actions: [
        {
          content: '操作1',
          type: 'primary'
        },
        {
          content: '操作2',
          type: 'default'
        }
      ]
    }
  },
  methods: {
    handleAction(index) {
      console.log('点击了按钮', index);
      // 处理按钮点击事件
    }
  }
}

快速预览

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

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

插件标签说明

Vue2使用说明

main.js中添加以下代码：

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

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

API文档

Props 属性说明

coverMode 可选值

Events 事件

Slots 插槽

Action 按钮配置

按钮的配置请查看：

• 市场 lime-button
• 文档 lime-button

操作按钮的配置项：

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变量，可用于自定义样式：

支持与赞赏

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

支付宝赞助	微信赞助