element plus 二次封装

Element Plus 是一套基于 Vue.js 2.0 的桌面端组件库，它提供了一系列的常用 UI 组件，包括表单、表格、弹框、菜单等。它的使用非常方便，但是在一些特定的项目中，我们可能需要对 Element Plus 进行二次封装，以方便我们的开发。

首先，我们需要在项目中安装 Element Plus：

npm install element-plus --save

然后，我们可以创建一个自定义组件，在这个组件中对 Element Plus 进行二次封装。例如，我们可以创建一个名为 `ElButton` 的组件，用于封装 Element Plus 中的 `el-button` 组件：

<template>
  <el-button :type="type" :size="size" :disabled="disabled" @click="handleClick">
    {{ label }}
  </el-button>
</template>

<script>
import { ElButton } from 'element-plus';

export default {
  name: 'ElButton',
  components: {
    ElButton,
  },
  props: {
    type: {
      type: String,
      default: 'primary',
    },
    size: {
      type: String,
      default: 'medium',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: 'Button',
    },
  },
  methods: {
    handleClick() {
      this.$emit('click');
    },
  },
};
</script>

在这个组件中，我们引入了 Element Plus 中的 `ElButton` 组件，并且将它作为子组件进行渲染。同时，我们也定义了一些自定义的 props，例如 `type`、`size`、`disabled` 和 `label`，并且在组件的模板中使用这些 props。在组件的 methods 中，我们定义了一个 `handleClick` 方法，当用户点击按钮时，这个方法会被调用，并且会触发一个 `click` 事件，以便在父组件中监听。

这样，我们就完成了对 Element Plus 中 `el-button` 组件的二次封装。我们可以在任何地方使用这个组件，而不需要再重复编写一遍 Element Plus 的代码。