Element-Ui组件（二十三）Tag 标签

　

elementui

Element-Ui组件（二十三）Tag 标签

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/tag

基础用法

普通标签

<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>

动态编辑标签

<el-tag
  :key="tag"
  v-for="tag in dynamicTags"
  closable
  :disable-transitions="false"
  @close="handleClose(tag)">
  {{tag}}
</el-tag>
<el-input
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
>
</el-input>
<el-button v-else size="small" @click="showInput">+ New Tag</el-button>

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

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

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

tag 属性：

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

tag 事件：

事件名称	说明	回调参数
close	关闭 Tag 时触发的事件	—

相关阅读

高保真Axure组件：一套原汁原味的layui风格（附下载地址）

layui是一套经典的模块化前端框架，由职业前端倾情打造，面向所有层次的前后端程序猿，业界最容易使用的前端UI解决方案。你可能不知道l

element-ui入门

简介element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 其设计原则为： 一致性 Consist

element-ui中按需引入

这里写自定义目录标题element-ui中按需引入为什么选择 element-ui 而不是 iview1、按需引入1. 借助 babel-plugin-component，我们

firefox正在安装组件，以便播放此页面上的音频或视频

文章目录1 问题描述2 解决方法1 问题描述 firefox正在安装组件，以便播放此页面上的音频或视频用火狐浏览器观看视频时被进行上述黄

在设计中，如何打造最合适的组件？

设计的方法有很多种，或许未来会有更好的方法出现，但希望我们在通过各种渠道（网络、书本、项目等等）积累经验和知识的同时，也能抽点空闲