更新记录

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

• feat: 兼容uniapp

0.0.1（2025-05-28） 下载此版本

• init

平台兼容性

uni-app(4.44)

uni-app x(4.61)

其他

lime-card 卡片组件

• lime-card 是一个功能丰富的卡片组件，用于展示内容区块。支持标题、副标题、图标、封面图、自定义操作按钮等多种配置，可用于展示图文信息等多种场景。
• 插件依赖lime-shared,lime-style不喜勿下

文档

🚀 card【站点1】 🌍 card【站点2】 🔥 card【站点3】

安装

插件市场导入即可，首次导入可以需要重新编译

代码演示

基础用法

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

带操作按钮的卡片

按钮的配置请查看 市场 lime-button 文档 lime-button

 <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'
        }
      ]
    }
  }
}

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变量

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

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。