# DgDatabasket 数据篮

> 基于 elementUi 封装集成度更高的滑窗组件，固定布局和按钮栏。

### 基础用法

::: demo 组件 DgDatabasket 使用示例

```vue
<template>
  <dg-databasket
    ref="databasket"
    @allApplyClick="handleAllApplyClick"
    @allShareClick="handleAllShareClick"
    @allShareApiClick="handleAllShareApiClick"
    :topic="searchFrom.topicType"
  ></dg-databasket>
  <div style="overflow:hidden;">
    <dg-card :cardData="cardData" :cardType="cardType" :actionBtns="actionBtns" @buttonClick="cardButtonClick">
    </dg-card>
  </div>
</template>

<script>
export default {
  name: 'databasketDemo',
  data() {
    return {
      searchFrom: {
        key: '',
        topicType: '',
        topicCode: '',
        searchType: '',
      },
      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',
        },
      ],
    }
  },
  methods: {
    handleAllApplyClick() {},
    handleAllShareApiClick() {},
    handleAllShareClick() {},
    cardButtonClick(data, item) {
      // console.log('data', data)
      // console.log('item', item)
      this.$options.methods[item.fn].call(this, data, item)
    },
    dataSelect(data, item) {
      console.log('data', data)
      console.log('item', item)
      this.$refs.databasket.shopCart.items.push(data)
    },
  },
}
</script>
<style scoped></style>
```

:::
`

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

| 属性 | 说明 | 类型 | 默认值 | 可选值 |
| ---- | ---- | :--: | :----: | :----: |

## 更新日志

#### v1.0.0（2021-06-06）

- 初始版本