表单

效果

表单布局需要 jul-form和jul-form-item 结合使用，jul-form需要双向绑定表单里所有对象，即 jul-form :model="model"

代码预览

<template>
    <div>
        <!-- :model 双向绑定所有数据 -->
        <jul-form :model="model" label-width="80px"  class="formTop">
          <jul-form-item label="用户名">
            <jul-input placeholder="请输入用户名" v-model="model.username" clearable></jul-input>
          </jul-form-item>
          <jul-form-item label="密码">
            <jul-input placeholder="请输入密码" v-model="model.password" showPassword></jul-input>
          </jul-form-item>
          <jul-form-item label="性别">
            <jul-radio-group v-model="model.gender">
                <jul-radio label="1">男</jul-radio>
                <jul-radio label="2">女</jul-radio>
            </jul-radio-group>
          </jul-form-item>
          <jul-form-item label="爱好">
            <jul-checkbox-group v-model="model.hobby">
                <jul-checkbox label="篮球"></jul-checkbox>
                <jul-checkbox label="唱"></jul-checkbox>
                <jul-checkbox label="跳"></jul-checkbox>
            </jul-checkbox-group>
          </jul-form-item>
          <jul-form-item>
            <div class="btn-right">
                <jul-button type="primary">提交</jul-button>
                <jul-button type="default">重置</jul-button>
            </div>
          </jul-form-item>
        </jul-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 表单绑定的所有数据，集成一个对象
            model: {
                username: '',
                username: '',
                gender: '1',
                hobby: ['篮球', '唱', '跳']
            }
        }
    }
}
</script>

<style lang="scss">
    .formTop {
        margin: 20px 0;
    }
    .btn-right {
        text-align: right;
    }
</style>