idp-base-components-lib

IDP 基础组件库 - 基于 Vue 3 + Element Plus + vxe-table 构建的企业级组件库

✨ 特性

• 🚀 基于 Vue 3 Composition API
• 💎 基于 Element Plus 设计规范
• 📦 开箱即用的高质量组件
• 🎨 支持主题定制
• 🌍 支持国际化
• 📱 响应式设计
• 🔧 TypeScript 支持
• 📖 详细的文档和示例

📦 安装

npm

npm install idp-base-components-lib

pnpm

pnpm add idp-base-components-lib

yarn

yarn add idp-base-components-lib

🔨 使用

完整引入

import { createApp } from "vue";
import App from "./App.vue";

// 引入组件库
import IdpComponents from "idp-base-components-lib";
// 引入样式（推荐使用简短路径）
import "idp-base-components-lib/style.css";

const app = createApp(App);

// 全局注册所有组件
app.use(IdpComponents);

app.mount("#app");

说明：组件库默认使用中文语言（zh-CN），自动生效，无需额外配置。

按需引入

<template>
  <IdpButton type="primary">按钮</IdpButton>
  <IdpVTable :config="tableConfig" :data="tableData" />
</template>

<script setup>
import {
  Button as IdpButton,
  VTable as IdpVTable,
} from "idp-base-components-lib";
import "idp-base-components-lib/style.css";

const tableConfig = {
  title: "用户列表",
  columns: [
    { type: "seq", width: 60, title: "序号" },
    { field: "name", title: "姓名", width: 120 },
    { field: "age", title: "年龄", width: 80 },
  ],
};

const tableData = [
  { name: "张三", age: 25 },
  { name: "李四", age: 30 },
];
</script>

VxeUI 语言配置（仅用于 VTable 组件）

组件库已自动配置 VxeUI 为中文，无需手动调用任何配置函数。

无论使用完整引入还是按需引入，只要导入了组件，中文配置都会自动生效。

自定义语言（可选）

仅在需要使用其他语言时才需要配置：

import { setupVxeUI } from "idp-base-components-lib";
import vxeEnUS from "vxe-pc-ui/lib/language/en-US";

// 切换为英文
setupVxeUI(vxeEnUS, "en-US");

📚 组件列表

基础组件

| 组件 | 说明 | | ------------------- | ----------------------- | | Button | 按钮组件 | | Input | 输入框组件 | | Textarea | 文本域组件 | | EmailInput | 邮箱输入框 | | PhoneInput | 手机号输入框 | | LandlineInput | 座机号输入框 | | SecureTextInput | 安全文本输入框 | | Header | 页头组件 | | Page | 页面容器组件 | | VTable | 增强表格组件（⭐ 推荐） | | PascalCase | 帕斯卡命名组件 |

业务组件

| 组件 | 说明 | | ---------- | ---------- | | NavBar | 导航栏组件 |

🌟 核心组件介绍

VTable - 增强表格组件

功能强大的表格组件，基于 vxe-table 封装。

主要特性

• 🔍 搜索功能：支持 input、select、multiSelect、date、dateRange 等多种搜索字段
• 📊 自定义列：用户可自由选择显示/隐藏列，配置可持久化
• 🎨 灵活渲染：支持插槽、render 函数、默认渲染三种方式
• 📄 分页支持：内置分页器
• ⚙️ 操作列：预置操作列，支持预览、下载、重命名、删除等操作
• 🔘 行外按钮：支持预定义按钮和自定义按钮
• 💾 持久化：支持列宽和自定义列持久化
• 📱 响应式：自适应不同屏幕尺寸

基础使用

<template>
  <IdpVTable
    :config="config"
    :data="data"
    :total="100"
    :search-config="searchConfig"
    :show-operation="true"
    @search="handleSearch"
    @linePreview="handlePreview"
  />
</template>

<script setup>
import { VTable as IdpVTable } from 'idp-base-components-lib'

const config = {
  title: '文件列表',
  columns: [
    { type: 'seq', width: 60, title: '序号' },
    { field: 'name', title: '文件名', width: 200 },
    { field: 'size', title: '大小', width: 100 },
    { field: 'uploadTime', title: '上传时间', width: 160 },
  ]
}

const searchConfig = {
  fields: [
    { field: 'name', label: '文件名', type: 'input' },
    { field: 'status', label: '状态', type: 'select', options: [...] },
  ]
}

const data = ref([])

const handleSearch = (formData) => {
  console.log('搜索条件:', formData)
}

const handlePreview = (row) => {
  console.log('预览:', row)
}
</script>

📖 文档

详细文档请查看我们的 Storybook

🔧 本地开发

# 克隆项目
git clone https://github.com/standandcxs/company-component-library.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm serve

# 启动 Storybook
pnpm storybook

# 构建组件库
pnpm build

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 License

MIT

👥 维护者

• Your Name [email protected]

🙏 鸣谢

• Vue 3
• Element Plus
• vxe-table
• Vite

注意：本组件库依赖以下包，使用前请确保已安装：

• vue >= 3.3.0
• element-plus >= 2.0.0
• vxe-pc-ui >= 4.0.0
• vxe-table >= 4.0.0