# CommonCard 公共卡片

### 基础用法

:::demo

```vue

<template>
  <common-card-group
    :cardNumbers="cardNumbers"
    :cardInfos="cardInfos"
    :span="12"
    :btns="btns"
    :cards="cards"
    @handel-click-create-card="handelClickCreateCard"
  ></common-card-group>
</template>

<script setup >
// import { ElMessage } from 'element-plus';
// import { ref } from 'vue';

function edit() {
  // ElMessage('编辑');
}
function start() {}
//
const cardNumbers = [
  { label: '信息1', name: 'name1' },
  { label: '信息2', name: 'name2' },
  { label: '信息3', name: 'name3' }
];

const cardInfos = [{ label: '厂商', name: 'name' }];
const btns = [
  {
    label: '启用',
    name: 'start',
    icon: 'common-bianji',
    color: '#7b93a7',
    onClick: start
  },
  {
    label: '编辑',
    name: 'edit',
    icon: 'common-bianji',
    onClick: edit
  },
  {
    label: '删除',
    name: 'delete',
    icon: 'tool-baocun',
    color: '#7b93a7',
    onClick: edit
  }
];
const cards = [
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'error' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    numbers: {
      name1: 1,
      name2: 2,
      name3: 3
    }
  },
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'error' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    numbers: {
      name1: 1,
      name2: 2,
      name3: 3
    }
  },
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'error' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    numbers: {
      name1: 1,
      name2: 2,
      name3: 3
    }
  }
];

// 添加新卡片
function handelClickCreateCard() {
  // ElMessage('123131233');
}
</script>

<style scoped lang="scss"></style>

```

:::

###  配置参数

| 参数      | 说明        | 类型    | 是否必须 |
| :------- | :------------ | :------- | :------- |
| cards | 卡片需要渲染的数组 | Array[Object]，其中卡片内部字段| true |
| ----url | 卡片中图片url | String | false  |
| ----title | 卡片标题 | String | false  |
| ----subTitle | 卡片副标题 | String | false  |
| ----desc | 卡片描述信息 | String | false  |
| ----infos | 卡片简介信息，与cardInfos数组中的元素对应展示 | Object | false  |
| ----numbers | 卡片数据展示，与cardNumbers数组中的元素对应展示 | Object | false  |
| ----tags | 卡片状态展示，需要自己处理后台获取的数据并以此形式进行传递 | Array | false  |
| hasAdd | 是否有新增卡片 |  Boolean  | false |
| span | 卡片栅格化布局，共分为24分，默认为 6 即4列 |  Number  | false |
| gutter | 卡片栅格化布局卡片间隔，默认为 20 |  Number  | false |
| cardText | 卡片新增模块文字展示，默认’新增‘ |  String  | false |
| cardInfos | 卡片展示的信息列表，用于卡片的信息展示 |  Array  | false |
| ----label | 简介信息title | String | false  |
| ----name | 简介信息name，必须与infos（后台获取需要展示的数据的key对应） | String | false  |
| layer | 卡片内部布局，分别为row/col/row-col， 默认col，row时左侧为图片，右侧为卡片整体信息，col时上部为图片，下部为整体信息，row-col时，上部为左图右title，下部为其余信息 |  String  |false|
| cardNumbers | 卡片数据展示区域 |  Array  |false|
| ----label | 卡片数据title | String | false  |
| ----name | 卡片数据name，必须与numbers（后台获取需要展示的数据的key对应） | String | false  |
| btns | 卡片下部按钮 |  Array  |false|
| ----label | 按钮的label | String | true  |
| ----name | 按钮的name，用于按钮区分 | String | true  |
| ----icon | 按钮展示的icon | String | false  |
| ----color | 按钮icon颜色 | String | false  |
| ----onClick | 按钮事件回调 | Function | true  |

### 事件

| 事件名称   | 说明       | 回调     |
| :--------| :-------- | :--------------- | 
| handelClickCreateCard |  点击新增时，触发回调函数 | -- |