# 侧边栏标签选择器

## 组件效果图
![](https://im.weaver.com.cn/server/index.php?s=/api/attachment/visitFile&sign=7fd069b76921025aa9d832c8c2a9e2be)

## DEMO

CorsComponent 组件方式

```js

render() {
    return <>
            <Button onClick={this.toggleTagSelector}>打开标签选择器</Button>
            <CorsComponent
                app='@weapp/my'
                compName='WTagSelector'
                module='group'
                entityId='1528279688280001'
                visible={this.state.openTagSelector}
                onClose={this.toggleTagSelector}
                onSelect={this.onSelectWTag}
                tags={[{
                    "tagCreateTime": "2022-08-01 14:06:22",
                    "color": "#E9F7FF",
                    "entityId": "1528279688280001",
                    "id": "756489692566708224",
                    "type": 1,
                    "content": "t6"
                }]}
            />
    </>
}

toggleTagSelector = () => {
    this.setState({ openTagSelector: !this.state.openTagSelector })
}

onSelectWTag =(tags:TagData[])=> {
    console.log('on select wtags', tags)
}
```

### 参数说明

| 参数      | 说明                                            | 类型                      | 是否必填 | 默认值 |
|:----------|:------------------------------------------------|:--------------------------|:---------|:-------|
| module    | 事项所属模块的模块标识                                    | string                    | 是       | -      |
| entityId | 事项 id            | string                  | 是       | -      |
| visible   | 是否显示                                        | boolean                   | 是       | -      |
| title   | 选择器标题                                        | string                   | 否       | 群标签      |
| onClose   | 关闭时的回调                                    | (isBack?: boolean) => void                | 是       | -      |
| onSelect  | 选中标签的回调方法，返回设置的标签              | (tags: TagData[]) => void | 否       | -      |
