@deppon/deppon-ui

UI 组件库，基于 Element Plus，适用于 Vue 3 项目。

功能

提供 Element Plus 组件的按需导出，支持按需引入。

使用方式

方式一：从主入口引入

import { Button, Input, Form } from '@deppon/deppon-ui';

从 1.0.20 起，同时导出了带有 El 前缀的组件别名，例如：

import { ElHeader, Header } from '@deppon/deppon-ui';
// ElHeader 可直接配合 <el-header> 使用，Header 仍兼容旧写法

方式二：按需引入（推荐）

import Button from '@deppon/deppon-ui/es/Button';
import Input from '@deppon/deppon-ui/es/Input';

方式三：使用图标（支持按需引入）

// 方式 1：命名导入（推荐，支持 tree-shaking）
import { Fold, Expand, Document, Menu } from '@deppon/deppon-ui/icons-vue';

// 方式 2：子路径导入（也支持 tree-shaking）
import Fold from '@deppon/deppon-ui/icons-vue/Fold';
import Expand from '@deppon/deppon-ui/icons-vue/Expand';

说明：两种导入方式都支持 tree-shaking，打包工具会自动移除未使用的图标。命名导入方式更简洁，推荐使用。

方式四：使用 unplugin-element-plus 自动导入样式（推荐）

推荐：使用 unplugin-element-plus 可以自动识别模板中的 el-* 标签并自动导入对应的样式。

步骤 1：安装依赖

npm install -D unplugin-element-plus

步骤 2：配置 Vite

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import ElementPlus from 'unplugin-element-plus/vite';

export default defineConfig({
    plugins: [
        vue(),
        // 使用 unplugin-element-plus 自动导入 Element Plus 样式
        ElementPlus({
            // 使用 CSS 样式（默认）
            useSource: false,
        }),
    ],
});

步骤 3：在模板中使用（无需手动导入样式）

<template>
    <el-button>按钮</el-button>
    <el-input v-model="value" />
    <el-table :data="tableData">
        <el-table-column prop="name" label="名称" />
    </el-table>
</template>

<script setup>
import { ElButton, ElInput, ElTable, ElTableColumn } from '@deppon/deppon-ui';
// 无需手动导入样式，unplugin-element-plus 会自动处理
const value = ref('');
const tableData = ref([]);
</script>

说明：

• unplugin-element-plus 会自动检测模板中的 el-* 标签，并自动导入对应的样式
• 这是 Element Plus 官方推荐的手动导入方式
• 支持按需导入，只会打包你实际使用的组件样式
• 参考文档：Element Plus 手动导入

可用组件

基础组件

• Button - 按钮（扩展了防抖、节流、自动加载状态、权限控制等功能）
• Link - 链接
• Icon - 图标
• Divider - 分割线
• Space - 间距
• Scrollbar - 滚动条
• Row - 行（栅格系统）
• Col - 列（栅格系统）

表单组件

• Input - 输入框
• InputNumber - 数字输入框
• Radio - 单选框
• Checkbox - 复选框
• Switch - 开关
• Select - 选择器
• Cascader - 级联选择器
• Transfer - 穿梭框
• DatePicker - 日期选择器
• TimePicker - 时间选择器
• Upload - 上传
• Rate - 评分
• ColorPicker - 颜色选择器
• Form - 表单
• Slider - 滑块
• Autocomplete - 自动完成

数据展示

• Table - 表格
• Tag - 标签
• Progress - 进度条
• Tree - 树形控件
• Pagination - 分页
• Badge - 徽章
• Avatar - 头像
• Card - 卡片
• Collapse - 折叠面板
• Timeline - 时间线
• Empty - 空状态
• Descriptions - 描述列表
• Result - 结果
• Statistic - 统计数值
• Skeleton - 骨架屏
• Image - 图片
• ImageViewer - 图片预览
• Calendar - 日历
• Carousel - 走马灯

反馈组件

• Alert - 警告
• Loading - 加载
• Message - 消息提示
• MessageBox - 消息弹框
• Notification - 通知
• Popover - 弹出框
• Tooltip - 文字提示
• Dialog - 对话框
• Drawer - 抽屉
• Popconfirm - 气泡确认框

导航组件

• NavMenu - 导航菜单
• Tabs - 标签页
• Breadcrumb - 面包屑
• Dropdown - 下拉菜单
• Steps - 步骤条
• Affix - 固钉
• Backtop - 回到顶部

布局组件

• Container - 布局容器
• Header - 顶部容器
• Aside - 侧边栏容器
• Main - 主区域容器
• Footer - 底部容器

其他

• InfiniteScroll - 无限滚动
• Watermark - 水印
• Tour - 漫游式引导

Button 组件扩展功能

Button 组件在 Element Plus 的基础上扩展了以下功能：

防抖和节流

<template>
    <!-- 防抖：500ms 内只执行最后一次点击 -->
    <Button :debounce="500" @click="handleClick">防抖按钮</Button>

    <!-- 节流：500ms 内最多执行一次点击 -->
    <Button :throttle="500" @click="handleClick">节流按钮</Button>
</template>

自动加载状态

当点击事件返回 Promise 时，自动管理 loading 状态：

<template>
    <Button :auto-loading="true" :on-click="handleAsyncClick"> 提交 </Button>
</template>

<script setup>
const handleAsyncClick = async () => {
    // 返回 Promise，按钮会自动显示 loading 状态
    await fetch('/api/submit');
};
</script>

权限控制

<template>
    <!-- 当 permission 为 false 时，按钮自动禁用 -->
    <Button :permission="hasPermission">操作按钮</Button>
</template>

组合使用

<template>
    <Button :throttle="1000" :auto-loading="true" :permission="userCanSubmit" :on-click="handleSubmit">
        提交订单
    </Button>
</template>