haier-element-test

基于 Element Plus 二次封装的企业级 Vue 3 组件库。

安装

# 使用 pnpm (推荐)
pnpm add haier-element-test

# 使用 npm
npm install haier-element-test

# 使用 yarn
yarn add haier-element-test

前置依赖

haier-element-test 依赖 Vue 3 和 Element Plus，请确保项目中已安装：

pnpm add vue element-plus

快速开始

haier-element-test 支持两种引入方式，您可以根据项目需求选择合适的方式。

完整引入

一次性注册所有组件，适合需要使用大部分组件的项目。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import HaierElement from 'haier-element-test/full'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css' // 用于明暗主题切换
import App from './App.vue'

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

使用完整引入后，所有组件将自动全局注册，可以直接在模板中使用：

<template>
  <HTable :columns="columns" :data="data" />
  <HForm :items="items" :model="model" />
</template>

按需引入（推荐）

只引入需要的组件，支持 Tree Shaking，可以有效减少打包体积。

// main.ts
import { createApp } from 'vue'
import 'element-plus/theme-chalk/dark/css-vars.css'
import 'element-plus/dist/index.css'
import { HTable, HForm } from 'haier-element-test'
import App from './App.vue'

const app = createApp(App)

// 使用默认前缀 'H'，组件标签为 <HTable>、<HForm>
app.use(HTable)
app.use(HForm)

// 或使用自定义前缀，例如 'My'，组件标签变为 <MyTable>、<MyForm>
// app.use(HTable, { prefix: 'my' })
// app.use(HForm, { prefix: 'my' })

app.mount('#app')

使用示例：

<template>
  <!-- 默认前缀 -->
  <HTable :columns="columns" :data="data" />
  <HForm :items="items" :model="model" />

  <!-- 自定义前缀 'my' 时 -->
  <!-- <MyTable :columns="columns" :data="data" /> -->
  <!-- <MyForm :items="items" :model="model" /> -->
</template>

💡 Tree Shaking 优势

按需引入方式配合现代构建工具（如 Vite、Webpack 5+），可以自动移除未使用的组件代码，显著减少最终打包体积。对于只使用少量组件的项目，推荐使用此方式。

文档

完整文档请访问：haier-element-test 文档站点

文档站点包含：

• 完整的 API 参考文档
• 更多组件使用示例
• 主题定制指南
• 最佳实践建议

组件使用示例

HTable 表格组件

<script setup lang="ts">
import { ref } from 'vue'

// 定义表格列配置
const columns = [
  { 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]' },
  { name: '王五', age: 25, email: '[email protected]' },
])
</script>

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

HForm 表单组件

<script setup lang="ts">
import { reactive } from 'vue'

// 表单数据模型
const model = reactive({
  name: '',
  age: 0,
  gender: '',
})

// 表单项配置
const items = [
  { 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>

组件列表

• HTable - 增强型表格组件，内置分页功能
• HForm - 配置式表单组件，支持多种表单项类型

许可证

MIT