更新记录

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

初始功能

平台兼容性

uni-app(4.66)

liaction-info-card

组件介绍

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

功能特性

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

属性说明

事件说明

detailItems 配置项

使用示例

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