Skip to content

alitajs/input-tag

 
 

Repository files navigation

@alitajs/input-tag

简介

可输入可设置 tag 的编辑框。

开始使用

$ npm i @alitajs/input-tag

or

$ yarn add @alitajs/input-tag

API

参数 说明 类型 默认值 是否必填
value ValueItemProps[] []
onChange 值改变事件 (res: ValueItemProps) => void -
mode 类型 tags|multiple|combobox tags
placeholder placeholder string 请选择
style 样式 React.CSSProperties {}
disabled 不可编辑 boolean false
onClick 点击事件 () => void -
addOnAfter 后缀 string | React.ReactNode -
editable 输入框是否可编辑 boolean -

ValueItemProps

参数 说明 类型 默认值 是否必填
label 文本 string -
value string -
type 类型 'text'|'tag' -
disabled 是否可编辑 boolean false

demo

import { Button } from 'antd';
import type { ValueItemProps } from '@alitajs/input-tag';
import Select from '@alitajs/input-tag';

export const getRandom = () => {
  const val = `${Math.random().toString(36).slice(2, 6)}`;
  return val;
};

const Test: React.FC = () => {
  const [value, setValue] = React.useState<ValueItemProps[]>([
    { label: '111', value: '111', type: 'tag', disabled: true },
    { label: '222', value: '222', type: 'text' },
    { label: '333', value: '333', type: 'tag' },
  ]);

  const addTag = () => {
    const random = getRandom();
    const newVal = [...value];
    newVal.push({ label: random, value: random, type: 'tag' });
    setValue(newVal);
  };

  return (
    <div>
      <Select
        placeholder="请选择"
        mode="tags"
        style={{ width: 500 }}
        value={value}
        onChange={(val: ValueItemProps[]) => {
          setValue(val);
        }}
        onClick={() => console.log('this is click')}
      />
      <Button onClick={addTag}>新增一个 tag</Button>
    </div>
  );
};

export default Test;

Packages

No packages published

Languages

  • TypeScript 99.9%
  • JavaScript 0.1%