在vue3的setup语法糖 中 二次封装el-botton

在Vue3的setup语法糖中，可以通过调用`defineComponent`来定义一个组件。在这个组件内部，我们可以通过`setup`函数来进行二次封装。

以`el-button`为例，我们可以进行如下的二次封装：

import { defineComponent } from 'vue';
import { ElButton } from 'element-plus';

export default defineComponent({
  name: 'MyButton',
  props: ElButton.props,
  setup(props, { slots }) {
    const handleClick = () => {
      // 处理点击事件
      console.log('button clicked');
    };

    return () => {
      return (
        <ElButton {...props} onClick={handleClick}>
          {slots.default?.()}
        </ElButton>
      );
    };
  }
});

这里我们定义了一个名为`MyButton`的组件，它继承了`el-button`的props属性。在`setup`函数中，我们定义了一个`handleClick`函数来处理点击事件，并将其绑定到`ElButton`组件的`onClick`事件上。最后，我们通过`return`函数返回一个`ElButton`组件，并将props和slots传递进去。这样，我们就完成了对`el-button`的二次封装。

使用这个组件时，只需要像使用`el-button`一样使用`MyButton`即可：

<template>
  <my-button type="primary">Click Me</my-button>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton
  }
}
</script>