更新记录

1.0.5（2026-01-14） 下载此版本

增加defaultValue配置

1.0.4（2026-01-13） 下载此版本

日常功能修复

1.0.3（2026-01-12） 下载此版本

新增step类型(实验性)

平台兼容性

uni-app(4.66)

liaction-info-card

组件介绍

liaction-info-card 是一个数据驱动通用的信息卡片组件，用于展示结构化的信息列表，支持多种交互方式和灵活的配置。

功能特性

• ✨ 灵活的布局结构：支持头部、自定义内容、详情列表和底部插槽
• 🎨 多样化的数据展示：支持普通文本、状态徽章、链接和可编辑项
• 🔗 强大的交互能力：支持卡片点击、头部点击、列表项点击和链接点击
• ✏️ 可编辑功能：支持直接在卡片内编辑内容
• 🎯 灵活的配置选项：支持自定义样式、可见性控制和内容格式化
• 📱 响应式设计：适配不同屏幕尺寸

属性说明

事件说明

detailItems 配置项

items 配置项（适用于Radio、Checkbox和Checklist类型）

当isRadio、isCheckbox或type为'checklist'时，可以通过items配置项来定义多个选项，每个选项支持以下属性：

Radio/Checkbox选项属性

Checklist选项属性

使用示例

1. 基本使用

<template>
  <liaction-info-card 
    :title="'基本信息卡片'"
    :detail-items="detailItems"
    :data="data"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      data: {
        name: '张三',
        age: 25,
        gender: '男'
      },
      detailItems: [
        { label: '姓名', key: 'name' },
        { label: '年龄', key: 'age' },
        { label: '性别', key: 'gender' }
      ]
    }
  }
}
</script>

2. 带有链接的示例

<template>
  <liaction-info-card 
    :title="'链接类型示例'"
    :detail-items="detailItems"
    :data="data"
    @link-click="handleLinkClick"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      data: {
        website: 'https://example.com',
        document: '文档中心'
      },
      detailItems: [
        { label: '官方网站', key: 'website', isLink: true, showLinkIcon: true },
        { label: '文档中心', key: 'document', isLink: true, showLinkIcon: true }
      ]
    }
  },
  methods: {
    handleLinkClick({ item, data }) {
      console.log('链接点击', item, data);
    }
  }
}
</script>

3. 可编辑项示例

<template>
  <liaction-info-card 
    :title="'可编辑项示例'"
    :detail-items="detailItems"
    :data="data"
    @edit-complete="handleEditComplete"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      data: {
        username: 'user123',
        email: 'user@example.com'
      },
      detailItems: [
        { 
          label: '用户名', 
          key: 'username', 
          type: 'edit', 
          inputType: 'text',
          allowEmpty: false 
        },
        { 
          label: '邮箱', 
          key: 'email', 
          type: 'edit', 
          inputType: 'email',
          placeholder: '请输入邮箱' 
        }
      ]
    }
  },
  methods: {
    handleEditComplete({ item, value, data }) {
      console.log('编辑完成', item.label, value);
    }
  }
}
</script>

4. 自定义标题背景

<template>
  <liaction-info-card 
    :title="'自定义标题背景'"
    :detail-items="detailItems"
    :data="data"
    :header-class="'custom-header-bg'"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      data: {
        field1: '值1',
        field2: '值2'
      },
      detailItems: [
        { label: '字段1', key: 'field1' },
        { label: '字段2', key: 'field2' }
      ]
    }
  }
}
</script>

<style scoped>
/* 自定义标题背景样式 */
:deep(.custom-header-bg) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom-color: transparent;
}

:deep(.custom-header-bg .info-card__title) {
  color: white;
}
</style>

5. 布局方式示例

<template>
  <view class="demo-container">
    <!-- 水平布局（默认） -->
    <liaction-info-card 
      :title="'水平布局示例'"
      :detail-items="layoutItems"
      :data="layoutData"
      :layout="'horizontal'"
      class="demo-card"
    >
    </liaction-info-card>

    <!-- 垂直布局 -->
    <liaction-info-card 
      :title="'垂直布局示例'"
      :detail-items="layoutItems"
      :data="layoutData"
      :layout="'vertical'"
      class="demo-card"
    >
    </liaction-info-card>

    <!-- 垂直布局 + 不同对齐方式 -->
    <liaction-info-card 
      :title="'垂直布局对齐方式'"
      :detail-items="verticalAlignItems"
      :data="verticalAlignData"
      :layout="'vertical'"
      class="demo-card"
    >
    </liaction-info-card>

    <!-- 水平布局 + flex宽度配置 -->
    <liaction-info-card 
      :title="'水平布局flex宽度配置'"
      :detail-items="flexItems"
      :data="flexData"
      :layout="'horizontal'"
      :label-flex="1"  <!-- 全局标签flex配置 -->
      :content-flex="2"  <!-- 全局内容flex配置 -->
      class="demo-card"
    >
    </liaction-info-card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      layoutData: {
        name: '张三',
        age: 25,
        gender: '男'
      },
      layoutItems: [
        { label: '姓名', key: 'name' },
        { label: '年龄', key: 'age' },
        { label: '性别', key: 'gender' }
      ],
      verticalAlignData: {
        leftItem: '左对齐内容',
        centerItem: '居中对齐内容',
        rightItem: '右对齐内容'
      },
      verticalAlignItems: [
        { label: '左对齐', key: 'leftItem', verticalAlign: 'left' },
        { label: '居中对齐', key: 'centerItem', verticalAlign: 'center' },
        { label: '右对齐', key: 'rightItem', verticalAlign: 'right' },
        // label和content分别对齐
        { 
          label: 'label左对齐，content居中对齐', 
          key: 'centerItem', 
          labelAlign: 'left', 
          contentAlign: 'center' 
        }
      ],
      flexData: {
        name: '张三',
        phone23: '138xxxxxxx',
        email: 'xxx@example.com',
        address: 'xxxxxxxxxxxxxxxxxx88号'
      },
      flexItems: [
        { label: '姓名', key: 'name' },  // 使用全局flex配置
        { 
          label: '电话', 
          key: 'phone23', 
          labelFlex: 1.5,  // item级别覆盖全局配置
          contentFlex: 2.5
        },
        { 
          label: '邮箱', 
          key: 'email', 
          labelFlex: '100px'  // 使用固定宽度
        },
        { 
          label: '地址', 
          key: 'address', 
          contentFlex: 'auto'  // 自动宽度
        }
      ]
    }
  }
}
</script>

<style scoped>
.demo-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-card {
  margin: 0;
}
</style>

6. Radio类型示例

6.1 传统配置方式（多个item共享同一label）

<template>
  <liaction-info-card 
    :title="'Radio类型示例'"
    :detail-items="radioItems"
    :data="radioData"
    :layout="'vertical'"
    class="demo-card"
    @radio-click="handleRadioClick"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      radioData: {
        gender: 'male',
        status: 'active'
      },
      radioItems: [
        // 性别单选组
        { 
          label: '性别', 
          key: 'gender', 
          isRadio: true, 
          radioValue: 'male',
          radioLabel: '男',
          radioColor: '#007bff'
        },
        { 
          label: '性别', 
          key: 'gender', 
          isRadio: true, 
          radioValue: 'female',
          radioLabel: '女',
          radioColor: '#007bff'
        },
        // 状态单选组
        { 
          label: '状态', 
          key: 'status', 
          isRadio: true, 
          radioValue: 'active',
          radioLabel: '激活',
          radioColor: '#4CAF50',
          radioSize: 22
        },
        { 
          label: '状态', 
          key: 'status', 
          isRadio: true, 
          radioValue: 'inactive',
          radioLabel: '禁用',
          radioColor: '#F44336'
        }
      ]
    }
  },
  methods: {
    handleRadioClick({ item, data }) {
      console.log('Radio点击', item.radioLabel, item.radioValue, data);
    }
  }
}
</script>

6.2 新配置方式（单个item包含items数组）

<template>
  <liaction-info-card 
    :title="'Radio类型示例（新配置方式）'"
    :detail-items="radioItemsNew"
    :data="radioData"
    :layout="'vertical'"
    class="demo-card"
    @radio-click="handleRadioClick"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      radioData: {
        gender: 'male',
        status: 'active'
      },
      radioItemsNew: [
        // 性别单选组 - 使用items配置
        { 
          label: '性别', 
          key: 'gender', 
          isRadio: true, 
          items: [
            { 
              value: 'male',
              label: '男',
              color: '#007bff'
            },
            { 
              value: 'female',
              label: '女',
              color: '#007bff'
            }
          ]
        },
        // 状态单选组 - 使用items配置
        { 
          label: '状态', 
          key: 'status', 
          isRadio: true, 
          items: [
            { 
              value: 'active',
              label: '激活',
              color: '#4CAF50',
              size: 22
            },
            { 
              value: 'inactive',
              label: '禁用',
              color: '#F44336'
            },
            { 
              value: 'pending',
              label: '待处理',
              color: '#FFC107'
            },
            { 
              value: 'processing',
              label: '处理中',
              color: '#00BCD4',
              size: 18
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleRadioClick({ item, data }) {
      console.log('Radio点击', item.radioLabel, item.radioValue, data);
    }
  }
}
</script>

7. Checkbox类型示例

7.1 传统配置方式（多个item共享同一label）

<template>
  <liaction-info-card 
    :title="'Checkbox类型示例'"
    :detail-items="checkboxItems"
    :data="checkboxData"
    :layout="'vertical'"
    class="demo-card"
    @checkbox-click="handleCheckboxClick"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      checkboxData: {
        hobbies: ['reading', 'music'],
        status: ['active', 'processing']
      },
      checkboxItems: [
        // 爱好多选组
        { 
          label: '爱好', 
          key: 'hobbies', 
          isCheckbox: true, 
          checkboxValue: 'reading',
          checkboxLabel: '阅读',
          checkboxColor: '#007bff'
        },
        { 
          label: '爱好', 
          key: 'hobbies', 
          isCheckbox: true, 
          checkboxValue: 'music',
          checkboxLabel: '音乐',
          checkboxColor: '#007bff'
        },
        { 
          label: '爱好', 
          key: 'hobbies', 
          isCheckbox: true, 
          checkboxValue: 'sports',
          checkboxLabel: '运动',
          checkboxColor: '#007bff'
        }
      ]
    }
  },
  methods: {
    handleCheckboxClick({ item, data }) {
      console.log('Checkbox点击', item.checkboxLabel, item.checkboxValue, data);
    }
  }
}
</script>

7.2 新配置方式（单个item包含items数组）

<template>
  <liaction-info-card 
    :title="'Checkbox类型示例（新配置方式）'"
    :detail-items="checkboxItemsNew"
    :data="checkboxData"
    :layout="'vertical'"
    class="demo-card"
    @checkbox-click="handleCheckboxClick"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      checkboxData: {
        hobbies: ['reading', 'music'],
        status: ['active', 'processing']
      },
      checkboxItemsNew: [
        // 爱好多选组 - 使用items配置
        { 
          label: '爱好', 
          key: 'hobbies', 
          isCheckbox: true, 
          items: [
            { 
              value: 'reading',
              label: '阅读',
              color: '#007bff'
            },
            { 
              value: 'music',
              label: '音乐',
              color: '#007bff'
            },
            { 
              value: 'sports',
              label: '运动',
              color: '#007bff'
            },
            { 
              value: 'travel',
              label: '旅行',
              color: '#007bff'
            }
          ]
        },
        // 状态多选组 - 使用items配置
        { 
          label: '状态', 
          key: 'status', 
          isCheckbox: true, 
          items: [
            { 
              value: 'active',
              label: '激活',
              color: '#4CAF50',
              size: 22
            },
            { 
              value: 'inactive',
              label: '禁用',
              color: '#F44336'
            },
            { 
              value: 'pending',
              label: '待处理',
              color: '#FFC107'
            },
            { 
              value: 'processing',
              label: '处理中',
              color: '#00BCD4',
              size: 18
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleCheckboxClick({ item, data }) {
      console.log('Checkbox点击', item.checkboxLabel, item.checkboxValue, data);
    }
  }
}
</script>

8. 完整交互示例

<template>
  <liaction-info-card 
    :title="'完整交互示例'"
    :icon-src="'/static/logo.png'"
    :detail-items="detailItems"
    :data="data"
    :has-right-content="true"
    @click="handleCardClick"
    @header-click="handleHeaderClick"
  >
    <template #header-right>
      <text class="header-right-text">更多</text>
    </template>
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      data: {
        name: '交互示例',
        value: '12345',
        status: '正常',
        detail: '详情信息'
      },
      detailItems: [
        { label: '名称', key: 'name' },
        { label: '数值', key: 'value', type: 'edit', inputType: 'number' },
        { label: '状态', key: 'status', isStatusBadge: true, badgeClass: 'status-success' },
        { label: '详情', key: 'detail', isLink: true, showLinkIcon: true }
      ]
    }
  },
  methods: {
    handleCardClick() {
      console.log('卡片点击');
    },
    handleHeaderClick() {
      console.log('头部点击');
    }
  }
}
</script>

8. 折叠功能示例

<template>
  <liaction-info-card 
    :title="'可折叠信息卡片'"
    :detail-items="detailItems"
    :data="data"
    :is-collapsible="true"
    :collapsed="true"
    :show-count="3"
    :expand-text="'查看更多'"
    :collapse-text="'收起'"
    @collapse-change="handleCollapseChange"
    class="demo-card"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      data: {
        field1: '值1',
        field2: '值2',
        field3: '值3',
        field4: '值4',
        field5: '值5',
        field6: '值6',
        field7: '值7',
        field8: '值8'
      },
      detailItems: [
        { label: '字段1', key: 'field1' },
        { label: '字段2', key: 'field2' },
        { label: '字段3', key: 'field3' },
        { label: '字段4', key: 'field4' },
        { label: '字段5', key: 'field5' },
        { label: '字段6', key: 'field6' },
        { label: '字段7', key: 'field7' },
        { label: '字段8', key: 'field8' }
      ]
    }
  },
  methods: {
    handleCollapseChange({ collapsed, data }) {
      console.log('折叠状态变化', collapsed, data);
    }
  }
}
</script>

9. 检查事项（Checklist）类型示例

<template>
  <liaction-info-card 
    :title="'检查事项示例'"
    :detail-items="checklistItems"
    :data="checklistData"
    :layout="'vertical'"
    class="demo-card"
    @item-click="handleItemClick"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      checklistData: {},
      checklistItems: [
        {
          label: '检查事项',
          key: 'checklist',
          type: 'checklist',
          items: [
            {
              title: '检查事项一：经营资质',
              listType: 'ordered',
              listItems: [
                '是否取得道路运输经营许可',
                '是否取得道路客运班线经营许可',
                '是否存在超越许可事项，从事道路客运经营的'
              ]
            },
            {
              title: '检查事项二：车辆资质',
              listType: 'unordered',
              listItems: [
                '车辆技术等级是否符合要求',
                '车辆类型等级是否符合要求',
                '车辆是否按规定安装卫星定位装置'
              ]
            }
          ],
          events: [
            {
              name: 'item-click',
              handler: (item, data) => {
                console.log(`点击了检查事项: ${item.label}`);
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleItemClick({ item, data, event }) {
      console.log('检查事项点击', item, data, event);
    }
  }
}
</script>

10. 选择标签（Selected-Items）类型示例

<template>
  <liaction-info-card 
    :title="'选择标签示例'"
    :detail-items="selectedItems"
    :data="selectedItemsData"
    :layout="'vertical'"
    class="demo-card"
    @selected-items-click="handleSelectedItemsClick"
    @selected-item-delete="handleSelectedItemDelete"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      selectedItemsData: {
        inspectors: ['李潇潇', '王红红', '刘兰兰'],
        skills: ['JavaScript', 'Vue.js', 'React', 'Node.js']
      },
      selectedItems: [
        {
          label: '检查人员',
          key: 'inspectors',
          type: 'selected-items',
          selectText: '选择',
          events: [
            {
              name: 'selected-items-click',
              handler: (item, data) => {
                console.log(`点击了选择标签: ${item.label}`);
              }
            },
            {
              name: 'selected-item-delete',
              handler: (item, index, value, data) => {
                console.log(`删除了${item.label}中的第${index + 1}项: ${value}`);
              }
            }
          ]
        },
        {
          label: '技能标签',
          key: 'skills',
          type: 'selected-items',
          selectText: '添加技能',
          events: [
            {
              name: 'selected-items-click',
              handler: (item, data) => {
                console.log(`点击了技能标签: ${item.label}`);
              }
            },
            {
              name: 'selected-item-delete',
              handler: (item, index, value, data) => {
                console.log(`删除了技能标签: ${value}`);
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleSelectedItemsClick({ item, data }) {
      console.log('选择标签点击', item, data);
    },
    handleSelectedItemDelete({ item, selectedItem, index, data }) {
      console.log('选择标签删除', item, selectedItem, index, data);
    }
  }
}
</script>

11. 富文本（Rich-Text）类型示例

<template>
  <liaction-info-card 
    :title="'富文本示例'"
    :detail-items="richTextItems"
    :data="richTextData"
    class="demo-card"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      richTextData: {
        richContent: '<p>这是一段<span style="color: #007bff; font-weight: bold;">富文本</span>内容，支持<span style="background-color: #ffeb3b;">HTML</span>格式。</p>'
      },
      richTextItems: [
        {
          label: '富文本内容',
          key: 'richContent',
          type: 'rich-text',
          defaultContent: '<p>这是一段默认的富文本内容。</p>',
          selectable: 'content'
        }
      ]
    }
  }
}
</script>

12. 文件上传（Upload）类型示例

<template>
  <liaction-info-card 
    :title="'文件上传示例'"
    :detail-items="uploadItems"
    :data="uploadData"
    :layout="'vertical'"
    class="demo-card"
    @upload="handleUpload"
    @file-delete="handleFileDelete"
  >
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      uploadData: {
        file: [
          { name: '文档1.pdf', size: 2580000, type: 'application/pdf' },
          { name: '图片1.jpg', size: 1250000, type: 'image/jpeg' }
        ]
      },
      uploadItems: [
        {
          label: '上传文件',
          key: 'file',
          type: 'upload',
          placeholder: '点击上传文件',
          accept: '*/*',
          contentAlign: 'center',
          directUpload: true,
          maxCount: 5,
          events: [
            {
              name: 'upload',
              handler: (item, files, newFiles, data) => {
                console.log('文件上传', item, files, newFiles, data);
              }
            },
            {
              name: 'file-delete',
              handler: (item, files, deletedFile, index, data) => {
                console.log('文件删除', item, files, deletedFile, index, data);
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleUpload({ item, files, newFiles, data }) {
      console.log('文件上传', item, files, newFiles, data);
    },
    handleFileDelete({ item, files, deletedFile, index, data }) {
      console.log('文件删除', item, files, deletedFile, index, data);
    }
  }
}
</script>

13. 自定义折叠按钮示例

<template>
  <liaction-info-card 
    :title="'自定义折叠按钮'"
    :detail-items="detailItems"
    :data="data"
    :is-collapsible="true"
    :collapsed="collapsed"
    :show-count="2"
    @collapse-change="handleCollapseChange"
    class="demo-card"
  >
    <!-- 完全自定义折叠/展开按钮 -->
    <template #toggle-button="{ collapsed, toggle }">
      <view class="custom-toggle-button" @click="toggle">
        <text class="custom-toggle-text">
          {{ collapsed ? '展开详情' : '收起详情' }}
        </text>
        <view class="custom-toggle-icon" :class="{ 'icon-expanded': !collapsed }">
          <!-- 自定义箭头图标 -->
          <text class="arrow">▼</text>
        </view>
      </view>
    </template>
  </liaction-info-card>
</template>

<script>
export default {
  data() {
    return {
      collapsed: true,
      data: {
        field1: '值1',
        field2: '值2',
        field3: '值3',
        field4: '值4',
        field5: '值5'
      },
      detailItems: [
        { label: '字段1', key: 'field1' },
        { label: '字段2', key: 'field2' },
        { label: '字段3', key: 'field3' },
        { label: '字段4', key: 'field4' },
        { label: '字段5', key: 'field5' }
      ]
    }
  },
  methods: {
    handleCollapseChange({ collapsed }) {
      this.collapsed = collapsed;
      console.log('折叠状态变化', collapsed);
    }
  }
}
</script>

<style scoped>
/* 自定义折叠按钮样式 */
.custom-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 12px 0;
}

.custom-toggle-button:active {
  background-color: #0056b3;
  transform: scale(0.98);
}

.custom-toggle-text {
  font-size: 14px;
  font-weight: 500;
}

.custom-toggle-icon {
  transition: transform 0.3s ease;
}

.custom-toggle-icon.icon-expanded {
  transform: rotate(180deg);
}

.arrow {
  font-size: 12px;
  font-weight: bold;
}
</style>

插槽说明

header

• 作用：自定义头部内容
• 参数：无

header-right

• 作用：自定义头部右侧内容
• 参数：无

footer

• 作用：自定义底部内容
• 参数：无

toggle-button

• 作用：自定义折叠/展开按钮
• 参数：
  • collapsed：当前折叠状态（Boolean）
  • toggle：触发折叠/展开的事件（Function）

radio-icon

• 作用：自定义Radio图标
• 参数：
  • radioItem：当前Radio项的数据
  • isSelected：当前Radio项是否选中（Boolean）
  • isDisabled：当前Radio项是否禁用（Boolean）
  • size：Radio尺寸（Number）
  • color：Radio颜色（String）

checkbox-icon

• 作用：自定义Checkbox图标
• 参数：
  • checkboxItem：当前Checkbox项的数据
  • isSelected：当前Checkbox项是否选中（Boolean）
  • isDisabled：当前Checkbox项是否禁用（Boolean）
  • size：Checkbox尺寸（Number）
  • color：Checkbox颜色（String）

自定义项插槽

<liaction-info-card :detail-items="detailItems" :data="data">
  <template #item-slot-name="{ item, data }">
    <!-- 自定义内容 -->
    <text>{{ item.label }}: {{ data[item.key] }}</text>
  </template>
</liaction-info-card>

注意事项

• 嵌套属性：支持通过点语法访问嵌套属性（如 user.name）
• 数据格式化：可以通过 formatter 函数自定义数据显示格式
• 编辑验证：支持通过 validator 函数自定义验证逻辑
• 事件冒泡：编辑状态下会阻止事件冒泡，避免触发不必要的点击事件
• 样式穿透：自定义样式时需要使用 ::v-deep 或 :deep() 语法

浏览器兼容性

• 支持 H5、微信小程序、支付宝小程序等 uni-app 支持的平台
• 支持现代浏览器

相关组件

• liaction-tabs：标签页组件
• liaction-grid-drag：拖拽网格组件
• liaction-table：表格组件

作者

liaction-ui 团队

许可证

MIT License