HForm
动态表单，支持JSON化配置，快速实现表单的录入和页面筛选器
Hyb-Naive对NaiveUI表单组件进行二次封装
简单、快速实现表单的录入和页面筛选器
Skip to content
HFormModal
基于动态表单，弹框场景下的组件封装，快速完成表单录入
HFormDrawer
基于动态表单，内容过多由抽屉形式的交互场景下的组件封装，快速完成表单录入
快速开始
sh
npm install hyb-naivesh
pnpm install hyb-naivesh
yarn add hyb-naive快速实现一个筛选器
vue
<template>
<HForm type="FILTER" card :rules="filterRules" @search="search" />
</template>
<script setup lang='ts'>
import { HForm } from 'hyb-naive' // 确保HForm组件已正确引入
const filterRules = [
{
field: 'category',
compType: 'Select',
label: '项目类别',
options: [
{ label: '项目1', value: '1' },
{ label: '项目2', value: '2' },
],
},
{
field: 'projectName',
compType: 'Input',
label: '项目名称',
},
{
label: '操作时间',
field: 'time',
compType: 'DatePicker',
fullWidth: true,
props: {
type: 'datetimerange',
},
},
]
// 搜索
function search(searchParams) {
console.log('searchParams', searchParams)
}
</script>