CCard 列表卡片

功能说明

一个用于显示信息的卡片组件，结构包括主体、标题、内容、操作区四个部分。适用于需要将信息以卡片形式展示的场景，如列表项、信息展示等。

引用方式

import { CCard, CCardTitle, CCardContent, CCardAction } from '@components/layout/card';

组件结构

卡片组件由以下四个组件组成：

1. CCard - 卡片主体，作为其他组件的容器
2. CCardTitle - 卡片标题，显示标题内容和可选的额外操作
3. CCardContent - 卡片内容区域
4. CCardAction - 卡片底部操作区域，支持横向滚动

组件参数

CCard

无特定参数，通过插槽嵌套其他卡片子组件使用

CCardTitle

• title (String，可选)：标题文本，默认值为 '列表卡片标题'
• onTitleClick (Function，可选)：标题点击事件回调函数

CCardContent

无特定参数，用于包裹卡片主要内容

CCardAction

无特定参数，用于包裹卡片底部的操作按钮

使用示例

基础用法

<template>
  <view class="page">
    <CCard>
      <CCardTitle title="用户信息" />
      <CCardContent>
        <view class="user-info">
          <view class="info-item">姓名：张三</view>
          <view class="info-item">电话：13800138000</view>
          <view class="info-item">地址：广州市天河区</view>
        </view>
      </CCardContent>
    </CCard>
  </view>
</template>

<script>
import { CCard, CCardTitle, CCardContent } from '@components/layout/card';

export default {
  components: {
    CCard,
    CCardTitle,
    CCardContent
  }
}
</script>

完整卡片示例（带标题、内容和操作）

<template>
  <view class="page">
    <CCard>
      <CCardTitle title="订单信息">
        <AtTag size="small" type="primary">新订单</AtTag>
      </CCardTitle>
      
      <CCardContent>
        <view class="order-info">
          <view class="order-item">订单号：2023042501</view>
          <view class="order-item">客户：李四</view>
          <view class="order-item">金额：¥125.00</view>
          <view class="order-item">状态：待处理</view>
        </view>
      </CCardContent>
      
      <CCardAction>
        <AtButton size="small" type="secondary" @tap="evt => handleCancel()">取消</AtButton>
        <AtButton size="small" type="primary" @tap="evt => handleConfirm()">确认</AtButton>
      </CCardAction>
    </CCard>
  </view>
</template>

<script>
import { CCard, CCardTitle, CCardContent, CCardAction } from '@components/layout/card';
import { AtButton, AtTag } from 'taro-ui-vue';

export default {
  components: {
    CCard,
    CCardTitle,
    CCardContent,
    CCardAction,
    AtButton,
    AtTag
  },
  methods: {
    handleCancel() {
      console.log('取消订单');
    },
    handleConfirm() {
      console.log('确认订单');
    }
  }
}
</script>

注意事项

1. 卡片组件需要按照 CCard > CCardTitle/CCardContent/CCardAction 的层级结构使用
2. CCardTitle 设置了底部边框，CCardAction 设置了顶部边框，都使用了 m-border-strong-bottom/top 样式类
3. CCardTitle 组件支持通过默认插槽在标题右侧添加额外内容（如标签、按钮等）
4. CCardAction 组件使用 scroll-view 实现，当操作按钮过多时支持横向滚动
5. 卡片内容可以根据实际需要自由组织，CCardContent 不对内容做特定限制