antmjs/vantui

基于vant-weapp实现的Taro-React版及H5-React版组件库https://antmjs.github.io/vantui/#/home

@antmjs/vantui

基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库

相关链接

• Vant Weapp：由有赞团队打造的轻量、可靠的微信小程序 UI 组件库
• Taro：由京东团队打造的开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用

为什么是高度一致

• 99% 样式文件迁移

• 100% React 化，在 React 化的过程中保留了有赞的大部分 JS 逻辑，尽可能的少重构！

• 10+ 项目接入中

我们带来了什么

• 使用 TypeScript 编写，提供完整的类型定义

• 支持 Taro(H5、微信小程序、支付宝小程序、抖音小程序...)(注：React Native 不支持)

• 与 VantWeapp 的 UI 和 API 尽可能的保持一致

• 50+ 个高质量组件，覆盖移动端主流场景

• 支持主题定制

• 支持按需加载

为什么你可以放心用

• 背景：整个组件库初期是依赖开源项目 Vant Weapp 的代码经过全量编译而来，所有样式文件及代码结构都与其保持高度一致，只是生命周期经过改造使其支持 React，很大程度避免了重新造轮子带来的各种问题

• 组件库本身无法 100%满足大众个性化的 UI 需求，如果有个性化需求的可以自己通过改主题定制或 class 或 style 的形式满足自己的要求

如果觉得不错，给个 Star 哦

学习链接

• github 文档
• gitee 文档

预览

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR

发布

• 根目录需要创建 temp.js 文件

module.exports = {
  gitAuth: 'xxxx', // git token
  webhooksToken:
    'xxx', // 钉钉
}
- yarn release

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源

参与共建

小电科技创新事业部前端团队

特别声明

• 该组件库并不是一个新的轮子，我们只是得益于有赞团队在 vant-weapp 的多年实践、积累、沉淀上做了一些简单的扩展，让它可以以 Taro/React 的方式进行开发接入。

• 我们是 vant-weapp 的锦上添花版本，在此还是需要感谢 Taro 团队以及有赞团队为社区所作出的贡献。

• Logo 暂时还未获得使用许可，如有侵权，请及时联系我们。

以下是 @antmjs/vantui 的核心贡献者们

hisanshao	Chitanda60	Banlangenn	zuolung

贡献者们

感谢以下小伙伴们为 @antmjs/vantui 发展做出的贡献：

快速沟通群

微信群满 200 人，需手动拉群。添加好友请备注“AntmJS”，我们会尽快拉你进群交流

赞助

募捐款项将全部用于项目维护，对于社区提出优质 PR 的成员给予奖励，可以是一杯奶茶、一个小红包等

vantui's Issues

DropdownMenu 间距太大 无法使用

微信开发者工具 显示效果

iPhone xr 真机显示效果

实测场景问题还是一堆 无法在生产环境下使用，希望尽快解决

tabs swipeable 为true，滑动效果差

BUG描述
Tab 标签页 tabs 属性 swipeable 为true，模拟器和真机实测滑动效果非常差，基本无法来回滑动切换tab

复现步骤

<Tabs swipeable={ true }>
    <Tab title="标签 1">
      内容 1
    </Tab>
    <Tab title="标签 2">
      内容 2
    </Tab>
    <Tab title="标签 3">
      内容 3
    </Tab>
    <Tab title="标签 4">
      内容 4
    </Tab>
  </Tabs>

期望结果
来回滑动切换tab流畅

实际结果
滑动效果差

截图

环境
iPhone8plus 14.2 微信小程序

附加信息
另外，希望Tab开放自定义头部，文档描述清楚些

Trao3.x react native 如何使用

"templateInfo": {
"name": "react-native",
"typescript": false,
"css": "sass"
},
taro init工程信息如上
weapp没问题
npm run dev:rn
npm run ios
报错如图:
transform[stdout]: node_modules/@antmjs/vantui/es/col/index.css
transform[stdout]: 1:10 ⚠ 无效的 React Native 样式属性 "float" (taro-rn/css-property-no-unknown) [stylelint]
transform[stdout]: 1:21 ⚠ 无效的 React Native 样式属性 "box-sizing" (taro-rn/css-property-no-unknown) [stylelint]
transform[stdout]:
transform[stdout]: 警告 "float" 不是一个有效的 React Native 样式属性
transform[stdout]: StyleSheet van-col: {
transform[stdout]: "float": "left",
transform[stdout]: "boxSizing": "border-box"
transform[stdout]: } entry file: node_modules/@antmjs/vantui/es/col/index.css

是否是还未支持taro 下 rn直接使用

button 的 ts类型 children 应该是可选的

BUG描述
ts 校验报错

复现步骤

<Button
    type="primary"
    icon="star-o"
    className="demo-margin-right"
 />

期望结果

实际结果

截图

环境

附加信息

PowerScrollView,下拉刷新异常

BUG描述
在列表任意位置，缓慢下拉（快速不会），释放后会触发PowerScrollView 下拉刷新，但当前未处于列表顶部。
开发工具鼠标拖动下拉可复现（滑轮不会触发），真机调试可复现问题

复现步骤

期望结果
应只在列表顶部下拉才触发下拉刷新

实际结果

截图

环境

附加信息

Picker bug

BUG描述
defaultIndex 设置默认值后，选项列无法滚动到小于 defaultIndex 值的列。
valueKey 设置后，组件使用时报错。

复现步骤

Taro 微信小程序项目中

期望结果

实际结果

截图

环境

附加信息

表单组件缺少name属性

您提出的功能是否和您遇到的问题有关，请描述该问题

Field等组件没有name属性，无法在Form里面使用，原版的vant weapp是有的，是否是漏掉了？

您是否有建议的实现方案

其它帮助我们理解您需求的描述、截图

does not contain an export named 'DropdownItem' 报错

React Taro 下使用 DropdownItem 报错 does not contain an export named 'DropdownItem'
"@tarojs/react": "3.3.16",

import {Icon, NavBar, DropdownItem, DropdownMenu} from '@antmjs/vantui';

PowerScrollView ，生产环境异常

BUG描述
生产环境编译，PowerScrollView 抛出错误
vendors.js? [sm]:formatted:1 TypeError: Cannot read property 'now' of undefined
列表内容无法显示

复现步骤
期望结果
实际结果
截图

环境
生产环境

附加信息

tabs切换报错

BUG描述
tabs点击切换报错

复现步骤
<Tabs onClick={ onTabClick } active={ 1 }>

内容 1


内容 2

期望结果

实际结果

截图

环境
"@antmjs/vantui": "^1.2.9
"@tarojs/taro": "3.3.0"

附加信息

Uploader 组件在h5端调不起来， 点击没有任可反应，这个组件只支持小程序吗？

BUG描述

复现步骤

期望结果

实际结果

截图

环境

附加信息

taro 支付宝小程序异常

BUG描述
import { SwipeCell } from '@antmjs/vantui';
引入后回导致支付宝小程序 控制台 报
TypeError: Object is not a function

复现步骤

期望结果

实际结果

截图

环境

附加信息

SwipeCell划动一行时，其它CellGroup里面的Cell一起划动了

BUG描述
SwipeCell划动一行时，其它CellGroup里面的Cell一起划动了

复现步骤
必现

<SwipeCell rightWidth={65} renderRight={(<View>删除</View>)}>
          <CellGroup>
            {this.state.data.map(item => {
              return <Cell center clickable title={'titel'} value={item.is_current ? '✔️' : ''} />
            })}
          </CellGroup>
</SwipeCell>

期望结果
SwipeCell划动一行时，只有这一行划动

实际结果
其它CellGroup里面的Cell一起划动了

截图

环境
微信小程序 iOS

附加信息
已经在群里提到过

style 内置样式引入报错找不到

BUG描述

复现步骤

期望结果

实际结果

截图

环境

附加信息

taro 集成 vant-ui ，在 H5 下无法编译通过，但是 小程序下可以

BUG描述
集成到 taro 里面以后，由于 taro 有 px-transform，会出现如下编译错误。
即使在 taro 的 config/index.js 中将 'van' 加入到白名单也不行

./node_modules/@antmjs/vantui/lib/px-transform/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: F:\projects\ruijian\rjoa-taro\node_modules\@antmjs\vantui\lib\px-transform\index.js: Property local of ExportSpecifier expected node to be of a type ["Identifier"] but in
stead got "MemberExpression"
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)

复现步骤

1. npm i @antmjs/vantui -S
2. 在 taro 的 config/index.js 中，在 h5 下加入 esnextModules: ['@antmjs/vantui']
3. 在 taro 的 config/index.js 中，将 h5/pxtransform 设置为 false
4. 在 taro 的 config/index.js 中，在 plugins 下加入：

    ['@tarojs/plugin-html', {
      pxtransformBlackList: [/demo-/, /van-/]
    }]

只要编译就会这样。
但是小程序可以编译通过，即使不加白名单

期望结果
能成功编译，能在程序中使用 vant-ui

实际结果

Module build failed (from ./node_modules/babel-loader/lib/index.js):

截图

环境
npm: 7.21.1
node: v16.4.1
taro: 3.3.10

附加信息

PowerScrollView 无法加载内容

BUG描述
生产环境编译，PowerScrollView 抛出错误
vendors.js? [sm]:formatted:1 TypeError: Cannot read property 'now' of undefined
列表内容无法显示

复现步骤
期望结果
实际结果
截图

环境
生产环境

附加信息

Uploader 点击报错 Taro is not defined

BUG描述

Uploader 点击报错 Taro is not defined

复现步骤

import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'
import upload from '@/request/upload'
import { Uploader } from '@antmjs/vantui'

const UploadImage = ({ url, onChange, ...props }) => {
  const [fileList, setFileList] = useState([])
  useEffect(() => {
    setFileList((files) => [...files, { url }])
  }, [url])
  const afterRead = (event) => {
    const { file } = event.detail
    upload.upload(file.url).then((url) => {
      onChange(url)
    })
  }
  return (
    <Uploader
      maxCount='1'
      fileList={fileList}
      afterRead={afterRead}
      {...props}
    ></Uploader>
  )
}

export default UploadImage

期望结果

实际结果

截图

环境

附加信息

bug: radio组件配合cellgroup，使用renderRight不显示radio

项目使用的是taro+ts+taro-hook，按照文档提供的demo，使用renderRight，cell里不显示radio组件，换用renderRightIcon可以显示，但是没有选中效果，而且点击事件dataset为空。

复现repo

field 高度自适应无效

BUG描述

高度没有变化

复现步骤

期望结果

实际结果

截图

环境

附加信息

Tabbar 激活样式匹配问题

BUG描述
tabbar激活样式匹配错误，与当前active不匹配

复现步骤
当把 Tabbar 当做自定义tabbar时，每个tabbar第一次点击时，样式正常（例如从最左边tab点到最右边）。第二次点击tab时，激活样式匹配错误（从右到左）

期望结果

实际结果

截图

环境

附加信息

根据使用简介下载的 vant-demo无法启动，

BUG描述
拉取项目代码后 进入vantui-demo ，然后运行npm run watch:weapp 报错。项目无法启动

复现步骤
一堆报错信息

期望结果

实际结果

截图

(node:19155) UnhandledPromiseRejectionWarning: [object Array]
(Use node --trace-warnings ... to show where the warning was created)
(node:19155) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)
(node:19155) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
环境

附加信息

希望TreeSelect组件支持多级树形结构选择，目前仅两级

您提出的功能是否和您遇到的问题有关，请描述该问题
TreeSelect 目前仅支持两级选择。Picker选择器联动不支持多选。希望有多级树形结构选择组件

您是否有建议的实现方案

其它帮助我们理解您需求的描述、截图

希望增加form组件

您提出的功能是否和您遇到的问题有关，请描述该问题

您是否有建议的实现方案
参考vant form

其它帮助我们理解您需求的描述、截图

SwipeCell组件左右滑的选择和删除无样式

BUG描述

选择和删除没有样式效果，查看节点确实是没有相关样式

复现步骤
<SwipeCell
rightWidth={65}
leftWidth={65}
renderLeft={(

选择

)}
renderRight={(

删除

)}
>

期望结果
如dom

实际结果

截图

环境
vant 1.4.2

附加信息

所有组件px单位在taro 的 h5 配置中转换不了， 已加了 esnextModules: ['@antmjs/vantui'] 却不行 H5 显示与小程序的不一致，用不了

BUG描述

复现步骤

期望结果

实际结果

截图

环境

附加信息

datetime时间选择器，真机上特别卡，开发者工具上不卡

BUG描述
如标题

复现步骤
使用的是网站上的demo

期望结果
解决真机上的卡顿

实际结果

截图

环境
iphone 8p

附加信息

Collapse 组件 accordion = true 时,传递value的类型是字符串,ts提示类型提示不匹配,且默认值赋值后未处于active状态

BUG描述
Collapse 组件 accordion = true 时,传递value的类型是字符串,ts提示类型提示不匹配,且默认值赋值后未处于active状态

复现步骤

 const [active, setActive] = useState(['1']);

  const onActiveChange = (e: any) => {
      setActive(e.detail);
  };
<Collapse accordion={true} value={active} onChange={onActiveChange}>
        <CollapseItem title='有赞微商城' name='1'>
            提供多样店铺模板，快速搭建网上商城
        </CollapseItem>
        <CollapseItem title='有赞零售' name='2'>
            网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
        </CollapseItem>
        <CollapseItem title='有赞美业' name='3'>
            线上拓客，随时预约，贴心顺手的开单收银
        </CollapseItem>
    </Collapse>

期望结果
能够打开默认选中的,类型参数正确

实际结果

截图

环境

附加信息

readme的二维码失效了啊 怎么进群

readme的二维码失效了啊 怎么进群

按需引入包还是过大。

您提出的功能是否和您遇到的问题有关，请描述该问题
主包中未使用vantui，但是按需加载后，主包增加300k，好像按需引入不生效。

您是否有建议的实现方案

其它帮助我们理解您需求的描述、截图

选择日期组件（年月）type 文档标错了,应该为date

BUG描述

复现步骤

期望结果

实际结果

截图

环境

附加信息

图片上传 bug

BUG描述
图片上传，

1. 添加图片的块和图片列表不在一个盒子，导致图片列表还有位置，添加+按钮 跑到下一行了
2. 图片列表不会换行

复现步骤
官网demo

期望结果

null
实际结果

null
截图

null
环境
null

附加信息

dialog 命令能够弹起来

BUG描述
dialog 命令式不能够弹起来

复现步骤

期望结果

实际结果

截图

环境

附加信息

Field组件在iphone6s下，开启clearable,会导致focus失败

BUG描述
Field组件在iphone6s下，开启clearable,会导致focus失败

复现步骤
iphone6s下，Field设置clearable={true}, input聚焦操作

期望结果
弹出键盘保持聚焦

实际结果
弹出键盘，键盘收起，失去焦点

截图

环境
iphone6s

附加信息

百度/快手小程序兼容问题

BUG描述
按照文档正常使用后，微信/抖音 小程序正常

百度小程序

百度小程序直接无法通过编译

快手小程序

button 的 padding 等有异常，

复现步骤
必现

期望结果

各端编译通过，且正常展示

实际结果

在不同端情况不一致

截图

环境
小程序

附加信息

希望官网，能够展示 各端小程序的二维码，可供开发者自行体验真机效果，和发现兼容问题。
比如：微信/百度/抖音/快手/支付宝 等等
具体可以参考：uniapp官网

Circle组件，在小程序中，属性中text不生效

BUG描述
Circle组件，在小程序中，属性中text不生效

复现步骤

期望结果

实际结果

截图

环境

附加信息

uploader组件非img和video类型文件（如pdf）点击预览文件控制台报错

BUG描述
uploader组件预览pdf文件（https）时，点击文件控制台报错

复现步骤
提供一个https的pdf文件地址，使用uploader预览，点击展示的内容

期望结果
点击后正常预览pdf内容

实际结果
点击后控制台报错

截图

环境
"@antmjs/vantui": "^1.4.11"

附加信息
查看源码后，代码直接使用的Taro.openDocument打开文件地址，需要先调用Taro.downloadFile获取临时地址后再调用Taro.openDocument（见图2）

Picker，多级联动，切换选项后，数据不展示

BUG描述
切换一级选项后，二级选项不展示数据，二级选项的数据量不一样。同时切换后，滑动二级现象有视觉卡顿

复现步骤

期望结果
数据展示

实际结果

截图

环境
微信开发者工具，ios微信真机测试

附加信息

代码
`
const customCycle= {
天: [1],
周: [1],
月: [1],
年: [1],
}

for (let index = 2; index <= 300; index++) {
customCycle['天'].push(index);

        if (index <= 5) {
            customCycle['周'].push(index);
            customCycle['年'].push(index);
        }
        if (index <= 12) {
            customCycle['月'].push(index);
        }
    }

const columns = []
columns.push({
values: Object.keys(customCycle),
className: 'column1',
defaultIndex: 1
})
columns.push({
values: customCycle['周'],
className: 'column2',
defaultIndex: 1
})

function onChange (event) => {
const {
picker,
value,
index
} = event.detail;
console.log(event.detail)
picker.setColumnValues(1, this.state.customCycle[value[0]]);
}

`

安装后编译报错

您提出的功能是否和您遇到的问题有关，请描述该问题

您是否有建议的实现方案

其它帮助我们理解您需求的描述、截图

钉钉小程序平台编译报错 TypeError: i is not a function

BUG描述
钉钉小程序平台编译报错

复现步骤
基于taro3.3.19版本创建 typescript + less 模板项目，添加vantui依赖，添加钉钉小程序编译插件，运行编译命令，使用小程序开发者工具IDE打开，编译报错

期望结果
钉钉小程序正常运行

实际结果
运行钉钉小程序编译失败

截图

环境
node：v14.18.2
npm：6.14.15
Taro： v3.3.19

附加信息

项目链接：测试项目

支持按需引入吗？

无法启动钉钉小程序

BUG描述
启动钉钉小程序命令，在开发者工具报错，微信和飞书小程序可以正常运行。

复现步骤
1.拉取AntmJS/vantui demo代码运行钉钉小程序报错
2.拉取taro模版代码启动钉钉小程序正常，引入AntmJS/vantui组件后报错
都是提示TypeError: Object is not a function
期望结果
可以运行

实际结果
无法运行

截图

环境
windows

附加信息

picker

BUG描述

1. defautIndex 无效
2. 滚动 change 拿不到 index

复现步骤

null
期望结果

null
实际结果
null

截图

null
环境
null

附加信息

sticky问题

BUG描述

1. 不添加下面的代码无法实现sticky效果，可是container又根本没有被用到

  useEffect(()=>{
    const c=createSelectorQuery().select('#container')
    setContainer(c)
  },[])

2. 加上上述代码能实现吸附之后，快速滑动时抖动非常大
   复现步骤

import {Sticky} from "@antmjs/vantui";
import {View} from "@tarojs/components";
import {useEffect, useState} from "react";
import {createSelectorQuery} from "@tarojs/taro";


const MallIndex = () => {

  const [container,setContainer]=useState<any>(null)

  useEffect(()=>{
    const c=createSelectorQuery().select('#container')
    setContainer(c)
  },[])

  return (
    <View style={{width:'100%'}}>
      <View style={{height:1000}} />
      <Sticky offsetTop={0} onScroll={(x)=>{console.log(x)}}>
        test
      </Sticky>
      <View style={{height:1000}} />
    </View>
  )
}

export  default MallIndex

期望结果
只需要Sticky就可以 完成吸附

Tabs 使用数组动态设置Tab打包成小程序默认选中tab没有下划线，切换其他的Tab可以显示下划线

BUG描述

Tabs 使用数组动态设置Tab打包成小程序默认选中tab没有下划线，切换其他的Tab可以显示下划线
复现步骤

{
props.data.length > 0 && props.data.map((item, index) =>

{'内容:' + index}

)
}

期望结果

默认选中的Tab显示下划线
实际结果

截图

环境

"@antmjs/vantui": "^1.2.9"
附加信息

datetime-picker 建议增加 ref props 暴露 pickerRef

您提出的功能是否和您遇到的问题有关，请描述该问题
datetime-picker 建议增加 ref props 暴露 pickerRef
有场景需要定制确定和取消按钮，改动原本的按钮成本搞，暴露的ref可以提供手动触发confirm 的功能

您是否有建议的实现方案
暴露对应方法来获取pickerRef

其它帮助我们理解您需求的描述、截图

taro 引入 @antmjs/vantui, Toast/Dialog 不能正常使用

BUG描述
Toast/Dialog 不能正常使用

复现步骤
按照文档安装的 @antmjs/vantui, babel-plugin-import, 按需加载 Toast无法使用,Rate/Button 可以使用

期望结果

实际结果

截图

环境

附加信息

SwipeCell bug 页面上出现了0

BUG描述
SwipeCell 滑动单元格，leftWidth属性为0的时候，或者不设置的时候，标签内出现了0

复现步骤
<SwipeCell rightWidth={65} leftWidth={0} renderRight={( <View> 删除 </View> )} > <CellGroup> <Cell title="单元格" value="内容" /> </CellGroup> </SwipeCell>

期望结果
不出现0。真机上出现，左右滑动，屏幕跟着滑动

实际结果

截图

环境
微信开发者工具，react

附加信息

自定义下拉菜单，DropdownItem 的 title 属性无法显示。vantUI正常

BUG描述
自定义下拉菜单，title属性无法显示

复现步骤

期望结果
正常显示title

实际结果

截图

环境
版本1.4.1。微信小程序

附加信息

一点建议，3个bug

建议：

1. 希望支持按需引入，不然打包体积过大
   发现的bug：
2. 细边框button无下划线（微信小程序demo）
3. 在页面根节点不设置width:100%的情况下，页面会overflow。根节点加上width:100%就显示正常。（微信小程序自己引入的时候）
4. 源码中部分地方是引入'js文件，而实际源码中是引入ts文件'。（不影响使用，看源码时候发现）

感谢作者的开源！

Picker选择器未能正确展示

BUG描述
piceker选择器在钉钉小程序中未能展示

复现步骤
拉取vantui-demo中的代码，yarn之后npm run build:dd，使用钉钉开发者工具打开之后，点击picker选择器

期望结果
完整展示出时间选择器

实际结果
页面展示空白

截图

环境
macOS 12.1

附加信息