个人技术分享

区分vue2下的Element UI和vue3下的Element Plus的Button组件

1. Element UI (vue2)

   • Button组件：基于Vue 2的Element UI库中的Button组件提供了多种样式和类型，如默认、主要、成功、警告、危险等。

2. Element Plus (vue3)

   • Button组件：作为Element UI的升级版，Element Plus的Button组件在Vue 3环境下提供了与Element UI相似的功能，但针对Vue 3进行了优化和更新。

安装

1. Element UI

   • 使用npm安装：npm i element-ui -S

2. Element Plus

   • 使用npm安装：npm install element-plus --save

属性

1. Element UI Button

   • 主要属性包括：type（按钮类型，如primary、success、warning、danger、info、text）、plain（是否朴素按钮）、round（是否圆角按钮）、circle（是否圆形按钮）、loading（是否显示加载状态）等。

2. Element Plus Button

   • 与Element UI Button类似，但具体实现和属性可能会有所不同，具体请参考Element Plus的官方文档。

事件

1. Element UI Button

   • 主要事件为click，当按钮被点击时触发。

2. Element Plus Button

   • 与Element UI Button类似，主要事件也为click。

方法

对于Button组件，Element UI和Element Plus通常不提供直接的方法调用，因为它们主要是作为UI元素来使用的。主要的交互逻辑通常是通过绑定事件（如click）到Vue实例中的方法来实现的。

使用案例

1. Element UI Button

<template>
  <el-button type="primary" @click="handleClick">主要按钮</el-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了！');
    }
  }
}
</script>

2. Element Plus Button（使用方法类似）

<template>
  <el-button type="primary" @click="handleClick">主要按钮</el-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleClick() {
      console.log('按钮被点击了！');
    }
  }
});
</script>

请注意，以上示例是基于Element UI和Element Plus的官方文档和常见用法进行的简化描述。在实际使用时，建议参考官方文档以获取最准确和详细的信息。