• 增加四个新组件
    • 增加数十个 API
    • 优化无障碍访问
    • 所有组件支持通过less变量自定义样式
    • 调整了部分不合理的命名，废弃少量 API

    新组件

    在 2.0 版本中，我们引入了社区中呼声最高的四个组件，分别是：

    • Image 图片，类似于小程序原生的 Image 标签，支持多种图片裁剪模式
    • IndexBar 索引栏，通讯录中的字母索引栏，用于长列表快速索引
    • Skeleton 骨架屏，在待加载区域展示的占位区块，提供界面加载过程中的过渡效果
    • DropdownMenu 下拉菜单，用于列表的分类选择、筛选及排序

    新文档

    文档方面，我们重新设计了文档站点，用卡片的方式组织段落，更加直观。对一些较为复杂的组件，我们对示例进行细粒度的拆分，添加更多的用法介绍，以帮助大家更快地上手使用。

    此外，文档站点也支持了搜索和版本切换。

    移动端 UI 风格多变，对组件的可定制性要求较高。从 2.0 版本开始，Vant 中的所有组件都支持通过 Less 变量进行样式定制。同时我们新增了较多样式相关的 Props，便于快速定制组件风格。

    v2.0.0 - 图3

    更轻量

    轻量化是 Vant 的核心开发理念之一。在过去一年多时间里，我们新增了若干个组件和数百项功能，而代码包体积从 1.0 版本的 169kb 降低到了 2.0 版本的 161kb（45kb gzipped），平均每个组件体积下降 13%，这主要得益于组件内部逻辑的重构和复用。

    在未来的 Vue 3.0 版本中，会提供 Function-based API 这一更优的逻辑复用方式，预计能帮助 Vant 进一步优化代码包体积。

    不兼容更新

    Actionsheet

    • 重命名为ActionSheet

    Button

    • 移除bottom-action属性，请使用square和size代替

    Field

    • 移除on-icon-click属性，请使用click-right-icon事件代替
    • icon属性重命名为right-icon
    • icon插槽重命名为right-icon
    • click-icon事件重命名为click-right-icon

    GoodsAction

    • GoodsActionBigBtn重命名为GoodsActionButton
    • GoodsActionMiniBtn重命名为GoodsActionIcon
    • GoodsActionBigBtn移除primary属性，请使用type属性代替

    Step

    • 移除icon属性
    • 移除title属性
    • 移除icon-class属性
    • 移除description属性
    • 移除message-extra插槽

    Badge

    • BadgeGroup重命名为Sidebar
    • Badge重命名为SlidebarItem

    Loading

    • 移除circle类型
    • 移除gradient-circle类型

    Checkbox

    • 调整为flex布局，可能对原有布局产生影响

    Radio

    • 调整为flex布局，可能对原有布局产生影响

    Waterfall

    • 移除在 1.0 版本废弃的 Waterfall 组件，请使用List组件代替，或使用独立的包。

    对以下组件增加了无障碍访问的支持：

    • Accordion
    • Checkbox
    • Dialog
    • DropdownMenu
    • GoodsAction
    • List
    • NoticeBar
    • NumberKeyboard
    • Radio
    • Rate
    • Stepper
    • Tab
    • Slider
    • Switch

    新特性

    ActionSheet

    • 新增lock-scroll属性
    • 新增事件
    • 新增close-on-click-action属性
    • 支持同时使用title和actions属性

    Area

    • 支持reset方法传入code参数

    Button

    • 新增icon属性
    • 新增loading-type属性

    Checkbox

    • 新增icon-size属性

    DatetimePicker

    • 新增filter属性

    Field

    • 新增input插槽
    • 新增click事件
    • 新增clickable属性
    • 新增label-class属性

    GoodsActionButton

    • 新增type属性

    Icon

    • 支持Number类型的size属性

    ImagePreview

    • 新增close-on-popstate属性

    List

    • 优化滚动判断逻辑

    Loading

    • 新增default插槽
    • 新增vertical属性
    • 新增text-size属性
    • 支持Number类型的size属性

    Notify

    • 新增onClick选项
    • 新增onClose选项
    • 新增onOpened选项

    NoticeBar

    • 新增left-icon插槽
    • 新增right-icon插槽

    PasswordInput

    • 新增gutter属性

    Picker

    • 支持惯性滚动
    • 新增toolbar-position属性

    Popup

    • 新增click事件
    • 新增duration属性

    Radio

    • 新增icon-size属性

    Rate

    • 新增gutter属性
    • 支持String类型的属性
    • 新增clearable属性
    • 新增left-icon属性
    • 新增right-icon属性
    • 新增right-icon插槽
    • 优化输入体验，输入法拼写过程中不再会触发v-model更新

    Slider

    • 新增drag-start事件
    • 新增drag-end事件

    Steps

    • 新增inactive-icon属性
    • 新增inactive-icon插槽

    Stepper

    • 支持Number类型的input-width属性

    SubmitBar

    • 新增tip-icon属性
    • 新增suffix-label属性

    SwipeCell

    • 支持自动计算left-width和right-width

    Switch

    • 加载图标颜色现在会跟随背景色变化

    SwitchCell

    • 新增border属性
    • 新增cell-size属性

    Sku

    • 新增preview-open事件
    • 新增preview-close事件

    Tab

    • 新增border属性
    • 优化animated动画性能
    • 修复开启animated后高度错误的问题

    Tabbar

    • 新增route属性
    • 新增border属性
    • 新增inactive-color属性

    TabbarItem

    • 新增name属性

    Toast

    • 新增onOpened选项

    Uploader

    • 新增上传区域默认样式
    • 新增delete事件
    • 新增upload-text属性
    • 新增max-count属性
    • 新增preview-size属性
    • 新增preview-image属性
    • 支持通过v-model绑定文件列表

    后续计划

    我们计划在今年下半年推出 VantWeapp 1.0 版本，目标是对标 Vant 2.0 版本，将大部分新组件和新功能同步到小程序端。

    同时，Vant 3.0 版本也在酝酿当中，不出意外的话，3.0 版本会基于 Vue 3.0 实现，并争取和 Vue 3.0 同期发布。

    对于 Vant 1.x 版本，后续会进入维护期，跟进问题修复，但不再引入功能性改动。