vue3超购项目中element ui二次封装代码实现

在 Vue3 的超购项目中，我们可以采用 Element UI 来快速搭建页面和组件。但是，直接使用 Element UI 可能会导致代码冗余和样式重复的问题。因此，我们可以对 Element UI 进行二次封装，以便更好地满足项目的需求。

以下是一个简单的 Element UI 二次封装示例：

<template>
  <el-button v-bind="$attrs" v-on="$listeners" :type="btnType">
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: ''
    }
  },
  computed: {
    btnType() {
      if(this.type === 'primary' || this.type === 'success' || this.type === 'warning' || this.type === 'danger') {
        return this.type;
      } else {
        return '';
      }
    }
  }
}
</script>

这个示例中，我们对 Element UI 的按钮组件进行了二次封装，将其改名为 MyButton，并且添加了一些自定义的属性。具体来说，我们新增了一个名为 size 的属性，表示按钮的大小；新增了一个名为 btnType 的计算属性，用于根据 type 属性的值来确定按钮的样式类型，以便更好地控制样式。

我们可以在其他组件中使用这个 MyButton 组件，就像使用 Element UI 的按钮组件一样，只需要简单地引入并使用即可：

<template>
  <div>
    <my-button type="success">提交</my-button>
    <my-button type="warning">取消</my-button>
  </div>
</template>

<script>
import MyButton from '@/components/MyButton.vue'

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

通过这种方式，我们可以更好地控制代码和样式，使得项目更加易于维护和更新。