源码解析(2020-2030)

# [元素]选择(Picker+Switch+Radio+Checkbox+Select+Dropdown+Cascader+Uploader+Color)

  • Radio
  • Checkbox
  • Dropdown
  • Rate
  • 根据阈值自动判断显示什么组件，例如只有2个选项的时候显示Switch/Radio/Checkbox, 当元素超过5个的时候Select, 超过100个时显示一个大弹框
  • TreeSelect是treeable的Select

# 文章

# Element

  • Button
  • Tag
  • Radio
  • Checkbox

# Button

// 功能扩展
loading按钮 + 防重复提交按钮
查询按钮(标记是否是最新搜索结果)

# Input-Number-Select

# Input

  • TEXT

  • NUMBER

  • REGEX (CREDIT + IDCARD + ....)

  • 理论上来说，这个输入框的显示是安装

# Switch -> Radio/Checkbox --> Select @diff

  • Switch
  • Radio/Checkbox -> Select(可以支持多选)
  • 所以本质上来说，这是同一种组件
  • 可以设定一个选项阈值(0 ~ +∞)，当小于阈值时显示为Radio/Checkbox

# Select

  • AutoComplete
  • Cascader
// 论如何实现一个完美的Select组件 
// https://juejin.cn/post/5b02b960f265da0b9e655e61
一个相对定位的Selection + 一个绝对定位的DropdownMenu
Selection与页面滚动
一般要模拟下拉框，保持浏览器的一致表现
不要忘记判断向上或向下拉伸
滑过显示大多时候可能比点击显示要贴心

// 功能扩展
多选下拉框

# 更多的输入

// 单向关注有效性，
不要因为开了多个页面多次关注而状态发生toggle
也就是说关注到的是 unstar -> star的这种状态
  • 省市区联动
// 实现
联动应该和内容分开

# Form

// 表单功能扩展
输入格式化
dropdown等交互联动

// 使用serialize() serializeArray()

// LayUI 
封装了方法会返回表单字段,但也不是很好用

# Login 登录注册

  • 优化建议

    • 用户在输入手机号时，如果能以3 4 4的方式显示，用户看起来会轻松很多
    • 邮箱登陆注册时智能显示后缀
    • 账号或者密码错误
    • 滑动验证
    • 分步注册，减少注册心理负担

  • 所有抛开产品本身谈登陆注册的行为都是耍流氓

A产品竟然支持邮箱注册，邮箱注册这种方式主要是PC端时盛行的，现在手机号注册收验证码多方便，这种方式不好；
B产品竟然不能设置密码，每次登陆都要手机验证码，这万一手机没信号收不到验证码怎么办，这种方式不好；
C产品我用第三方登陆了，竟然还让我绑定手机号，这不是欺骗用户么，太不要脸了，这种方式不好；

# QuestionNaire 问卷调查

  • 用户耐心是设计初衷
  • 传统的问卷那种ABCD加滚动很难受
  • 应该是加上绿色的透明悬浮选中层
  • 注意问题逻辑分组
  • 不要出现页面垂直滚动条，一页就放几道题目
  • 选完当前页立刻跳转下一页，但也要支持用户翻页
  • 用户可以不填完所有的题目，不要叫用户返回去重新填

← [元素]范围(Slider+Range+Progress+Rate+Date+Time+Calender) →