基于Vue3+Vite+TS，二次封装element-plus业务组件
//xia仔ke>>：百度网盘
在Vue 3中，结合Vite和TypeScript进行开发是一种流行的做法，它提供了快速的构建速度和类型安全的特性。Element Plus是一套为Vue 3设计的组件库，通过对其进行二次封装，我们可以创建更加符合项目需求的组件，或者添加一些自定义的功能。
以下是一个简单的基于Vue 3、Vite和TypeScript对Element Plus进行二次封装的代码示例：
首先，确保你已经安装了Vue 3、Vite和TypeScript。如果还没有，你可以通过npm或yarn进行安装：
bash复制代码npm init vite@latest my-vue-app --template vue-ts cd my-vue-app npm install npm install element-plus
接下来，创建一个新的文件夹来存放你的封装组件，例如 src/components/custom-element。
在 src/components/custom-element 中，你可以创建你的自定义组件。例如，我们创建一个名为 CustomButton.vue 的文件：
vue复制代码<template> <el-button :type="type" :icon="icon" @click="handleClick"> <slot></slot> </el-button> </template> <script lang="ts"> import { defineComponent, PropType } from 'vue'; import { ElButton, ElButtonProps } from 'element-plus'; export default defineComponent({ name: 'CustomButton', components: { ElButton, }, props: { type: { type: String as PropType<ElButtonProps['type']>, default: 'primary', }, icon: { type: String, default: '', }, }, methods: { handleClick() { this.$emit('click'); }, }, }); </script>
在这个例子中，我们创建了一个名为 CustomButton 的组件，它封装了Element Plus的 el-button 组件。我们添加了一些自定义的属性，如 type 和 icon，并监听了按钮的点击事件。
现在，你可以在其他的Vue组件中使用这个自定义的 CustomButton 组件了：
vue复制代码<template> <div> <custom-button @click="handleButtonClick">Click Me</custom-button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import CustomButton from '@/components/custom-element/CustomButton.vue'; export default defineComponent({ name: 'App', components: { CustomButton, }, methods: { handleButtonClick() { console.log('Button clicked!'); }, }, }); </script>
在这个例子中，我们在 App 组件中使用了 CustomButton 组件，并监听了它的点击事件。当按钮被点击时，handleButtonClick 方法会被调用。
这只是一个简单的例子，你可以根据你的需求进行更复杂的封装和自定义。
