Tag 标签

一、概述

定义

用于标记或选择的组件。

使用场景

• 标记属性时

• 展示筛选时

类型

• 属性标记

• 可删除

• 信息筛选

二、属性标记

标签不可交互，仅提供展示信息属性的作用。

交互说明

1.无交互效果，仅提供展示作用

<div>
  Default：
  <se-tag type="default">标签一</se-tag>
  <se-tag type="primary">标签二</se-tag>
  <se-tag type="warn">标签三</se-tag>
  <se-tag type="danger">标签四</se-tag>
</div>
<br />
<div>
  Plain：
  <se-tag type="default" plain>标签一</se-tag>
  <se-tag type="primary" plain>标签二</se-tag>
  <se-tag type="warn" plain>标签三</se-tag>
  <se-tag type="danger" plain>标签四</se-tag>
</div>

不同尺寸

大中小三种组合，可选值"large"、"normal"、"small"

<se-tag size="large">大号标签</se-tag>
<se-tag size="normal">正常标签</se-tag>
<se-tag size="small">小号标签</se-tag>

三、可删除

用户可对标签进行删除。

交互说明

1.点击叉号，可删除当前标签

<div>
  Default：
  <se-tag type="default" closable>标签一</se-tag>
  <se-tag type="primary" closable>标签二</se-tag>
  <se-tag type="warn" closable>标签三</se-tag>
  <se-tag type="danger" closable>标签四</se-tag>
</div>
<br />
<div>
  Plain：
  <se-tag type="default" plain closable>标签一</se-tag>
  <se-tag type="primary" plain closable>标签二</se-tag>
  <se-tag type="warn" plain closable>标签三</se-tag>
  <se-tag type="danger" plain closable>标签四</se-tag>
</div>

动态编辑标签

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

<se-tag closable v-for="tag in dynamicTags" :key="tag" @close="onClose(tag)">
  {{tag}}
</se-tag>
<input
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  @keyup.enter="onInputConfirm"
  @blur="onInputConfirm"
/>
<se-button v-else class="button-new-tag" plain size="mini" @click="showInput">
  + New Tag
</se-button>

<style>
  .se-tag + .se-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
  }
  .input-new-tag {
    width: 90px;
    height: 24px;
    margin-left: 10px;
    padding: 0 8px;
    box-sizing: border-box;
    line-height: 22px;
    border: 1px solid #01d567;
    border-radius: 4px;
    outline: 0;
    font-size: 12px;
    color: #01d567;
  }
</style>

<script>
  export default {
    data() {
      return {
        dynamicTags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: ''
      }
    },
    methods: {
      onClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      },

      showInput() {
        this.inputVisible = true
        this.$nextTick(() => {
          this.$refs.saveTagInput.focus()
        })
      },

      onInputConfirm() {
        let inputValue = this.inputValue
        if (inputValue) {
          this.dynamicTags.push(inputValue)
        }
        this.inputVisible = false
        this.inputValue = ''
      }
    }
  }
</script>

四、信息筛选

点击标签，对信息进行筛选。

交互说明

1.点击标签，标签被选中， 同时对应的信息被筛选刷新

<div>
  <span v-for="(item, i) in list" style="padding: 5px;">
    <se-tag @click="toogle(i)" type="primary" v-if="i===current">
      标签{{ item }}
    </se-tag>
    <se-tag @click="toogle(i)" type="default" v-else>标签{{ item }}</se-tag>
  </span>

  <div style="margin-top: 10px">筛选出标签{{ current+1 }}对应内容</div>
</div>

<script>
  export default {
    data() {
      return {
        list: ['一', '二', '三', '四'],
        current: 0
      }
    },
    methods: {
      toogle(i) {
        console.log(i)
        this.current = i
      }
    }
  }
</script>

五、自定义颜色

<div>
  Default：
  <se-tag color="#8ECD16">标签一</se-tag>
  <se-tag color="#00BFC9">标签二</se-tag>
  <se-tag color="#E40078">标签三</se-tag>
  <se-tag color="#0079FF">标签四</se-tag>
</div>
<br />
<div>
  Plain：
  <se-tag plain color="#8ECD16">标签一</se-tag>
  <se-tag plain color="#00BFC9">标签二</se-tag>
  <se-tag plain color="#E40078">标签三</se-tag>
  <se-tag plain color="#0079FF">标签四</se-tag>
</div>

Props

Events