Form 表单

<re-button shape="round" size="small" :theme="horizontalMode ? 'primary' : 'default'" content="水平排布" customStyle="flex:1;margin-right:8px;" @click="switchLayout(true)" />
  <re-button shape="round" size="small" :theme="horizontalMode ? 'default' : 'primary'" content="竖向排布" customStyle="flex:1;" @click="switchLayout(false)" />
  <re-switch :value="disabledMode" @change="onDisabledChange" />
  <re-form ref="demoFormRef" class="demo-form" :data="formDataObject" :rules="formRules" resetType="initial" :showErrorMessage="true" scrollToFirstError="smooth" :labelAlign="currentLabelAlign" :labelWidth="currentLabelWidth" :contentAlign="currentContentAlign" @reset="onFormReset" @submit="onFormSubmit" @validate="onFormValidate" >
  <re-form-item label="用户名" name="name" help="输入用户名" contentAlign="left">
  <re-input :value="formData.name" :disabled="disabledMode" :borderless="true" placeholder="请输入用户名" @update:value="(value) =>
  <re-form-item label="手机号" name="phone">
  <re-input :value="formData.phone" :disabled="disabledMode" :borderless="true" :align="horizontalMode ? 'right' : 'left'" placeholder="请输入手机号" @update:value="(value) =>
  <re-form-item label="邮箱" name="email">
  <re-input :value="formData.email" :disabled="disabledMode" :borderless="true" :align="horizontalMode ? 'right' : 'left'" placeholder="请输入邮箱" @update:value="(value) =>
  <re-form-item label="个人简介" name="bio">
  <re-input type="textarea" :value="formData.bio" :disabled="disabledMode" :borderless="true" placeholder="请输入个人简介" tips="最多 40 个字符" :maxlength="40" @update:value="(value) =>
  <re-button theme="primary" content="提交" customStyle="flex:1;margin-right:12px;height:32px;" @click="submitForm" />
  <re-button content="重置" customStyle="flex:1;" @click="resetForm" />