Pro Element Plus

基于 Element Plus 二次封装的 Vue 3 组件库，提供更高层次的抽象和业务常用组件。

✨ 特性

• 🎯 开箱即用 - 提供业务常用组件
• 📦 TypeScript 优先 - 完整的类型定义和智能提示
• 🎨 设计一致 - 完全继承 Element Plus API
• 🔧 开发者友好 - 清晰的文档和示例

📚 文档

Pro Element Plus 文档

🛠️ 安装

npm install @coderhd/pro-element-plus

🔨 使用

全局使用

import { createApp } from 'vue'
// 引入所有组件
import ProElementPlus from '@coderhd/pro-element-plus'
// 引入样式
import '@coderhd/pro-element-plus/dist/index.css'

import App from './App.vue'
// 全局使用
createApp(App).use(ProElementPlus).mount('#app')

按需引入

<template>
  <pro-form :model="form" :fields="fields" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ProForm } from '@coderhd/pro-element-plus'
import type { ProFormFields } from '@coderhd/pro-element-plus'

const form = ref({
  name: '',
  age: '',
  date: '',
})

const fields: ProFormFields = [
  {
    label: '姓名',
    prop: 'name',
    component: 'ElInput',
    componentProps: {
      placeholder: '请输入姓名',
    },
  },
  {
    label: '年龄',
    prop: 'age',
    component: 'ElInputNumber',
    componentProps: {
      placeholder: '请输入年龄',
    },
  },
  {
    label: '日期',
    prop: 'date',
    component: 'ElDatePicker',
    componentProps: {
      type: 'date',
      placeholder: '请选择日期',
    },
  },
]
</script>

🤝 贡献

欢迎提交 Pull Request 或 Issue。

📝 许可证

MIT