Vant 3.0 RC 版本发布 🔥🔥🔥

[chenjiahan]

目前 Vant 已完成了对 Vue 3.0 的绝大部分适配工作，并发布了 Vant 3.0 RC 版本，欢迎大家在新项目中尝试 Vant 3.0。

背景知识

在使用 Vant 3.0 前，请先了解一下 Vue 3.0 的变更内容：Vue 3.0 官方文档

安装 Vant 3.0

#npm
npm i vant@next -S

# yarn
yarn add vant@next

安装完成后，请参考 Vant 3.0 的文档使用：

• Vant 3.0 在线文档
• Vant 3.0 更新日志
• Vant 3.0 迁移指南
• Vant 3.0 源代码

后续计划

我们计划在十二月发布 Vant 3.0 正式版，目前正在进行的工作有：

• 对外提供 Vant 内部使用的 Composition API 模块，封装为 @vant/use 库（已完成）
• 使用 Composition API 重构所有组件（已完成）
• 使用 TypeScript 重构所有组件
• 完善单元测试并修复发现的问题
• 增加新组件和更多 Feature

注意事项

1. Sku 组件还未完成 Vue 3 适配，因此在 Vant 3.0 RC 版本中暂时不可用
2. beta 版本迭代过程中可能会引入少量的不兼容改动，在升级时请仔细阅读更新日志

视觉规范升级

近期我们还发布了 Vant 视觉规范 3.0，详见：Vant 设计规范 3.0 发布

问题反馈

使用 Vant 3.0 过程中遇到问题时，请通过 issue 的形式进行反馈~

[cereschen]

这么巧吗 让我赶上了 恭喜

[Yankai17148]

强啊，有考虑从webpack换vite开发吗？

[chenjiahan]

会考虑滴，等 Vant 3.0 完工先

[ZhengXiaowei]

也可以抛出一些composition api的常用工具方法

[chenjiahan]

可以抛出一些composition api的常用工具方法

这部分要等内部使用稳定后才会考虑抛出

[heart-er]

建议在使用cdn 比如字体 不要在css文件里内置有赞本身的cdn，而是对外暴露出来，否则对于某些使用字体需要放到自己cdn的用户，会很难受，会意外的下载有赞的字体

[chenjiahan]

@heart-er 这块会改掉

[lzm0x219]

注意样式对ie11的兼容哦~ 2.x版本还存在一些问题。

[chenjiahan]

@Vvni 具体是啥问题，Vant 是移动端组件库，不会专门兼容 IE11

[lzm0x219]

@Vvni 具体是啥问题，Vant 是移动端组件库，不会专门兼容 IE11

目前看到的是组件样式的居中问题，以及input文字被截断，emm，我晚点提几个issues

[lzm0x219]

@Vvni 具体是啥问题，Vant 是移动端组件库，不会专门兼容 IE11

因为vant有PC端兼容嘛，所以处理一下ie11也好呀。

[chenjiahan]

目前看到的是组件样式的居中问题，以及input文字被截断，emm，我晚点提几个issues

好滴

[NidhoggDJoking]

效率是真的高

[lg751551023]

Uploader 组件调用摄像头拍照后部分华为手机不支持上传功能

[muzaisimao]

这, 二维码失效了呀....

[chenjiahan]

@muzaisimao 已更新

[puzzle9]

tabbar 在没有 route 的时候 会报

Property "$route" was accessed during render but is not defined on instance

[puzzle9]

不知道是不是我操作问题
用 vite 在 main 中引入的话

import Vant from 'vant'
import 'vant/lib/index.css'
app.use(Vant)

这么写 打包的时候 不能把 css 打包进去

如果用

import Vant from 'vant'
import '/@modules/vant/lib/index.css'
app.use(Vant)

是正常的

[snowdream]

加油，搞起来。

[mazixiao]

您好，van-tabs加了sticky属性用浏览器的前进后退来跳转路由会报错，不加sticky属性是没有问题的
1.
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of unmounted hook
at <VanSticky container= <div class=​"van-tabs van-tabs--line" modelvalue=​"0">​…​​ offsetTop=0 onScroll=fn >
at
at <Home onVnodeMounted=fn onVnodeUnmounted=fn ref=Ref< Proxy {getCode: ƒ, commit: ƒ, …} > >
at
at

Uncaught (in promise) TypeError: Failed to execute 'unobserve' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

[ctwowt]

vant/src/field/index.js

Line 327 in c8d573c

if (event.target.composing) {

vant-next 当没有使用 v-model 时， event.target.composing 总是为 false

导致输入框在 ios 下输入中文会有问题，

似乎这里没有使用 vue3, v-model 内部 vModelText 指令 设置 event.target.composing 值

    onInput(event) {
      // not update v-model when composing
      if (event.target.composing) {
        return;
      }

      this.updateValue(event.target.value);
    },

[13810768336]

vue:3.12.1
vant:3.0.0
main.js中引入vant
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

顺便说一下，交流群过期了！！！
但是运行的时候报错，如下：

main.js?56d7:13 Uncaught ReferenceError: Vant is not defined
at eval (main.js?56d7:13)
at Module../src/main.js (app.js:4269)
at webpack_require (app.js:833)
at fn (app.js:130)
at Object.1 (app.js:4355)
at webpack_require (app.js:833)
at app.js:971
at app.js:974

[13810768336]

vue:3.12.1
vant:3.0.0
main.js中引入vant
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

顺便说一下，交流群过期了！！！
但是运行的时候报错，如下：

main.js?56d7:13 Uncaught ReferenceError: Vant is not defined
at eval (main.js?56d7:13)
at Module../src/main.js (app.js:4269)
at webpack_require (app.js:833)
at fn (app.js:130)
at Object.1 (app.js:4355)
at webpack_require (app.js:833)
at app.js:971
at app.js:974

安装vant的时候提示：但我的已经是vue3.12.1了
npm WARN vant@3.0.0-alpha.5 requires a peer of vue@3.0.0-0 but none is installed.

[xilianfuhua]

可以再发一遍群二维码吗？？

[chenjiahan]

二维码已更新

[chenjiahan]

vant-next 当没有使用 v-model 时， event.target.composing 总是为 false，导致输入框在 ios 下输入中文会有问题，

@ctwowt 这个问题已知，下个版本会修复

[Nick930826]

vant3.0 swipe 轮播图组件，动态获取的数据，轮播图无法滑动

[chenjiahan]

@Nick930826 已经在 vant@3.0.0-beta.5 版本修复了

[Augly]

大佬们能不能出一个react版本的?

[OctoberToEscape]

文档还是vue2.0的写法 能不能实时更新成3.0的写法，大佬

[chenjiahan]

大佬们能不能出一个react版本的?

https://github.com/mxdi9i7/vant-react

文档还是vue2.0的写法 能不能实时更新成3.0的写法

等正式版发布以后，会陆续把文档改成 setup 的写法，目前的写法也是可以正常用的

[lilililee]

头疼，下载运行组件库后就报错“Uncaught TypeError: activePostFlushCbs[postFlushIndex] is not a function”，各位大神有遇到的吗

+1
vant：3.0.0-beta.6
操作系统：win10
node：10.21.0

更新：
初步定位为 vant-cli 采用了babel loose 模式，导致 vue 代码 const deduped = [...new Set(pendingPostFlushCbs)]; 编译成了 var deduped = [].concat(new Set(pendingPostFlushCbs));， 最终 deduped 变成了 [Set(cb)], 与预期 [cb] 不符导致报错，目前我的解决方案是把 vant-cli 本地打包，修改 packages/vant-cli/src/comfig/webpack.base.ts 中的 babel-loader 配置， exclude: /node_modules\/(?!(@vant\/cli))/ 改为 exclude: /node_modules/。
此方法牺牲了兼容性，期待官方给出更好的解决方案。
@chenjiahan @ctwowt @jiesir

ps: 热更新不生效的问题也存在，端口是8080

[Nick930826]

大佬们能不能出一个react版本的?

https://github.com/mxdi9i7/vant-react

[jiesir]

目前 vant-next 分支在 windows 下克隆，会出现 babel 转换问题：

重现：

git clone -b next https://gitee.com/vant-contrib/vant.git vant-next
cd vant-next
yarn
yarn dev

下面是 mac 和 windows 对比

似乎是 babel-preset 配置文件 不起作用

大神，这个问题解决了吗

[chenjiahan]

@lilililee @jiesir 感谢帮忙排查，babel loose 选项已经在最新分支移除了

[yoonasy]

@chenjiahan vite 中按需导入怎么实现呢

[chenjiahan]

vite 中按需导入怎么实现呢

Vant 支持 tree shaking，在 vite build 时默认就是按需引入的

[yoonasy]

@chenjiahan 好的 感谢。

// import 'vant/lib/index.css'
import 'vant/lib/button/index.less'

上面是全局引入编译好的css，如果我修改按钮主题变量我需要下面这种引入，那很多的情况下 我需要引入更多。

有没有一种方式import 'vant/lib/index.less 直接全局导入less便于修改主题呢，之前通过babel-import-plugin可以直接导入，当vite时候rollup没有这种方式

import 'vant/lib/index.less这种生成路径引入会报错

[vite] error applying css transforms: 
[LessError] {
  message: undefined,
  stack: undefined,
  type: 'Syntax',
  filename: '/Users/cssr/xxx2-wap/node_modules/vant/lib/icon/index.less',
  index: 24,
  line: 2,
  column: 0,
  callLine: NaN,
  callExtract: undefined,
  extract: [
    "@import '../style/var';",
    "@import '~@vant/icons/src/encode-woff2.less';", // 应该是这里不能使用webpack路径？
    ''
  ]
} 0 [
....

[SharpWuqing]

在使用 v-lazy 全局注册时候

报错

在 lazyload.d.ts文件 中发现

[chenjiahan]

@SharpWuqing Lazyload 在下个 beta 版本会支持

[lycHub]

你好，为什么vue3的源码是ts和js混合的呢

[chenjiahan]

为什么vue3的源码是ts和js混合的呢

TS 改造还在持续进行中

[Nick930826]

使用 Vite 创建的项目，如何修改主题色配置？

[yoonasy]

使用 Vite 创建的项目，如何修改主题色配置？

我是通过引入less组件样式文件
然后在less配置中修改变量颜色，配置和之前使用方式一样

[Nick930826]

你好，方便把你的配置截个图参考一下吗，vite.config.js。

…

---原始邮件--- 发件人: "yoonasy"<notifications@github.com&gt; 发送时间: 2020年12月8日(周二) 凌晨3:49 收件人: "youzan/vant"<vant@noreply.github.com&gt;; 抄送: "Mention"<mention@noreply.github.com&gt;;"ChenNick"<xianyou1993@qq.com&gt;; 主题: Re: [youzan/vant] Vant 3.0 Beta 版本发布 🔥🔥🔥 (#7035) 使用 Vite 创建的项目，如何修改主题色配置？ 我是通过引入less组件样式文件 然后在less配置中修改变量颜色，配置和之前使用方式一样 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[jiesir]

vite.config.js里面的cssPreprocessOptions属性， less: {
modifyVars: {'primary-color': 'red'},
javascriptEnabled: true
},
大概就这样

在less文件使用的时候直接@primary-color，这样主题就是红色的。

至于上面答主说的引入less文件：
@import 'utils/var.less';
@import 'utils/public.less';

大概就是这样了

[hj624608494]

ActionSheet, Dialog, Popup 这些类似组件在关闭显示的时候，没有动画过渡呢？

[chenjiahan]

@hj624608494 #7709

[TencentIT]

强啊 这效率也太高了吧

[FrankFan]

头疼，下载运行组件库后就报错“Uncaught TypeError: activePostFlushCbs[postFlushIndex] is not a function”，各位大神有遇到的吗

2021年，我也遇到了， 环境信息：

vant: 3.0.13
vite: 2.1.3
node: 12
Android: 6.0.1 chrome51(webview)
UA: "Mozilla/5.0 (Linux; Android 6.0.1; vivo Y66 Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/51.0.2704.81 Mobile Safari/537.3"

查看了所有issue相关的，看到楼上2位讨论和webpack的配置项loose有关，还有一个PR, 又查了vant源代码，这个loose选项后面有做过修改。

稍后提供一个minimal的重现repo.

有谁知道如何解决麻烦回复下，谢谢了。

[KableShow]

头疼，下载运行组件库后就报错“Uncaught TypeError: activePostFlushCbs[postFlushIndex] is not a function”，各位大神有遇到的吗

2021年，我也遇到了， 环境信息：

vant: 3.0.13
vite: 2.1.3
node: 12
Android: 6.0.1 chrome51(webview)
UA: "Mozilla/5.0 (Linux; Android 6.0.1; vivo Y66 Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/51.0.2704.81 Mobile Safari/537.3"

查看了所有issue相关的，看到楼上2位讨论和webpack的配置项loose有关，还有一个PR, 又查了vant源代码，这个loose选项后面有做过修改。

稍后提供一个minimal的重现repo.

有谁知道如何解决麻烦回复下，谢谢了。

this is @vitejs/plugin-legacy 的锅......