grouptag-react

定义一组选中标签，可以单选也可以多选

效果图

demo

import GroupTag from 'grouptag-react'
const { TagItem } = GroupTag;

<section>
  <GroupTag
    value={["1", "2"]}
    source={[
      { id: "1", name: "电脑" },
      { id: "2", name: "水杯" },
      { id: "3", name: "冰箱" },
      { id: "4", name: "充电器" },
      { id: "5", name: "其他" },
    ]}
    onClick={onClickItem}
  />

  <GroupTag
    isSingle={true}
    onClick={onClickItem}
    source={[
      { id: "1", name: "电脑" },
      { id: "2", name: "水杯" },
      { id: "3", name: "冰箱" },
      { id: "4", name: "充电器" },
      { id: "5", name: "其他" },
    ]}
  />

  <GroupTag isSingle={true} onClick={onClickItem}>
    <TagItem value="a" className={styles.item}>
      电脑
    </TagItem>
    <TagItem value="b" style={{ color: "red" }}>
      水杯
    </TagItem>
    <TagItem value="c">冰箱</TagItem>
    <TagItem value="d">充电器</TagItem>
  </GroupTag>
</section>

GroupTag 参数说明

| 参数 | 说明 | 默认值 | | --------- | :------------------------------------------- | :--------- | | value | 选中的值 | [] | | source | 数据源，例如：[{id:'1',name:'电脑'}] | 空数组：[] | | onClick | 各项的点击事件 ,(checkedItem)=>{} | 空函数 | | isSingle | 是否为单选 | false | | idField | 指定数据源中作为 id 的字段，比如uid | id | | textField | 指定数据源中作为 text 显示的字段，比如text | name | | className | 样式名称 | | | style | 内嵌样式 | |

TagItem 参数说明

| 参数 | 说明 | 默认值 | | --------- | :-------------------------------------------- | :------------------------------------------- | | value | 选中的值 | [] | | className | 样式名称 | | | style | 内嵌样式 | | | idField | 指定 click 事件参数对象的 id 字段，比如uid | 默认和数据源中一致，没有特殊情况这个无需设置 | | textField | 指定 click 事件参数对象的 id 字段，比如text | 默认和数据源中一致，没有特殊情况这个无需设置 |