haier-element

基于 Element Plus 二次封装的企业级 Vue 3 组件库，提供配置驱动的表格、表单组件，内置国际化和主题系统。

安装

npm install haier-element element-plus
# or
pnpm add haier-element element-plus

环境要求：Vue >= 3.3.0，Element Plus >= 2.4.0

快速开始

全量引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import HUI from 'haier-element'

const app = createApp(App)
app.use(ElementPlus)
app.use(HUI)
app.mount('#app')

按需引入

<script setup lang="ts">
import { HTable, HForm } from 'haier-element'
</script>

组件

HTable 表格

通过列配置驱动渲染，内置分页和 loading 状态，支持透传所有 Element Plus Table 原生属性。

<script setup lang="ts">
import { ref } from 'vue'
import type { HTableColumn } from 'haier-element'

const columns: HTableColumn[] = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄', sortable: true },
  { prop: 'email', label: '邮箱' },
]

const data = ref([
  { name: '张三', age: 28, email: '[email protected]' },
  { name: '李四', age: 32, email: '[email protected]' },
])
</script>

<template>
  <HTable :columns="columns" :data="data" />
</template>

Props

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|--------| | columns | 列配置数组 | HTableColumn[] | — | | data | 表格数据 | any[] | — | | loading | 加载状态 | boolean | false | | pagination | 是否显示分页 | boolean | true | | pageSize | 每页条数 | number | 10 |

HForm 表单

通过 JSON 配置驱动表单渲染，内置验证和提交/重置逻辑，支持透传所有 Element Plus Form 原生属性。

<script setup lang="ts">
import { reactive } from 'vue'
import type { HFormItem } from 'haier-element'

const model = reactive({ name: '', age: 0, gender: '' })

const items: HFormItem[] = [
  { prop: 'name', label: '姓名', type: 'input', placeholder: '请输入姓名' },
  { prop: 'age', label: '年龄', type: 'number' },
  {
    prop: 'gender',
    label: '性别',
    type: 'select',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' },
    ],
  },
]

function onSubmit(data: Record<string, any>) {
  console.log('提交数据:', data)
}
</script>

<template>
  <HForm :items="items" :model="model" @submit="onSubmit" />
</template>

支持的表单项类型：input | textarea | number | select | date-picker | checkbox | radio | switch

国际化

内置中文（zh-CN）和英文（en-US），支持自定义语言扩展。

import { useLocale } from 'haier-element'

const { t, setLocale, locale } = useLocale()

// 切换到英文
setLocale('en-US')

主题定制

基于 CSS 变量实现，内置亮色和暗色主题，支持运行时动态切换。

import { useTheme } from 'haier-element'

const { setTheme, currentTheme } = useTheme()

// 切换到暗色主题
setTheme('dark')

Element Plus 重导出

组件库重导出了 Element Plus 的全部组件，可以直接引入：

import { ElButton, ElInput } from 'haier-element'

TypeScript 支持

提供完整的类型定义，安装后即可获得类型提示。

import type { HTableProps, HTableColumn, HFormItem, HFormProps } from 'haier-element'

License

MIT