# @hanyk/v3-form

> > 基于vue3的form表单

Latest version **0.1.3** (published 2025-01-08) · 0 weekly downloads

## Install

```sh
npm install @hanyk/v3-form
pnpm add @hanyk/v3-form
yarn add @hanyk/v3-form
bun add @hanyk/v3-form
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2025-01-08 |
| First published | 2023-06-18 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 48.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 51594176@qq.com |
| Maintainers | hanyukai |

## Links

- npm: https://www.npmjs.com/package/@hanyk/v3-form
- npm.io page: https://npm.io/package/@hanyk/v3-form

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [vue-tsc](https://npm.io/package/vue-tsc.md) ^2.2.0
- [async-validator](https://npm.io/package/async-validator.md) ^4.2.5

## Recent versions

- 0.1.3 (latest) — 2025-01-08
- 0.1.2 — 2025-01-08
- 0.1.1 — 2025-01-07
- 0.1.0 — 2025-01-07
- 0.0.8 — 2025-01-07
- 0.0.7 — 2025-01-07
- 0.0.6 — 2025-01-07
- 0.0.5 — 2025-01-07
- 0.0.4 — 2025-01-07
- 0.0.3 — 2023-06-18

## README

# v3-form

> 基于vue3的form表单 

# API

```BASH
npm install @hanyk/v3-form
```

```ts
// main.ts
import { createApp } from 'vue'
import { ElInput, ElButton } from 'element-plus'
import 'element-plus/dist/index.css'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import './components/index.scss'
import '@hanyk/v3-form/dist/style.css'

import { registerComponents } from '@hanyk/v3-form'
import { Input } from 'view-ui-plus'

import App from './App.vue'

registerComponents({
  input: ElInput,
  input2: Input
})

createApp(App).use(ElButton).mount('#app')
```

```html
// app.vue
<template>
    <Form span="12" :columns="columns" ref="form">
        <template #address="row">
            <input v-bind="row" />
        </template>
        <FormItem span="24" label="">
            <el-button type="primary" @click="submit">提交</el-button>
        </FormItem>
    </Form>
</template>
<script setup lang="tsx">
    import {
        ref
    } from 'vue'
    import {
        FormItem,
        Form,
        defineColumns
    } from '@hanyk/v3-form'
    import {
        Icon
    } from 'view-ui-plus'

    const columns = defineColumns([{
            label: '姓名',
            el: 'input',
            field: 'name',
            rules: {
                required: true,
                message: '请输入姓名'
            },
            props: {
                value: '张三'
            }
        },
        {
            label: '性别',
            field: 'sex',
            el: 'input2',
            props: {
                value: '男'
            }
        },
        {
            label: '地址',
            field: 'address',
            props: {
                value: '浙江'
            },
            rules: {
                required: true,
                message: '请输入地址'
            }
        },
        {
            label: < h2 style = {
                {
                    display: 'inline-block'
                }
            } > 年龄 < /h2>,
            el: < input / > ,
            field: 'age',
            props: {
                type: 'number',
                value: 20
            },
            slots: {
                prepend: () => < Icon type = "ios-person-outline" / >
            },
            rules: {
                required: true,
                message: '请输入年龄'
            }
        }
    ])
    const form = ref()
    const submit = async () => {
        const data = await form.value.validate()
        console.log('data :', data)
    }
</script>
```

---
_Source: https://npm.io/package/@hanyk/v3-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._