0.1.3 • Published 10 months ago

@hanyk/v3-form v0.1.3

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

v3-form

基于vue3的form表单

API

npm install @hanyk/v3-form
// 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')
// 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>
0.1.0

10 months ago

0.1.2

10 months ago

0.1.1

10 months ago

0.0.8

10 months ago

0.0.5

10 months ago

0.1.3

10 months ago

0.0.4

10 months ago

0.0.7

10 months ago

0.0.6

10 months ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago