Cx UI（基于 Element Plus 的业务组件库）

轻量封装 Element Plus，提供统一风格与常用增强组件：CxInput、CxButton、CxForm、CxTable（列筛选）、CxDialog、CxDrawer、CxPagination、CxSelect、CxDateRange。

安装

npm i @kevinchang1207/cx-ui element-plus
# 或者
pnpm add @kevinchang1207/cx-ui element-plus

要求：Vue 3.2+，Element Plus 2.x。

快速开始（全局注册）

// main.ts / main.js
import { createApp } from 'vue'
import App from './App.vue'
import CxUI from '@kevinchang1207/cx-ui'
import 'element-plus/dist/index.css'

createApp(App).use(CxUI).mount('#app')

按需使用（局部注册）

import { CxButton, CxInput } from '@kevinchang1207/cx-ui'
export default { components: { CxButton, CxInput } }

组件示例

CxButton

<cx-button type="primary" @click="doSomething">提交</cx-button>
<cx-button type="success" plain>成功</cx-button>
<cx-button type="danger" :loading="loading">删除中</cx-button>

Props：type（primary/success/warning/danger/info/default）、size（sm/md/lg）、plain、round、circle、loading、disabled。

CxInput

<cx-input v-model="keyword" placeholder="请输入关键词" clearable />

支持 prefix、suffix 插槽。

CxForm（基于 schema）

<cx-form :model="form" :rules="rules" :schema="[
  { label: '姓名', prop: 'name', component: 'input', placeholder: '请输入姓名' },
  { label: '状态', prop: 'status', component: 'select', options: [
    { label: '启用', value: 'enabled' },
    { label: '停用', value: 'disabled' }
  ]},
  { label: '日期', prop: 'date', component: 'date' }
]" @submit="onSubmit" />

事件：submit(values)、reset()、validate({ valid, error })。

CxTable（列筛选/排序/选择）

<cx-table :data="rows" :columns="[
  { type: 'selection' },
  { prop: 'name', label: '姓名', sortable: 'custom' },
  { prop: 'status', label: '状态', filters: [
    { text: '启用', value: 'enabled' },
    { text: '停用', value: 'disabled' }
  ], filterMethod: (val, row) => row.status === val },
  { prop: 'age', label: '年龄', sortable: 'custom' }
]" @filter-change="onFilter" @sort-change="onSort" />

支持插槽列：columns 中定义 slot: 'xxx'，并提供 <template #xxx="{ row }">。

CxDialog / CxDrawer

<cx-dialog v-model="visible" title="提示" @confirm="ok">内容</cx-dialog>
<cx-drawer v-model="drawer" title="侧边">内容</cx-drawer>

CxSelect / CxDateRange

<cx-select v-model="val" :options="opts" />
<cx-date-range v-model="range" />

分页

<cx-pagination :current="page" :page-size="size" :total="total" @change="onPage" />

常见问题

• 按钮/输入框尺寸：库内 sm/md/lg 自动映射到 Element Plus 的 small/default/large。
• 主题：直接使用 Element Plus 主题定制方案（如变量覆盖）。
• Tree-shaking：本库为 UMD/CommonJS 构建，建议在应用层做路由/页面级懒加载。