【antd组件之checkbleTag】可选择标签

https://4x.ant.design/components/tag-cn/

1. Description

可通过 CheckableTag 实现类似 Checkbox 的效果，点击切换选中效果。

该组件为完全受控组件，不支持非受控用法。

2. 重写样式，实现底部对勾的样式

1. 效果

2. 代码

//数据
const selectedTagsValues= [
  { label: 'nino', value: 'nino', checked: false },
  { label: 'rxl', value: 'rxl', checked: true },
  { label: 'ohno', value: 'ohno', checked: false },
  { label: 'sukura', value: 'sukura', checked: false },
];


//遍历
  const dom = useMemo(() => {
    return (
      <>
        {selectedTagsValues.map((tag: any) => {
          return (
            <div className="self-check-tag">
              <CheckableTag
                key={tag.value}
                checked={tag.checked}
                onChange={(checked) => handleChangea(tag, checked)}
              >
                <div className="cur">
                  {tag.label}
                  {tag.checked ? <i></i> : ''}
                </div>
              </CheckableTag>
            </div>
          );
        })}
      </>
    );
  }, [selectedTagsValues]);

// handelChangea，找到所点击项的索引，并把那一项的checked设置成传入的
  const handleChange = (tag: any, checked: boolean) => {
      let insertIndex = tagsData.findIndex((item: any) => {
        return tag.value == item.value;
      });

      tagsData.splice(insertIndex, 1, {
        ...tag,
        checked: checked,
        data: checked ? 1 : 0,
      });

    // :
    setTagsData([...tagsData]);
    console.log(tagsData);
  };


// 样式
.self-check-tag {
  display: inline-block;
  padding: 10px;
  min-width: 132px;
  .ant-tag {
    display: inline-block;
    background-color: white;
    border: 1px solid #cccccc;
    height: 32px;
    font-size: 14px;
    color: #666666;
    line-height: 32px;
    border-radius: 2px;
  }
  div.cur {
    position: relative;
    padding: 0 12px;
  }
  div.cur > i {
    display: block;
    position: absolute;
    border-bottom: 14px solid #1890ff;
    border-left: 16px solid transparent;
    width: 0px;
    height: 0px;
    bottom: 1px;
    right: -8px;
  }
  div.cur > i::after {
    position: absolute;
    content: '\2713';
    color: #fff;
    left: -0.66rem;
    top: -0.43rem;
    font-size: 0.1px;
    transform: scale(0.7);
  }
  .ant-tag-checkable-checked {
    color: #1890ff;
    background-color: white;
    border: 1px solid #1890ff;
  }
}