vue移动端组件库选型,项目自用

536 阅读2分钟
NUTUI CUEBUI MandMobile VantUI
最近更新时间 昨天 上个月 五个月前 五天前
star 4.5K 9K 3.4K 19.8K
picker 支持多列 支持多列 支持多列 支持多列
支持多级联动 支持多级联动 支持多级联动 支持多级联动
支持虚拟滚动 支持虚拟滚动 无虚拟滚动 无虚拟滚动
calendar日历 不支持多日期选择 不支持日历控件 不支持日历控件 支持多日期选择
支持日期范围选择 支持日期范围选择
不支持周起始日选择 支持周起始日选择
不支持日期区间最大范围设置 支持日期区间最大范围设置
不支持自定义单元格内容,无disabled 支持formatter自定义Day对象内容,例如disabled
datepicker 支持开始结束时间设置 支持开始结束时间设置 支持开始结束时间设置 支持开始结束时间设置
type 日期'date', 日期时间'datetime',时间'time' type 日期'date', 日期时间'datetime',时间'time' type 日期'date', 日期时间'datetime',时间'time' type:date 、time、 year-month、 month-day 、datehour
date:年月日 date:年月日 date:年月日 date:年月日
datetime:年月日时分 datetime:年月日时分秒 datetime:年月日时分 year-month:年月选择
time:时分秒 time:时分秒 time:时分秒 time:时分秒
month-day:月日选择
datetime 完整时间年月日时分,没有秒
datehour 年月日小时
综合来看 vantUI优势更大,虚拟滚动问题可以通过其他方法解决
pc端->移动端组件转换
  1. 下拉单选 可通过移动端的pick组件加input输入框实现,远程搜索也能支持

  2. 文本和数值输入框可通过 pick组件选择操作类型,Input设置内容

  3. 日期组件

    • 年粒度通过 pick选择
    • 月粒度通过 year-month组件选择
    • 日粒度可通过日历组件实现
    • 周/季粒度 暂无可用 初步设想是通过picker的多级联动或者treeSelect/cascader组件实现
    • 完整时间可用 datetime 显示年月日时分(但是没有秒)
  4. treeSelect 目前所有的级联或者树组件都只支持选择最后一层,不支持中间层选中