# DgCard 卡片

> 将信息聚合在卡片容器中展示。

### 基础用法

::: demo 组件 Card 使用示例

```vue
<template>
  <div class="dg-card" style="overflow:hidden;">
    <dg-card :cardData="cardData" :cardType="cardType" :actionBtns="actionBtns" @buttonClick="cardButtonClick">
    </dg-card>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      cardData: [
        {
          APPLY: 1,
          APPLYING: 0,
          DB_NAME: 'CORE',
          EXPORT: 0,
          FAV_ID: 68,
          OBJ_CNNAME: '业务员代码表',
          OBJ_ID: 'CORE:PICCPROD:T_AGENT:T_AGENT',
          OBJ_NAME: 'T_AGENT',
          OBJ_TYPE: 'TABLE',
          QUERY: 0,
          REMARK: '这是一段描述信息',
          SCHEMA_NAME: 'PICCPROD',
        },
        {
          APPLY: 0,
          APPLYING: 0,
          DB_NAME: 'DATAGO_DB_HW',
          EXPORT: 1,
          OBJ_CNNAME: '测试表',
          OBJ_ID: '5630424c29894720bf50cab127c71c4d',
          OBJ_NAME: 'MDM_CUST1',
          OBJ_TYPE: 'TABLE',
          QUERY: 1,
          REMARK: '',
          SCHEMA_NAME: 'DATAGO_DB_HW',
          dcTabApipublish: 1,
        },
        {
          APPLY: 1,
          APPLYING: 0,
          DB_NAME: 'CORE',
          EXPORT: 0,
          OBJ_ID: 'CORE.CLAIM_PICCPROD.R_CUSTOMER',
          OBJ_NAME: 'R_CUSTOMER',
          OBJ_TYPE: 'VIEW',
          QUERY: 0,
          SCHEMA_NAME: 'CLAIM_PICCPROD',
        },
      ],
      cardType: 'dcAsset',
      actionBtns: [
        {
          title: '选择',
          icon: 'el-icon-shopping-cart-2',
          fn: 'dataSelect',
        },
        {
          title: '详情',
          icon: 'el-icon-document',
          fn: 'dataSource',
        },
        {
          title: '发布',
          icon: 'el-icon-position',
          fn: 'dataShare',
        },
        {
          title: '变更',
          icon: 'fa fa-file-audio-o',
          fn: 'dataChange',
          judge: function () {
            // 权限
            return false
          },
        },
      ],
      cardButtonClick(row, action) {
        console.log('row', row)
        console.log('action', action)
      },
    }
  },
  methods: {},
}
</script>
<style>
.dg-card .el-col {
  padding-left: 6px;
  padding-right: 6px;
}
</style>
```

:::

`

## API （与 elementUi 完全一致的 card 属性，以下为特殊属性）

| 参数           | 说明     |   类型   |  可选值   |
| -------------- | -------- | :------: | :-------: |
| cardData       | 卡片数据 |  `Arr`   |     -     |
| actionBtns     | 卡片按钮 |  `Arr`   |     -     |
| moreActionBtns | 更多操作 |  `Arr`   |     -     |
| cardType       | 卡片类型 | `String` | `dcAsset` |

## Events

| 事件名称    | 说明             | 回调参数 |
| ----------- | ---------------- | :------: |
| buttonClick | 按钮所调用的方法 |    -     |

## 更新日志

#### v1.0.0（2021-05-31）

- 初始版本