# BoxSelection 框选

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/box-selection/freepass)
- 平台：PC
- 维护者：赵俊飞
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[BoxSelection]

## 代码演示

### 基础用法

简单的框选

```jsx
import { BoxSelection, Dialog } from '@weapp/ui';
import React, { CSSProperties } from 'react';

const style = { height: 150 }

const itemStyle: CSSProperties = { float: 'left', width: 100, height: 100, textAlign: 'center', lineHeight: '100px' }

const data = [{
  id: '1',
  content: '测试数据1'
},
{
  id: '2',
  content: '测试数据2'
},
{
  id: '3',
  content: '测试数据3'
},
{
  id: '4',
  content: '测试数据4'
}]

const { message } = Dialog;
export default class BoardDemo extends React.PureComponent {

  onSelect = (selected: string[], unSelected: string[]) => {
    console.log(selected, unSelected)
    message(
      {
        type: 'success',
        content: `当前选中了 id 为 ${selected}的数据`,
      }
    )
  }
  render() {
    return (
      <BoxSelection
        style={style}
        dataKey='id'
        onSelect={this.onSelect}
        activeClass='box-selected-item'
        selector='.box-item'
      >
        {data.map(item => {
          return <div style={itemStyle}
            className='box-item'
            key={item.id}
            data-id={item.id}
          >{item.content}</div>
        })}
      </BoxSelection>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| selector | 框选元素的选择器 | string | 是 | - |
| onSelect | 框选回调事件 | (selectedItem:string[],unSelectedItem:string[])=>void | 否 | - |
| dataKey | 框选 dom 元素的自定义数据属性 | string | 是 | - |
| style | style 样式 | CSSProperties | 否 | - |
| activeClass | 选中元素的类名 | string | 否 | - |
| customRender | 自定义渲染 | (_: any, ele: React.ReactNode) => React.ReactNode; | 否 | - |
