Element表单交互优化，提升用户体验

2022-11-11 00:39:35

提升 ElementUI 表单交互体验：告别繁琐，拥抱流畅

ElementUI 作为一款备受推崇的 UI 库，为开发者提供了丰富的组件库，助力构建美观实用的界面。然而，在使用 ElementUI 表单组件时，我们不可避免地会遭遇一些交互上的小难题。本篇博客将为您揭晓四种优化方案，让您轻松告别繁琐，拥抱流畅的 ElementUI 表单交互体验。

一、避免规则提示信息过长导致换行显示不全

想象一下，当您聚精会神地填写表单时，规则提示信息却因过长而换行显示不全，是不是心生烦躁？别急，以下方法帮您解决：

撰写简洁明了的规则提示信息
将冗长的提示信息拆分成多行显示
借助弹窗或模态框展示完整提示信息

二、聚焦直接显示规则状态变化，洞察规则动态

当您将目光聚焦到某个输入框时，是否期待立即知晓输入是否符合规则？现在，通过以下优化方案，您的愿望将得以实现：

聚焦时直接显现规则提示信息
通过改变输入框样式，提示规则符合性

三、直观掌控所有规则及校验情况，尽在掌握

填写表单时，仅了解当前输入框的规则状态远远不够。借助以下优化方案，您将全面掌握所有规则及校验情况：

在表单头部或尾部展示所有规则提示信息
在表单头部或尾部显示所有校验情况

四、失焦隐藏提示，保留样式提示，保持专注不失提示

当您将焦点移出输入框时，规则提示信息往往会消失无踪，让人心生困惑。有了以下优化方案，失焦后也能持续掌握规则动态：

失焦时隐藏规则提示信息
通过改变输入框样式，提示规则符合性

代码示例

避免规则提示信息过长导致换行显示不全

<el-form-item label="姓名" prop="name">
  <el-input v-model="name" placeholder="请输入姓名"></el-input>
  <span class="el-form-item__error">姓名长度不能超过 20 个字符</span>
</el-form-item>

聚焦直接显示规则状态变化

<el-form-item label="手机号" prop="mobile">
  <el-input v-model="mobile" placeholder="请输入手机号" @focus="showRule"></el-input>
  <span class="el-form-item__error">手机号格式不正确</span>
</el-form-item>

直观掌控所有规则及校验情况

<el-form ref="form" label-position="top">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="name" placeholder="请输入姓名"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="mobile" placeholder="请输入手机号"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

失焦隐藏提示，保留样式提示

<el-form-item label="邮箱" prop="email">
  <el-input v-model="email" placeholder="请输入邮箱" @blur="hideRule"></el-input>
  <span class="el-form-item__error">邮箱格式不正确</span>
</el-form-item>