# ant_design_components

**Repository Path**: sureyee/ant_design_components

## Basic Information

- **Project Name**: ant_design_components
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2019-08-27
- **Last Updated**: 2021-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ant design pro 项目组件开发

## TOKEN 相关的 utils

```js
getToken(); // 获取token
setToken(); // 存储token
getAuthorization(); // 获取Authorization Header
flushToken(); // 删除token
```

`request` 请求时， 会自动指定 `Accept:application/json`, `ContentType:application/json`, `Authorization:access_token|''` 信息。

## 请求类的文件下载处理

在请求类中进行了 `response` 处理， 当响应头中存在 `content-disposition` 时，直接进行下载操作。

## 统一按钮

同意按钮样式，支持所有 button 事件 `Download` 下载按钮 `Export` 导出按钮 `Import` 导入按钮

```jsx harmony
import { Export, Import, Download } from '@/components/Buttons';

export default props => {
  return (
    <Fragment>
      <Export />
      <Import />
      <Download />
    </Fragment>
  );
};
```

## table 操作列表

`OperateButtons` 用户展示 table 的操作列表

```jsx harmony
import OperateButtons from '@/components/Buttons/OperateButtons';

const data = [
  {
    key: 'edit',
    name: '编辑',
    onClick: (record, e) => {
      console.log(record, e);
    },
  },
  {
    key: 'delete',
    name: '删除',
    onClick: (record, e) => {
      console.log(record, e);
    },
  },
  {
    key: 'export',
    name: '导出',
    onClick: (record, e) => {
      console.log(record, e);
    },
  },
  {
    key: 'reset',
    name: '重置',
    onClick: (record, e) => {
      console.log(record, e);
    },
  },
];

export default props => {
  return (
    <OperateButtons
      buttons={data}
      record={props.record}
      max={3}
      trigger="click"
      dropdownText="更多"
    />
  );
};
```

属性解析：

`buttons` 展示的按钮，必须传入 key，name

`max` 用于控制最大显示长度，超出会用`Dropdown`替换，不传则不控制长度

`trigger` Dropdown 时的触发方式，默认为`click`

`dropdownText` Dropdown 文案，默认为`更多`

`record` 传入的当前数据，会在 onclick 的时候，进行回传

## 地图组件

### POI 搜索

POI 搜索组件 `SearchBox`

示例：

```jsx harmony
import { Map } from 'react-amap';
import { SearchBox } from '@/components/AMap/SearchBox';

<Map>
  <SearchBox
    top={10}
    left={10}
    city="027"
    onSelect={result => {
      console.log(result);
    }}
    onSearch={result => {
      console.log(result);
    }}
    placeholder="搜索小区"
    defaultValue="枫桦苇岸"
  />
</Map>;
```

属性：

1. `top` 上边距定位， 默认为 `10`
2. `left` 左边距定位，默认为 `10`
3. `city` 搜索城市范围，默认为 `010`
4. `onSelect(result, event)` 搜索结果点击选择事件, `result` 搜索结果， `event` 事件
5. `onSearch(result)` 搜索结果点击选择事件, `result` 搜索结果
6. `placeholder` placeholder
7. `defaultValue` 默认搜索值

## 表单控件

### 地图选点控件

地图选点控件 `MapInput` ，该控件主要用于在地图中进行选点，返回经纬度信息。不做地理信息查询，可以联合 `Form` 表单使用

示例：

参考 `Welcome.jsx`

属性：

支持`Input`属性