Simpak Components

简介

Simpak Components 是一个基于 Naive UI 构建的 Vue 3 组件库，为现代 Web 应用提供高质量、可复用的组件。该库包含 DataTable、DynamicForm 和 SearchForm 组件，具有全面的功能和优秀的用户体验。

特性

• 🚀 Vue 3 + Composition API - 基于最新的 Vue 3 特性构建
• 🎨 Naive UI 集成 - 利用 Naive UI 的设计系统和组件
• 📱 响应式设计 - 移动端友好和响应式布局
• 🔧 高度可配置 - 每个组件都有丰富的自定义选项
• 📦 Tree-shakable - 只导入你需要的组件
• 🎯 TypeScript 支持 - 完整的 TypeScript 支持

安装

npm install simpak-package
# 或
yarn add simpak-package

快速开始

import { createApp } from 'vue'
import App from './App.vue'
import SimpakComponents from 'simpak-package'

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

组件

1. DataTable

一个功能强大的数据表格组件，支持分页、排序、筛选和行选择功能。

<template>
  <DataTable
    :columns="columns"
    :data="tableData"
    :pagination="pagination"
    :loading="loading"
    @update:checked-row-keys="handleSelection"
  >
    <template #actions>
      <n-button @click="handleAdd">添加</n-button>
    </template>
  </DataTable>
</template>

<script setup>
import { ref } from 'vue'

const columns = [
  { title: '姓名', key: 'name' },
  { title: '年龄', key: 'age' },
  { title: '邮箱', key: 'email' }
]

const tableData = ref([])
const loading = ref(false)
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

const handleSelection = (keys) => {
  console.log('选中的行:', keys)
}
</script>

属性:

• columns (Array, 必需): 表格列配置
• data (Array): 表格数据数组
• pagination (Object): 分页配置
• loading (Boolean): 加载状态
• rowKey (String|Function): 行唯一键
• checkedRowKeys (Array): 选中的行键
• maxHeight (Number|String): 表格最大高度
• minHeight (Number|String): 表格最小高度

2. DynamicForm

一个灵活的表单组件，根据配置动态生成表单字段。

<template>
  <DynamicForm
    v-model="formData"
    :form-items="formItems"
    :rules="validationRules"
    :show-action="true"
    @submit="handleSubmit"
  />
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({})
const formItems = [
  {
    prop: 'name',
    label: '姓名',
    component: 'input',
    defaultValue: '',
    required: true
  },
  {
    prop: 'age',
    label: '年龄',
    component: 'number',
    defaultValue: 18,
    min: 0,
    max: 120
  },
  {
    prop: 'gender',
    label: '性别',
    component: 'select',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  }
]

const validationRules = {
  name: [{ required: true, message: '请输入姓名' }]
}

const handleSubmit = (data) => {
  console.log('表单提交:', data)
}
</script>

属性:

• modelValue (Object, 必需): 表单数据对象
• formItems (Array, 必需): 表单字段配置
• rules (Object): 验证规则
• labelPlacement (String): 标签位置 ('left', 'top')
• labelWidth (String|Number): 标签宽度
• size (String): 表单尺寸 ('small', 'medium', 'large')
• showAction (Boolean): 显示提交/重置按钮
• grid (Boolean): 启用网格布局

3. SearchForm

一个搜索表单组件，支持多种输入类型和响应式布局。

<template>
  <SearchForm
    v-model="searchData"
    :form-items="searchItems"
    @search="handleSearch"
    @reset="handleReset"
  />
</template>

<script setup>
import { ref } from 'vue'

const searchData = ref({})
const searchItems = [
  {
    field: 'keyword',
    label: '关键词',
    type: 'input',
    span: 6
  },
  {
    field: 'category',
    label: '分类',
    type: 'select',
    options: [
      { label: '全部', value: '' },
      { label: '技术', value: 'tech' },
      { label: '商业', value: 'business' }
    ],
    span: 6
  },
  {
    field: 'dateRange',
    label: '日期范围',
    type: 'daterange',
    span: 8
  }
]

const handleSearch = (data) => {
  console.log('搜索条件:', data)
}

const handleReset = () => {
  console.log('表单重置')
}
</script>

属性:

• modelValue (Object): 搜索表单数据
• form-items (Array): 搜索字段配置
• show-actions (Boolean): 显示搜索/重置按钮
• action-position (String): 按钮位置 ('bottom', 'right')

可用的字段类型

• input: 文本输入
• number: 数字输入
• numberrange: 数字范围输入
• select: 下拉选择
• date: 日期选择器
• daterange: 日期范围选择器
• time: 时间选择器
• switch: 开关
• checkbox: 复选框
• radio: 单选框

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

许可证

ISC