elementplus form 封装

<think>我们被要求封装axios，在Vite构建的Vue3项目中使用TypeScript和Element Plus。根据引用[3]中提供的示例，我们可以参考其封装和使用方式，但需要结合Vue3和TypeScript的特性进行改进。目标：1.封装axios，包括请求拦截、响应拦截、错误处理等。2.结合TypeScript，为请求函数添加类型支持。3.可以处理文件上传和下载（如导出Excel）。步骤：1.创建axios实例，配置基础URL、超时时间等。2.添加请求拦截器：例如，在请求头中添加token。3.添加响应拦截器：处理响应数据，错误处理（如网络错误、状态码错误等）。4.封装常用的请求方法（get, post, put, delete等），并支持上传和下载。5.针对文件下载，使用file-saver保存文件。另外，我们可以参考Element Plus的ElMessage组件来显示错误信息。实现：首先，安装必要的依赖：```bashnpm installaxiosnpm installfile-savernpm install@types/file-saver --save-dev#类型声明```然后，创建axios封装文件，例如`src/utils/request.ts`。代码实现如下：</think>在 Vite + Vue3 + TypeScript + Element Plus 项目中封装 Axios 的最佳实践如下： ### 一、基础封装实现 ```typescript // src/utils/request.ts import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' import { ElMessage } from 'element-plus' import { useUserStore } from '@/stores/user' // 创建axios实例 const service: AxiosInstance = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) // 请求拦截器 service.interceptors.request.use((config: AxiosRequestConfig) => { const userStore = useUserStore() if (userStore.token) { config.headers!['Authorization'] = `Bearer ${userStore.token}` } return config }, (error) => { return Promise.reject(error) }) // 响应拦截器 service.interceptors.response.use( (response: AxiosResponse) => { const res = response.data // 业务状态码判断 if (res.code !== 200) { ElMessage.error(res.message || 'Error') return Promise.reject(new Error(res.message || 'Error')) } return res }, (error) => { // 处理HTTP错误状态码 if (error.response?.status) { handleHttpError(error.response.status) } return Promise.reject(error) } ) // HTTP错误处理函数 function handleHttpError(status: number): void { const messageMap: Record<number, string> = { 400: '请求错误', 401: '未授权，请重新登录', 403: '拒绝访问', 404: '请求地址不存在', 500: '服务器内部错误', 502: '网关错误', 503: '服务不可用', 504: '网关超时' } ElMessage.error(messageMap[status] || `连接错误 ${status}`) } export default service ``` ### 二、类型强化封装 ```typescript // src/types/api.d.ts declare interface ApiResponse<T = any> { code: number data: T message: string } // 扩展AxiosRequestConfig declare module 'axios' { interface AxiosRequestConfig { showLoading?: boolean isFile?: boolean isDownload?: boolean } } // src/utils/request.ts (新增) import type { ApiResponse } from '@/types/api' // 增强请求方法类型 export const http = { get<T = any>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>> { return service.get(url, config) }, post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<ApiResponse<T>> { return service.post(url, data, config) }, put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<ApiResponse<T>> { return service.put(url, data, config) }, delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>> { return service.delete(url, config) } } ``` ### 三、文件上传下载处理 ```typescript // 文件上传封装 export const uploadFile = (url: string, file: File, data?: Record<string, any>) => { const formData = new FormData() formData.append('file', file) if (data) { Object.keys(data).forEach(key => { formData.append(key, data[key]) }) } return service.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' }, isFile: true }) } // 文件下载封装 import { saveAs } from 'file-saver' export const downloadFile = async (url: string, params?: any, filename?: string) => { const response = await service.get(url, { params, responseType: 'blob', isDownload: true }) const blob = new Blob([response]) saveAs(blob, filename || `download-${Date.now()}.xlsx`) } ``` ### 四、API模块化使用 ```typescript // src/api/user.ts import { http, uploadFile } from '@/utils/request' // 普通请求 export const login = (data: { username: string; password: string }) => { return http.post<{ token: string }>('/user/login', data) } // 文件上传 export const uploadAvatar = (file: File) => { return uploadFile('/user/avatar', file) } // 文件下载 import { downloadFile } from '@/utils/request' export const exportUserData = (params: { startDate: string; endDate: string }) => { return downloadFile('/user/export', params, 'users.xlsx') } ``` ### 五、Element Plus集成优化 ```typescript // 在请求拦截器中添加加载状态 service.interceptors.request.use(config => { if (config.showLoading) { // 调用Element Plus加载状态 } return config }) // 在响应拦截器中处理 service.interceptors.response.use( response => { if (response.config.showLoading) { // 关闭加载状态 } return response }, error => { if (error.config?.showLoading) { // 关闭加载状态 } return Promise.reject(error) } ) ``` ### 最佳实践建议 1. **环境变量配置** 在`.env`文件中设置不同环境API地址： ```env VITE_API_BASE_URL = 'https://api.example.com' ``` 2. **类型安全强化** - 为每个API接口定义响应数据类型 - 使用泛型约束请求参数 3. **错误处理优化** - 添加网络超时重试机制 - 实现请求取消功能（AbortController） 4. **性能优化** - 添加请求缓存层 - 实现并发请求控制 5. **安全加固** - 添加CSRF Token支持 - 实现请求签名机制 > 封装要点：类型系统增强 > 拦截器分层处理 > 文件特殊处理 > 业务状态解耦 > UI框架集成[^1][^3]

### Element Plus 抽屉 (Drawer) 组件封装 #### 一、基础概念与需求分析 为了提高开发效率并简化代码逻辑，在实际项目中通常会对常用的 UI 组件进行二次封装。对于 `Element Plus` 的抽屉 (`Drawer`) 组件来说，可以通过自定义属性和方法来增强其功能性和灵活性[^1]。 #### 二、创建 Vue 单文件组件 新建一个名为 `MyDrawer.vue` 的单文件组件用于实现对原生 `ElDrawer` 的扩展： ```html <template> <el-drawer v-bind="$attrs" @close="handleClose"> <!-- 插槽内容 --> <slot></slot> <!-- 底部操作按钮区域 --> <div class="drawer-footer"> <slot name="footer"> <el-button type="primary" @click="submitForm">确认</el-button> <el-button @click="cancel">取消</el-button> </slot> </div> </el-drawer> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ emits: ['update:modelValue'], methods: { handleClose() { this.$emit('update:modelValue', false); }, submitForm() { console.log('提交表单'); // 提交业务逻辑... // 关闭抽屉 this.handleClose(); }, cancel() { this.handleClose(); } } }); </script> <style scoped> .drawer-footer { text-align: right; } </style> ``` 上述代码实现了基本的功能拓展，包括但不限于： - 自动传递父级传入的所有属性给内置的 `<el-drawer>`； - 定义了默认的操作按钮布局及其行为处理函数； - 支持通过具名插槽来自定义底部按钮区的内容； #### 三、使用示例 在其他页面或组件内引入该封装后的 `MyDrawer` 并调用它： ```html <!-- ParentComponent.vue --> <template> <my-drawer v-model="visible" title="我的抽屉标题"> <p>这里是抽屉主体内容。</p> <!-- 可选：覆盖默认的底部按钮组 --> <template #footer> <el-button type="success" @click="customSubmit">保存草稿</el-button> <el-button @click="visible = false">关闭</el-button> </template> </my-drawer> <button @click="toggleDrawer">打开/关闭抽屉</button> </template> <script setup lang="ts"> import MyDrawer from './components/MyDrawer.vue'; import { ref } from 'vue'; const visible = ref(false); function toggleDrawer() { visible.value = !visible.value; } async function customSubmit() { await new Promise((resolve) => setTimeout(resolve, 1000)); alert('已保存为草稿！'); } </script> ``` 这样就完成了一个简单的基于 `Element Plus` 的 `Drawer` 组件的二次封装实例[^2]。