elementUI之tag标签讲解

Element UI 是一个为 Vue.js 2.0 设计的组件库，它提供了一个名为 el-tag 的标签组件，用于展示文本标签。

el-tag 组件的主要属性包括：

• type：标签的类型，如 'success'、'info'、'warning'、'danger' 或 'plain'。
• closable：是否可关闭。
• disable-transitions：是否禁用动画。
• hit：是否为热点标签。
• color：标签的背景色。

下面是一个简单的 el-tag 组件使用实例：

<template>
  <div>
    <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 closable @close="handleClose">可关闭标签</el-tag>
    <el-tag type="success" closable @close="handleClose">成功可关闭</el-tag>
    <el-tag closable :color="customColor" @close="handleClose">自定义颜色</el-tag>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      customColor: 'rgb(153, 153, 255)'
    };
  },
  methods: {
    handleClose(event, tag) {
      console.log(`关闭了 ${tag.text} 标签`);
    }
  }
};
</script>

在这个例子中，我们创建了几个不同类型和功能的标签，并展示了如何使用 closable 属性来添加一个可关闭的标签，以及如何使用 color 属性来设置自定义的标签颜色。当标签被关闭时，会触发 handleClose 方法，并在控制台打印出相关信息。