# 多选标签组件multi-tag-select

组件来源: 办公系统v3 - common组件

## 1.功能说明

多选标签组件，鼠标点击某个标签可相应切换状态

## 2.组件依赖

-- react

-- antd

## 3.组件接口

```tsx
export interface TagParam {
    color?: string             //标签字体颜色
    backgroundColor?: string   //标签背景颜色
    name: string               //标签名字
    tag: number                //标签识别码
}
interface MultiTagSelectProps {
    tags?: number[] | number,   //当前选中的标签的识别码
    params?: TagParam[],        //所有标签
    paramGroups?: TagParam[][],
    showChecked?: boolean       //只展示选中的
    spaceSize?: SpaceSize       //选项间隙
    single?: boolean            //设置单选模式
    themeColor?: string         //主题颜色
    lock?: boolean              //是否锁定
    onChange?: (value: number[] | number) => void // 单选模式下返回单个值
    style?: CSSProperties
}
```

## 4.案例

先引入依赖

```tsx
import MultiTagSelect from './common/multi-tag-select';
```

### (1)单选标签

#### 1)设置当前识别码的值

```tsx
const [currentTag, setCurrentTag] = useState<number>(1);
    useEffect(() => {
    }, [currentTag])
const tagParams = [
    {color: "#000", backgroundColor: "#ff0000", name: "左", tag: 1},
    {color: "#000", backgroundColor: "#ff0000", name: "中", tag: 2},
    {color: "#000", backgroundColor: "#ff0000", name: "右", tag: 3},
]
```

#### 2)添加MultiTagSelect组件

```tsx
<MultiTagSelect
    single
    spaceSize={5}
    tags={currentTag}
    onChange={(type: number) => {
        if (type === currentTag) {
            setCurrentTag(null);
        } else {
            setCurrentTag(type);
        }
    }}
    // onChange={(type: number) => {
    //     setCurrentTag(type);
    // }}
    params={tagParams}
/>
```

#### 备注

当前代码展现的是可以什么都不选的单选标签（单击当前标签以取消选择），如果将onChange改为被注释掉的内容，则无论如何都会选中一个标签。

### (2)多选标签

#### 1)设置识别码的值

```tsx
const [currentTags, setCurrentTags] = useState<number[]>([]);
const tagParams = [
    {color: "#000", backgroundColor: "#ff0000", name: "左", tag: 1},
    {color: "#000", backgroundColor: "#ff0000", name: "中", tag: 2},
    {color: "#000", backgroundColor: "#ff0000", name: "右", tag: 3},
]
useEffect(() => {
}, [currentTags])
```

#### 2)添加组件

```tsx
<MultiTagSelect
    spaceSize={5}
    tags={currentTags}
    onChange={(type: number[]) => {
        setCurrentTags(type)
    }}
    params={tagParams}
/>
```