Element-React Tag 标签

2020-10-16 11:23 更新

用于标记和选择。

基础用法

type属性来选择tag的类型,也可以通过color属性来自定义背景色。

render() {
  return (
    <div>
      <Tag>标签一</Tag>
      <Tag type="gray">标签二</Tag>
      <Tag type="primary">标签三</Tag>
      <Tag type="success">标签四</Tag>
      <Tag type="warning">标签五</Tag>
      <Tag type="danger">标签六</Tag>
    </div>
  )
}

可移除标签

设置closable属性来定义一个可移除的标签,接受一个Boolean,设置为true即可。默认的标签移除时会附带渐变动画,如果不想使用,可以设置closeTransition属性,它接受一个Boolean,true 为关闭。设置close事件可以处理关闭后的回调函数。

constructor(props) {
  super(props);


  this.state = {
    tags: [
      { key: 1, name: '标签一', type: '' },
      { key: 2, name: '标签二', type: 'gray' },
      { key: 5, name: '标签三', type: 'primary' },
      { key: 3, name: '标签四', type: 'success' },
      { key: 4, name: '标签五', type: 'warning' },
      { key: 6, name: '标签六', type: 'danger' }
    ]
  }
}


handleClose(tag) {
  const { tags } = this.state;


  tags.splice(tags.map(el => el.key).indexOf(tag.key), 1);


  this.setState({ tag });
}


render() {
  return (
    <div>
      {
        this.state.tags.map(tag => {
          return (
            <Tag
              key={tag.key}
              closable={true}
              type={tag.type}
              closeTransition={false}
              onClose={this.handleClose.bind(this, tag)}>{tag.name}</Tag>
          )
        })
      }
    </div>
  )
}

动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 onClose 事件来实现

constructor(props) {
  super(props);


  this.state = {
    dynamicTags: ['标签一', '标签二', '标签三'],
    inputVisible: false,
    inputValue: ''
  }
}


onKeyUp(e) {
  if (e.keyCode === 13) {
    this.handleInputConfirm();
  }
}


onChange(value) {
  this.setState({ inputValue: value });
}


handleClose(index) {
  this.state.dynamicTags.splice(index, 1);
  this.forceUpdate();
}


showInput() {
  this.setState({ inputVisible: true }, () => {
    this.refs.saveTagInput.focus();
  });
}


handleInputConfirm() {
  let inputValue = this.state.inputValue;


  if (inputValue) {
    this.state.dynamicTags.push(inputValue);
  }


  this.state.inputVisible = false;
  this.state.inputValue = '';


  this.forceUpdate();
}


render() {
  return (
    <div>
      {
        this.state.dynamicTags.map((tag, index) => {
          return (
            <Tag
              key={Math.random()}
              closable={true}
              closeTransition={false}
              onClose={this.handleClose.bind(this, index)}>{tag}</Tag>
          )
        })
      }
      {
        this.state.inputVisible ? (
          <Input
            className="input-new-tag"
            value={this.state.inputValue}
            ref="saveTagInput"
            size="mini"
            onChange={this.onChange.bind(this)}
            onKeyUp={this.onKeyUp.bind(this)}
            onBlur={this.handleInputConfirm.bind(this)}
          />
        ) : <Button className="button-new-tag" size="small" onClick={this.showInput.bind(this)}>+ New Tag</Button>
      }
    </div>
  )
}

Attributes

参数 说明 类型 可选值 默认值
type 主题 string 'primary', 'gray', 'success', 'warning', 'danger'
closable 是否可关闭 boolean false
closeTransition 是否禁用关闭时的渐变动画 boolean false
hit 是否有边框描边 boolean false
color 背景色 string

Events

事件名称 说明 回调参数
onClose 关闭tag时触发的事件
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号