區分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的官方文檔和常見用法進行的簡化描述。在實際使用時，建議參考官方文檔以獲取最準確和詳細的信息。