Vant: Vant 2.0 版本正式发布

[chenjiahan]

【2019.06.13 更新】
2.0 正式版已发布，点此查看

---

Vant 2.0 版本正在热火朝天的开发中，预计5月下旬会发布 beta 版本，6月发布正式版

主要更新内容有：

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

欢迎大家提出意见或需求 ^_^

---

【2019.05.22 更新】
beta 版本已发布，点此查看更新日志

---

补充安装方法：

npm i vant@beta -S

[yangy9593]

1.增加头像组件，支持裁剪。
2.增加发布评论组件，支持emoj，支持富文本，支持扩展功能栏。
3.增加评论列表组件。

[chenjiahan]

这三个组件暂时都不会提供，我们倾向于优先提供更基础、通用的组件

[ranwawa]

业务中使用到的都提供下嘛,可做为插件,这样就不会影响基础包的大小了,又满足了常用需求

[chenjiahan]

@ranwawa 业务组件暂时不会继续添加咯，通用性差，而且占用了比较多的维护时间

[gbyuxia]

图像上传时的裁剪压缩可以提供吗？

[854709634]

2.0版本不会支持小程序组件了么

[ChangeZhang]

赞赞赞赞赞

[YingZzz]

恭喜出2.0版本~~撒花撒花~

[chenjiahan]

@gbyuxia 不会支持裁剪，压缩还在考虑，图片预览应该会支持
@854709634 vant-weapp 会晚一些

[89360944]

我就想问问， 2.0beta怎么安装

[chenjiahan]

@89360944 npm i [email protected] -S

[xiechao1211]

1、toast里的loading方式组件可否单独提供，跟toast一起使用的话会造成关闭loading的时候会把其他toast一起关闭掉。
2、主题样式覆盖可否使用如下方式：

• main.js引入全局less
• 引入自定义的theme.less文件进行样式覆盖

[chenjiahan]

1、toast里的loading方式组件可否单独提供，跟toast一起使用的话会造成关闭loading的时候会把其他toast一起关闭掉。

暂时没计划拆分，拆分的话改动太大，而且必要性不强

2、主题样式覆盖可否使用如下方式：

• main.js引入全局less
• 引入自定义的theme.less文件进行样式覆盖

这种支持的，引入 index.less 即可

[xiechao1211]

@chenjiahan
关于样式覆盖我做了如下操作:

• main.js 引入

import 'vant/es/index.less'
import './styles/theme.less'

另外也做了另外一种引入尝试
在theme.less文件中引入index.less，而不是在main.js中引入

@import '~vant/es/index.less';

• babel配置
  删除了style的相关配置

module.exports = {
    presets: ['@vue/app'],
    plugins: [
        [
            'import',
            {
                libraryName: 'vant',
                libraryDirectory: 'es'
            },
            'vant'
        ]
    ]
}

最后重新启动项目发现theme.less的变量没有覆盖掉vant里的变量

[xiechao1211]

less文件的样式覆盖比在vue.config文件覆盖有较多好处：

• theme.less变量既可以覆盖vant原有变量，又可以在自定义样式中使用
• theme.less覆盖可以在该文件中做一些样式计算
  而采用配置文件则只能以key/value的形式覆盖，并且不能做到js变量/less变量共用，易用性远不如less文件覆盖

[chenjiahan]

@xiechao1211 确实用 less 文件覆盖更合适，后续我们看下怎么支持

[zjutjsj1004]

新增加了哪几个组件

[chenjiahan]

@zjutjsj1004 更新日志里有

• Image图片组件
• Skeleton骨架屏组件
• IndexBar、IndexAnchor索引栏组件
• DropdownMenu、DropdownItem下拉菜单组件

[xzour]

cell组件可以增加自定义title与value各占cell左右的宽度占比吗?谢谢!

[zhoufanglu]

These dependencies were not found:

• vant/es/actionsheet in ./src/main.js
• vant/es/actionsheet/style in ./src/main.js

To install them, you can run: npm install --save vant/es/actionsheet vant/es/actionsheet/style
vant已经从1.6升级到2.0，之后报以上错误·

[liuwei3230]

不花时间在业务组件上是对的，业务组件每个应用自己需求太多，很难满足，我个人业务组件用的偏少。
把基础组件做好就行了，总体做的还是非常不错的，希望可以开发和提高更多精品组件，谢谢你们的开发和分享。

[jakietwo]

checkbox 组件可以添加文字在左， icon 在右吗。现在的checkbox 的 label-position=“left” 只是向左偏移了几个像素。。

[chenjiahan]

@xzour 这个会考虑下哈
@liuwei3230 谢谢支持~
@jakietwo 这个是 beta 版本的 bug，会在下个 beta 修复

[yyqqing]

望 ActionSheet 组件支持 selected 属性表示已选择该项，或者支持 item 模板允许扩展定制

[AboyL]

@gbyuxia 不会支持裁剪，压缩还在考虑，图片预览应该会支持
@854709634 vant-weapp 会晚一些

可以考虑提供出来一个接口，通过这个接口对已经加载好的内容进行一些预处理，比如cube-ui就提供了一个process-file接口，用来做图片的压缩、图片的旋转调整等操作

[ChangeZhang]

@chenjiahan Field组件 和 search 组件 能加下input focus这个API吗，辛苦官方了！！Field的好像不太好用~ 现在是document.querySelector('.van-field__control').focus();这么实现的，感觉不太优雅

[chenjiahan]

望 ActionSheet 组件支持 selected 属性表示已选择该项，或者支持 item 模板允许扩展定制

@yyqqing 已选择是什么状态，可以具体描述下么

可以考虑提供出来一个接口，通过这个接口对已经加载好的内容进行一些预处理，比如cube-ui就提供了一个process-file接口，用来做图片的压缩、图片的旋转调整等操作

@AboyL 可以的，这个后续会加上

Field组件 和 search 组件 能加下input focus这个API吗，辛苦官方了！！Field的好像不太好用~ 现在是document.querySelector('.van-field__control').focus();这么实现的，感觉不太优雅

@ChangeZhang Field 是支持的呢，Search 是函数值组件因此不支持

[whwhz]

升级版本后 dialog组件 会有这种错误 o(╥﹏╥)o Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[yyqqing]

@chenjiahan 已选择 是指在修改某值时，表示出已选择项，通常效果可能是高亮、不同颜色 或 前面加上圆点或对号；这对修改 以及 多选时有用。如果 ActionSheet 支持通过 slot 扩展 item 是最好的了，这部分可由用户定制了

[chenjiahan]

@yyqqing 可以传入 className 来控制样式，slot 暂时不太好加（item 是数组，得用 render props）

[Shen-Yu]

请问可以从1.5版本无缝升级吗，已经上线，但之前版本组件bug较多

[chenjiahan]

@Shen-Yu 不是无缝的，可以关注下更新日志里的不兼容更新，迁移还是比较容易的

[fffyang]

Loading组件能否增加js单独调用方法？在http请求封装方法中很常用。

[dongnaebi]

image-preview支持一下鼠标事件吧，再也找不到比这个更好用的图片预览了，PC端也想用

[tidows]

1.可否增加 checker 组件？ 有些情况 checker 组件用的还是比较多，比如 性别的选择 男 女，规格的选择等。
2.actionsheet中嵌套 popup 或者 actionsheet 遮罩样式 是否能优化一下？整个页面都使用一个 遮罩好像不怎么太合理。
3.cell单元格组件中的value 的值不一定都是在右侧，也有很多情况是在靠左显示，左侧标题title，所占宽度比例建议可以自定义设置宽度。

请开发组可以考虑一下

[chenjiahan]

Loading组件能否增加js单独调用方法？在http请求封装方法中很常用。

这个用 Toast

image-preview支持一下鼠标事件吧

快速上手里有介绍 PC 端的用法

可否增加 checker 组件

暂无计划支持喔，可以用 checkbox 实现

actionsheet中嵌套 popup 或者 actionsheet 遮罩样式是否能优化一下

多个遮罩层会出现颜色叠加的问题，所以用单例

cell单元格组件中的value 的值不一定都是在右侧

可以用 title-class 和 value-class 设置

[yyqqing]

@chenjiahan 现阶段就是用className做的，但真的好累，扩展性也不好；item 可以考虑独立一个component，应该就好加 slot 了

[chenjiahan]

@yyqqing 独立 Component 不现实，首先没有必要，其次会造成 breaking change

[cnlinjie]

什么时候发布正式版~，最近要用，有点迟疑。。。

[chenjiahan]

@cnlinjie 计划后天

[liuwei3230]

恭喜正式版发布，马上使用

[bolechen]

恭喜正式版发布，马上使用

[ROSEMUSE]

看文档很多用到slot-scope，但vue2.6.0已经废弃此属性，开发的话可以用新语法吗？安装vue2.6.0对此Vant 使用会有影响吗？

[chenjiahan]

@ROSEMUSE 可以使用新语法，不管是 v-slot 还是 slot-scope 都是支持的，安装 Vue 2.6 不会有影响

[YanYii]

These dependencies were not found:

• vant/es/actionsheet in ./src/main.js
• vant/es/actionsheet/style in ./src/main.js

To install them, you can run: npm install --save vant/es/actionsheet vant/es/actionsheet/style
vant已经从1.6升级到2.0，之后报以上错误·

搜索了一番，发现这个问题没有人回答。再看下时间，已经存在大半年。
按着项目的错误提示，找到一个处理方法。

去找了出错的文件，查看了node-modules下vant/es，大概可以明白，是大小写问题。

将 Actionsheet 改为 ActionSheet 即可。

[chenjiahan]

@YanYii 文档里有标注

https://youzan.github.io/vant/#/zh-CN/action-sheet#chang-jian-wen-ti