输入组件通用规范
对原型规范&说明模板不明白朋友，可查看：如何解决原型说明写不全？
本期：输入组件通用规范
概述：涉及输入框、数字输入框、选择框、选择器等组件样式、交互、可控参数的通用规范。
1. 通用基础样式
本节主要与研发约定默认实现内容，通过规范文档维护。
1、默认：即最基础的样式
2、悬停：可输入组件，在鼠标悬停时需有交互，表示此组件可操作
3、获取焦点/选中：当前窗户聚焦的组件，需显示对应样式
4、完成：输入/选择完成的样式
5、只读：内容可复制，但不能更改、输入
6、禁用：无法与用户交互，如无法复制或者输入
7、溢出：内容溢出需有良好交互，以便用户及时获取所需内容
- 输入框：溢出截断，光标移动至边缘后，推动文本往反方向移动
- 单选框：溢出截断即可
- 复选框：选项溢出则向下拓展选择框，选项内文字溢出则用“…”代替
2. 通用基础交互
本节主要与研发约定默认实现内容，通过规范文档维护。
2.1. 一键清除
输入框、选择器等需填入内容的组件，需默认支持一键清除，如场景中无需，则在组件中说明。具体交互如下：
- 有填入值时鼠标悬停，右侧图标切换为“清空”状态，点击清空选项。
- 无填入值时鼠标悬停，不显示
2.2. 通用反馈
1、必填项未填：失去焦点/提交表单时，必填项内容为空，则出现此提示
2、加载中：失去焦点后需调用时间较长的接口进行数据校验，则此时组件为“禁用”样式，并有“加载提示”
3. 约定可控参数
本节主要与研发约定原型中可控制的参数，也通过规范文档维护。文中会提供示例参数，及参数填写说明。
3.1 操作反馈
在用户操作时，可提供反馈提示，以引导用户做出正确操作。提示信息简明扼要，控制10字内。提示类型涉及信息、加载、正确、错误、警告，以便应用于各场景
说明编写方式，在组件说明的最后一条加上“操作反馈”，如：
1）其他说明点…
2）操作反馈：
事件，提示类型“文案”，如：
- 获取焦点时，消息提示“请输入XXXX”
- 失去焦点时，加载提示“字段校验中”
- 用户名重复时，错误提示“该用户名已被占用”
- 输入内容不符合规则时，警告提示“用户名必须为6至20位字母或字母 数字组合”
结语
本系列持续更新，喜欢的朋友请点个【关注】或【收藏】，您的鼓励是我们持续分享的动力。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！