【区分vue2和vue3下的element UI Tag 标签组件，分别详细介绍属性，事件，方法如何使用，并举例】

Element UI（Vue 2）和 Element Plus（Vue 3）都提供了 Tag 标签组件，但两者之间存在一些差异，特别是在语法和可用特性上。以下将分别介绍这两个版本中的 Tag 组件的属性、事件和方法，并给出使用示例。

Vue 2 + Element UI Tag

属性 (Attributes)

• type: 类型，例如 success、info、warning、danger 或自定义颜色。
• closable: 是否可关闭。
• disable-transitions: 是否禁用过渡动画。
• hit: 是否有点击反馈效果。
• color: 自定义颜色。

事件 (Events)

• close: 关闭时的回调函数。
• click: 点击 Tag 时的回调函数。

方法 (Methods)

Element UI 的 Tag 组件没有直接暴露方法供调用。但你可以通过事件来响应用户操作。

示例

<template>
  <el-tag
    type="success"
    closable
    @close="handleClose"
    @click="handleClick"
  >
    成功
  </el-tag>
</template>

<script>
export default {
  methods: {
    handleClose() {
      console.log('Tag 被关闭了');
    },
    handleClick() {
      console.log('Tag 被点击了');
    }
  }
};
</script>

Vue 3 + Element Plus Tag

属性 (Attributes)

• type: 类型，与 Element UI 相同。
• closable: 是否可关闭。
• disable-transitions: 是否禁用过渡动画。
• color: 自定义颜色。
• effect: 点击时是否显示波纹效果（如 dark）。

事件 (Events)

• close: 关闭时的回调函数。
• click: 点击 Tag 时的回调函数。

方法 (Methods)

同样地，Element Plus 的 Tag 组件也没有直接暴露方法。

示例

在 Vue 3 中，使用 <script setup> 语法糖：

<template>
  <el-tag
    type="success"
    closable
    @close="handleClose"
    @click="handleClick"
  >
    成功
  </el-tag>
</template>

<script setup>
import { ref } from 'vue';

const handleClose = () => {
  console.log('Tag 被关闭了');
};

const handleClick = () => {
  console.log('Tag 被点击了');
};
</script>

差异

在 Vue 2 和 Vue 3 中，Element UI 和 Element Plus 的 Tag 组件在功能上非常相似。主要的区别在于 Vue 2 使用 Options API，而 Vue 3 使用 Composition API，并引入了 <script setup> 语法糖来简化代码。此外，Element Plus 可能在某些属性或事件上提供了更多的选择或改进，但基本的使用方式是一致的。

请注意，Element UI 适用于 Vue 2，而 Element Plus 是专门为 Vue 3 设计的。在使用时，请确保你选择了与你的 Vue 版本兼容的组件库。