<template>
    <div class="ht-base-form-demo">
        <ht-base-form :model="formLeft" label-position="left" :label-width="100">
            <ht-base-form-item label="标题一">
                <ht-base-input v-model="formLeft.input1" clearable></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="标题二">
                <ht-base-input v-model="formLeft.input2" clearable></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="标题三">
                <ht-base-input v-model="formLeft.input3" clearable></ht-base-input>
            </ht-base-form-item>
        </ht-base-form>
        <ht-base-form :model="formRight" label-position="right" :label-width="100">
            <ht-base-form-item label="标题一">
                <ht-base-input v-model="formRight.input1" clearable></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="标题二">
                <ht-base-input v-model="formRight.input2" clearable></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="标题三">
                <ht-base-input v-model="formRight.input3" clearable></ht-base-input>
            </ht-base-form-item>
        </ht-base-form>
        <ht-base-form :model="formTop" label-position="top">
            <ht-base-form-item label="标题一">
                <ht-base-input v-model="formTop.input1" clearable></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="标题二">
                <ht-base-input v-model="formTop.input2" clearable></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="标题三">
                <ht-base-input v-model="formTop.input3" clearable></ht-base-input>
            </ht-base-form-item>
        </ht-base-form>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseFormDemo',
        data(){
            return {
                formLeft: {
                    input1: '',
                    input2: '',
                    input3: ''
                },
                formRight: {
                    input1: '',
                    input2: '',
                    input3: ''
                },
                formTop: {
                    input1: '',
                    input2: '',
                    input3: ''
                }
            }
        }
    }
</script>
<style>
    .ht-base-form-demo {
        width:500px;
        margin: 0 auto;
    }
</style>

