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

更新记录

1.0.0（2025-12-05） 下载此版本

初始功能

---

平台兼容性

uni-app(4.66)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	√	√	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	√	√	√	√	√

liaction-info-card

组件介绍

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

功能特性

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

属性说明

属性名	类型	默认值	说明
className	String	''	自定义类名
title	String	''	卡片标题
iconSrc	String	''	卡片图标
detailItems	Array	[]	详情列表数据
data	Object	{}	数据源对象
hasCustomContent	Boolean	false	是否显示自定义内容插槽
enableDefaultBorder	Boolean	false	是否启用默认边框
showHeader	Boolean	true	是否显示头部区域
headerClass	String	''	自定义头部类名
listClass	String	''	自定义列表类名
hasRightContent	Boolean	false	是否显示右侧内容区域
visible	Boolean	true	控制整个组件的显示隐藏
containerStyle	Object	{}	自定义容器样式
headerPadding	String	'10px 16px'	自定义头部内边距

事件说明

事件名	参数	说明
link-click	{ item, data }	链接点击事件
item-click	{ item, data, event }	列表项点击事件
edit-start	{ item, data }	开始编辑事件
edit-complete	{ item, value, data }	编辑完成事件
input	{ item, value, data }	输入事件
edit-cancel	{ item, data }	取消编辑事件
header-click	{ data, event }	头部点击事件
click	{ data, event }	卡片点击事件

detailItems 配置项

属性名	类型	说明	可选值
label	String	标签文本	-
key	String	数据字段名，支持嵌套属性（如 'user.name'）	-
type	String	数据类型	'edit'
isStatusBadge	Boolean	是否为状态徽章	true/false
isLink	Boolean	是否为链接类型	true/false
showLinkIcon	Boolean	是否显示链接图标	true/false
clickable	Boolean	是否可点击	true/false
visible	Boolean	是否可见	true/false
formatter	Function	数据格式化函数	(value, data) => formattedValue
className	String	自定义类名	-
labelClass	String	自定义标签类名	-
badgeClass	String	自定义徽章类名	-
inputType	String	编辑框类型	'text', 'number', 'email' 等
placeholder	String	编辑框占位符	-
maxlength	Number	编辑框最大长度	-
allowEmpty	Boolean	是否允许为空	true/false
validator	Function	自定义验证函数	(value, item, data) => boolean
onInput	Function	输入回调函数	(item, value, data) => void
onClick	Function	点击回调函数	(item, data) => void
onEditStart	Function	开始编辑回调	(item, data) => void
onEditComplete	Function	编辑完成回调	(item, value, data) => void
onEditCancel	Function	取消编辑回调	(item, data) => void
selectable	String	可选择类型	'label', 'content', 'both'

使用示例

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

插槽说明

header

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

header-right

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

footer

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

自定义项插槽

<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

演示图片