023_Tag标签

1. Tag标签

1.1. Tag标签用于标记和选择。

1.2. Attributes

参数	说明	类型	可选值	默认值
type	类型	string	success/info/warning/danger	无
closable	是否可关闭	boolean	无	false
disable-transitions	是否禁用渐变动画	boolean	无	false
hit	是否有边框描边	boolean	无	false
color	背景色	string	无	无
size	尺寸	string	medium / small / mini	无
effect	主题	string	dark / light / plain	light

1.3. Events

事件名称	说明
click	点击Tag时触发的事件
close	关闭Tag时触发的事件

2. Tag标签例子

2.1. 使用脚手架新建一个名为element-ui-tag的前端项目, 同时安装Element插件。

2.2. 在components在新建Tag.vue 

<template>
  <div>
    <h1>基础用法</h1>
    <h4>由type属性来选择tag的类型, 也可以通过color属性来自定义背景色。</h4>
    <el-tag>标签一</el-tag>
    <el-tag type="success">标签二</el-tag>
    <el-tag type="info">标签三</el-tag>
    <el-tag type="warning">标签四</el-tag>
    <el-tag type="danger">标签五</el-tag>

    <h1>可移除标签</h1>
    <h4>设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画, 如果不想使用, 可以设置disable-transitions属性, 它接受一个Boolean, true为关闭。</h4>
    <el-tag v-for="(closableTag, index) in closableTags" :key="closableTag.name" closable :disable-transitions="true" @close="handleClose(closableTag, index)" :type="closableTag.type">{{closableTag.name}}</el-tag>

    <h1>动态编辑标签</h1>
    <h4>hit添加边框描边。color添加背景色。</h4>
    <el-tag hit color="#fff" :key="dynamicTag" v-for="dynamicTag in dynamicTags">{{dynamicTag}}</el-tag>
    <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

    <h1>不同尺寸</h1>
    <h4>Tag组件提供除了默认值以外的三种尺寸, 可以在不同场景下选择合适的按钮尺寸。额外的尺寸: medium、small、mini, 通过设置size属性来配置它们。</h4>
    <el-tag>默认标签</el-tag>
    <el-tag size="medium">中等标签</el-tag>
    <el-tag size="small">小型标签</el-tag>
    <el-tag size="mini">超小标签</el-tag>

    <h1>不同主题</h1>
    <h4>Tag组件提供了三个不同的主题: dark、light和plain。通过设置effect属性来改变主题, 默认为light。</h4>
    <div class="tag-group"><span>Dark</span><el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark">{{ item.label }}</el-tag></div>
    <div class="tag-group"><span>Plain</span><el-tag v-for="item in items" :key="item.label" :type="item.type" effect="plain">{{ item.label }}</el-tag></div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      closableTags: [
        { name: '标签一', type: '' },
        { name: '标签二', type: 'success' },
        { name: '标签三', type: 'info' },
        { name: '标签四', type: 'warning' },
        { name: '标签五', type: 'danger' }
      ],
      dynamicTags: ['标签1', '标签2', '标签3'],
      inputVisible: false,
      inputValue: '',
      items: [
        { type: '', label: '标签一' },
        { type: 'success', label: '标签二' },
        { type: 'info', label: '标签三' },
        { type: 'danger', label: '标签四' },
        { type: 'warning', label: '标签五' }
      ]
    }
  },
  methods: {
    handleClose (closableTag, index) {
      this.closableTags.splice(index, 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag, .tag-group .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
}
.tag-group {
  margin-top: 10px;
}
</style>

2.3. 访问http://localhost:8080/#/Tag