Elplus Enhance

基于 Element Plus 的 Vue 3 业务增强组件库，面向中后台常见的表单、筛选、表格、弹窗和布局场景。

文档

在线文档

特性

• 基于 Element Plus，保留原有组件体系和使用习惯
• 提供表单、筛选、表格、弹窗、布局等常用业务增强组件
• 支持完整导入和自动按需导入
• 支持 CSS 与 Sass 样式入口
• 可配合 Element Plus Sass 变量覆盖方案使用
• TypeScript 友好

组件

• ElhForm：配置化表单
• ElhFilter：查询筛选区
• ElhTable：增强表格
• ElhDialog：弹窗封装
• ElhLayout：页面布局

安装

# pnpm
pnpm install elplus-enhance

# npm
npm install elplus-enhance

# yarn
yarn add elplus-enhance

elplus-enhance 依赖 Vue 3 和 Element Plus，请确保项目中已经安装：

pnpm install vue element-plus

完整导入

// main.ts / main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import ElplusEnhance from 'elplus-enhance'

import 'element-plus/dist/index.css'
import 'elplus-enhance/dist/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.use(ElplusEnhance)

app.mount('#app')

自动按需导入

pnpm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { ElplusEnhanceResolver } from 'elplus-enhance'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver(), ElplusEnhanceResolver()]
    })
  ]
})

Sass 变量覆盖

如果项目使用 Element Plus Sass 变量覆盖主题，请将两个 resolver 都配置为 Sass 样式入口。

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { ElplusEnhanceResolver } from 'elplus-enhance'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [
        ElplusEnhanceResolver({ importStyle: 'sass' }),
        ElementPlusResolver({ importStyle: 'sass' })
      ]
    })
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element/variables.scss" as *;`
      }
    }
  }
})

ElplusEnhanceResolver({ importStyle: 'sass' }) 会按组件注入增强组件自身样式和对应的 Element Plus Sass 依赖样式。

License

MIT