Merge branch 'dev' into next
This commit is contained in:
@@ -16,22 +16,125 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
|
||||
|
||||
## Details
|
||||
|
||||
### [v3.3.6](https://github.com/compare/v3.3.5...v3.3.6)
|
||||
|
||||
`2021-12-05`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- fix ssr.js require path [#9999](https://github.com/youzan/vant/issues/9999)
|
||||
|
||||
### [v3.3.5](https://github.com/compare/v3.3.4...v3.3.5)
|
||||
|
||||
`2021-12-02`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- fix exports field break SSR [#9988](https://github.com/youzan/vant/issues/9988)
|
||||
- fix exports field break unplugin-vue-components [#9985](https://github.com/youzan/vant/issues/9985)
|
||||
|
||||
### [v3.3.4](https://github.com/compare/v3.3.3...v3.3.4)
|
||||
|
||||
`2021-12-01`
|
||||
|
||||
- fix `lib/ssr.js` not exist
|
||||
|
||||
### [v3.3.3](https://github.com/compare/v3.3.2...v3.3.3)
|
||||
|
||||
`2021-11-30`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Support nuxt3 [#9970](https://github.com/youzan/vant/issues/9970)
|
||||
- Locale: add pt-BR locale [#9959](https://github.com/youzan/vant/issues/9959)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Swipe: fix incorrect border radius in iOS safari [#9958](https://github.com/youzan/vant/issues/9958)
|
||||
- Uploader: fix preview is slow when sum of images size be bigger [#9961](https://github.com/youzan/vant/issues/9961)
|
||||
|
||||
### [v3.3.2](https://github.com/compare/v3.3.1...v3.3.2)
|
||||
|
||||
`2021-11-28`
|
||||
|
||||
**Feature**
|
||||
|
||||
- add exports field and use bundled output by default [#9952](https://github.com/youzan/vant/issues/9952)
|
||||
- Tabbar: support highlighted with child route [#9926](https://github.com/youzan/vant/issues/9926)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: auto selected to max range when show-confirm is false [#9948](https://github.com/youzan/vant/issues/9948)
|
||||
- Calendar: should scroll to current date instead of current month [#9949](https://github.com/youzan/vant/issues/9949)
|
||||
- Swipe: should prevent touchmove event when swiping [#9920](https://github.com/youzan/vant/issues/9920)
|
||||
- Tabs: rename wrapper class to `van-tab__panel-wrapper` [#9951](https://github.com/youzan/vant/issues/9951)
|
||||
|
||||
### [v3.3.1](https://github.com/compare/v3.3.0...v3.3.1)
|
||||
|
||||
`2021-11-23`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- AddressEdit: should not emit save event when validation failed [#9917](https://github.com/youzan/vant/issues/9917)
|
||||
|
||||
### [v3.3.0](https://github.com/compare/v3.2.8...v3.3.0)
|
||||
|
||||
`2021-11-19`
|
||||
|
||||
**Accessibility**
|
||||
|
||||
- Cascader: add role, aria and tabindex [#9886](https://github.com/youzan/vant/issues/9886)
|
||||
- CountDown: add timer role [#9906](https://github.com/youzan/vant/issues/9906)
|
||||
- DropdownMenu: add role, aria and tabindex [#9893](https://github.com/youzan/vant/issues/9893)
|
||||
- Field: add aria-labelledby [#9883](https://github.com/youzan/vant/issues/9883)
|
||||
- List: add role and tabindex [#9888](https://github.com/youzan/vant/issues/9888)
|
||||
- Pagination: refactor DOM to improve a11y [#9901](https://github.com/youzan/vant/issues/9901)
|
||||
- Popover: add tabindex and aria-disabled [#9889](https://github.com/youzan/vant/issues/9889)
|
||||
- Rate: improve a11y when disabled or readonly [#9881](https://github.com/youzan/vant/issues/9881)
|
||||
- Search: id prop add default value [#9884](https://github.com/youzan/vant/issues/9884)
|
||||
- Sidebar: add role, aria and tabindex [#9903](https://github.com/youzan/vant/issues/9903)
|
||||
- Slider: improve a11y when disabled or readonly [#9880](https://github.com/youzan/vant/issues/9880)
|
||||
- Stepper: add aria-disabled [#9877](https://github.com/youzan/vant/issues/9877)
|
||||
- Stepper: add group role [#9876](https://github.com/youzan/vant/issues/9876)
|
||||
- Switch: add tabindex [#9887](https://github.com/youzan/vant/issues/9887)
|
||||
- Tabbar: add role, aria and tabindex [#9895](https://github.com/youzan/vant/issues/9895)
|
||||
- Tabs: add aria-controls [#9882](https://github.com/youzan/vant/issues/9882)
|
||||
- Tabs: add aria-disabled [#9878](https://github.com/youzan/vant/issues/9878)
|
||||
- Tabs: add aria-orientation and tabindex [#9872](https://github.com/youzan/vant/issues/9872)
|
||||
- Uploader: add role, aria and tabindex [#9905](https://github.com/youzan/vant/issues/9905)
|
||||
- remove tabindex from disabled elements [#9879](https://github.com/youzan/vant/issues/9879)
|
||||
|
||||
**Feature**
|
||||
|
||||
- Popup: reduce unused listener [#9896](https://github.com/youzan/vant/issues/9896)
|
||||
- Field: expose sub-types of FieldRule [#9843](https://github.com/youzan/vant/issues/9843)
|
||||
- minify svg icons [#9869](https://github.com/youzan/vant/issues/9869)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Popover: useClickAway failed in SSR [#9899](https://github.com/youzan/vant/issues/9899)
|
||||
- CouponList: incorrect list height [#9874](https://github.com/youzan/vant/issues/9874)
|
||||
- Field: should not trigger validation after blurring readonly input [#9862](https://github.com/youzan/vant/issues/9862)
|
||||
- Switch: switch node inherit font-size [#9842](https://github.com/youzan/vant/issues/9842)
|
||||
- Tabbar: before-change not work in route mode [#9856](https://github.com/youzan/vant/issues/9856)
|
||||
- Tabs: rename panel class to `van-tab__panel` [#9885](https://github.com/youzan/vant/issues/9885)
|
||||
|
||||
### [v3.2.8](https://github.com/compare/v3.2.7...v3.2.8)
|
||||
|
||||
`2021-11-09`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Cascader: add options-bottom slot [#9804](https://github.com/issues/9804)
|
||||
- Cascader: add options-bottom slot [#9804](https://github.com/youzan/vant/issues/9804)
|
||||
- SubmitBar: add SubmitBarTextAlign type [f95567](https://github.com/commit/f95567ade758d453f4acad8a40d8ae717035476a)
|
||||
- PasswordInput: add PasswordInputProps type [#9820](https://github.com/issues/9820)
|
||||
- PasswordInput: add PasswordInputProps type [#9820](https://github.com/youzan/vant/issues/9820)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- NavBar: fix NavBarProps spelling [#9818](https://github.com/issues/9818)
|
||||
- Progress: incorrect border-radius [#9826](https://github.com/issues/9826)
|
||||
- SubmitBar: fix missing SubmitBarProps export [#9819](https://github.com/issues/9819)
|
||||
- Tabs: should emit click-tab after before-change [#9805](https://github.com/issues/9805)
|
||||
- NavBar: fix NavBarProps spelling [#9818](https://github.com/youzan/vant/issues/9818)
|
||||
- Progress: incorrect border-radius [#9826](https://github.com/youzan/vant/issues/9826)
|
||||
- SubmitBar: fix missing SubmitBarProps export [#9819](https://github.com/youzan/vant/issues/9819)
|
||||
- Tabs: should emit click-tab after before-change [#9805](https://github.com/youzan/vant/issues/9805)
|
||||
|
||||
### [v3.2.7](https://github.com/youzan/vant/compare/v3.2.6...v3.2.7)
|
||||
|
||||
|
||||
@@ -16,22 +16,128 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
|
||||
## 更新内容
|
||||
|
||||
### [v3.3.6](https://github.com/compare/v3.3.5...v3.3.6)
|
||||
|
||||
`2021-12-05`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- 修复 ssr.js 文件引用路径错误的问题 [#9999](https://github.com/youzan/vant/issues/9999)
|
||||
|
||||
### [v3.3.5](https://github.com/compare/v3.3.4...v3.3.5)
|
||||
|
||||
`2021-12-02`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- 修复 exports field 导致 SSR 无法正确引入的问题 [#9988](https://github.com/youzan/vant/issues/9988)
|
||||
- 修复 exports field 导致 unplugin-vue-components 引用报错的问题 [#9985](https://github.com/youzan/vant/issues/9985)
|
||||
|
||||
### [v3.3.4](https://github.com/compare/v3.3.3...v3.3.4)
|
||||
|
||||
`2021-12-01`
|
||||
|
||||
- 修复 `lib/ssr.js` 文件不存在导致 SSR 失败的问题
|
||||
|
||||
### [v3.3.3](https://github.com/compare/v3.3.2...v3.3.3)
|
||||
|
||||
`2021-11-30`
|
||||
|
||||
**Feature**
|
||||
|
||||
- 支持在 nuxt3 中使用 [#9970](https://github.com/youzan/vant/issues/9970)
|
||||
- Locale: 新增 pt-BR 葡萄牙语 (巴西) [#9959](https://github.com/youzan/vant/issues/9959)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Swipe: 修复 iOS 系统下圆角失效的问题 [#9958](https://github.com/youzan/vant/issues/9958)
|
||||
- Uploader: 修复图片预览卡顿的问题 [#9961](https://github.com/youzan/vant/issues/9961)
|
||||
|
||||
### [v3.3.2](https://github.com/compare/v3.3.1...v3.3.2)
|
||||
|
||||
`2021-11-28`
|
||||
|
||||
**Feature**
|
||||
|
||||
- 新增 `package.json` 中的 `exports` 字段 [#9952](https://github.com/issues/9952)
|
||||
- Tabbar: 支持在 route 模式下匹配子路由 [#9926](https://github.com/issues/9926)
|
||||
- Tabs: 将 `van-tab__pane-wrapper` 类重命名为 `van-tab__panel-wrapper` [#9951](https://github.com/issues/9951)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: 修复 show-confirm 为 false 时不会限制最大日期范围的问题 [#9948](https://github.com/issues/9948)
|
||||
- Calendar: 修复 `scrollToDate` 方法无法精确滚动到对应日期的问题 [#9949](https://github.com/issues/9949)
|
||||
- Swipe: 修复开始滑动时未阻止 touchmove 事件行为的问题 [#9920](https://github.com/issues/9920)
|
||||
|
||||
### [v3.3.1](https://github.com/compare/v3.3.0...v3.3.1)
|
||||
|
||||
`2021-11-23`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- AddressEdit: 修复表单校验不通过时也会触发 save 事件的问题 [#9917](https://github.com/issues/9917)
|
||||
|
||||
### [v3.3.0](https://github.com/compare/v3.2.8...v3.3.0)
|
||||
|
||||
`2021-11-19`
|
||||
|
||||
**Accessibility**
|
||||
|
||||
改善以下组件的无障碍访问体验:
|
||||
|
||||
- Cascader: 增加 role="menu", tabindex, aria-checked, aria-disabled 属性 [#9886](https://github.com/youzan/vant/issues/9886)
|
||||
- CountDown: 增加 role="timer" 属性 [#9906](https://github.com/youzan/vant/issues/9906)
|
||||
- DropdownMenu: 增加 role="menu", tabindex, aria-labelledby 属性 [#9893](https://github.com/youzan/vant/issues/9893)
|
||||
- Field: 增加 aria-labelledby 属性 [#9883](https://github.com/youzan/vant/issues/9883)
|
||||
- List: 增加 role="button", tabindex 属性 [#9888](https://github.com/youzan/vant/issues/9888)
|
||||
- Pagination: 增加 role="navigation" 和 button 标签 [#9901](https://github.com/youzan/vant/issues/9901)
|
||||
- Popover: 增加 tabindex, aria-disabled 属性 [#9889](https://github.com/youzan/vant/issues/9889)
|
||||
- Rate: 增加 aria-disabled, aria-readonly 属性 [#9881](https://github.com/youzan/vant/issues/9881)
|
||||
- Search: 提供默认的 id 属性 属性 [#9884](https://github.com/youzan/vant/issues/9884)
|
||||
- Sidebar: 增加 role="tab", tabindex, aria-selected 属性 [#9903](https://github.com/youzan/vant/issues/9903)
|
||||
- Slider: 增加 aria-disabled, aria-readonly 属性 [#9880](https://github.com/youzan/vant/issues/9880)
|
||||
- Stepper: 增加 aria-disabled 属性 [#9877](https://github.com/youzan/vant/issues/9877)
|
||||
- Stepper: 增加 role="group" 属性 [#9876](https://github.com/youzan/vant/issues/9876)
|
||||
- Switch: 增加 tabindex 属性 [#9887](https://github.com/youzan/vant/issues/9887)
|
||||
- Tabbar: 增加 role="tab", tabindex, aria-selected 属性 [#9895](https://github.com/youzan/vant/issues/9895)
|
||||
- Tabs: 增加 aria-controls 属性 [#9882](https://github.com/youzan/vant/issues/9882)
|
||||
- Tabs: 增加 aria-disabled 属性 [#9878](https://github.com/youzan/vant/issues/9878)
|
||||
- Tabs: 增加 tabindex, aria-orientation 属性 [#9872](https://github.com/youzan/vant/issues/9872)
|
||||
- Uploader: 删除按钮增加 role="button", tabindex, aria-label 属性 [#9905](https://github.com/youzan/vant/issues/9905)
|
||||
- 移除禁用元素的 tabindex 属性 [#9879](https://github.com/youzan/vant/issues/9879)
|
||||
|
||||
**Feature**
|
||||
|
||||
- Popup: 移除多余的 click 事件监听 [#9896](https://github.com/youzan/vant/issues/9896)
|
||||
- Field: 导出 `FieldRuleValidator` 等多个类型定义 [#9843](https://github.com/youzan/vant/issues/9843)
|
||||
- Empty: 压缩 svg 图标 [#9869](https://github.com/youzan/vant/issues/9869)
|
||||
- NumberKeyboard: 压缩 svg 图标 [#9869](https://github.com/youzan/vant/issues/9869)
|
||||
- Tabs: 将 `van-tab__pane` 类重命名为 `van-tab__panel` [#9885](https://github.com/youzan/vant/issues/9885)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Popover: 修复 useClickAway 方法在 SSR 时报错的问题 [#9899](https://github.com/youzan/vant/issues/9899)
|
||||
- CouponList: 修复列表高度不正确的问题 [#9874](https://github.com/youzan/vant/issues/9874)
|
||||
- Field: 修复点击只读输入框会触发表单验证的问题 [#9862](https://github.com/youzan/vant/issues/9862)
|
||||
- Switch: 修复全局设置 font-size 时样式错误的问题 [#9842](https://github.com/youzan/vant/issues/9842)
|
||||
- Tabbar: 修复 route 模式下无法触发 before-change 属性的问题 [#9856](https://github.com/youzan/vant/issues/9856)
|
||||
|
||||
### [v3.2.8](https://github.com/compare/v3.2.7...v3.2.8)
|
||||
|
||||
`2021-11-09`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Cascader: 新增 options-bottom 插槽 [#9804](https://github.com/issues/9804)
|
||||
- Cascader: 新增 options-bottom 插槽 [#9804](https://github.com/youzan/vant/issues/9804)
|
||||
- SubmitBar: 新增 SubmitBarTextAlign 类型 [f95567](https://github.com/commit/f95567ade758d453f4acad8a40d8ae717035476a)
|
||||
- PasswordInput: 新增 PasswordInputProps 类型 [#9820](https://github.com/issues/9820)
|
||||
- PasswordInput: 新增 PasswordInputProps 类型 [#9820](https://github.com/youzan/vant/issues/9820)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- NavBar: 修复 NavBarProps 拼写错误的问题 [#9818](https://github.com/issues/9818)
|
||||
- Progress: 修复圆角大小错误的问题 [#9826](https://github.com/issues/9826)
|
||||
- SubmitBar: 修复未导出 SubmitBarProps 的问题 [#9819](https://github.com/issues/9819)
|
||||
- Tabs: 修复 click-tab 触发顺序早于 before-change 的问题 [#9805](https://github.com/issues/9805)
|
||||
- NavBar: 修复 NavBarProps 拼写错误的问题 [#9818](https://github.com/youzan/vant/issues/9818)
|
||||
- Progress: 修复圆角大小错误的问题 [#9826](https://github.com/youzan/vant/issues/9826)
|
||||
- SubmitBar: 修复未导出 SubmitBarProps 的问题 [#9819](https://github.com/youzan/vant/issues/9819)
|
||||
- Tabs: 修复 click-tab 触发顺序早于 before-change 的问题 [#9805](https://github.com/youzan/vant/issues/9805)
|
||||
|
||||
### [v3.2.7](https://github.com/youzan/vant/compare/v3.2.6...v3.2.7)
|
||||
|
||||
|
||||
@@ -34,29 +34,36 @@ pnpm dev
|
||||
|
||||
### 目录结构
|
||||
|
||||
项目的主要目录结构如下所示:
|
||||
Vant 采用 monorepo 进行代码管理,所有子包在 `packages` 目录下:
|
||||
|
||||
```
|
||||
root
|
||||
└─ packages
|
||||
├─ vant # 组件库
|
||||
├─ vant-cli # 脚手架
|
||||
├─ vant-icons # 图标库
|
||||
├─ vant-use # Composition API
|
||||
└─ .... # 其他周边 npm 包
|
||||
```
|
||||
|
||||
其中,`vant` 目录为组件库的核心代码:
|
||||
|
||||
```
|
||||
vant
|
||||
├─ docs # 文档
|
||||
├─ packages # 基础包
|
||||
├─ src # 组件源代码
|
||||
├─ test # 单测工具类
|
||||
└─ vant.config.mjs # 文档网站配置
|
||||
├─ docs # 文档
|
||||
├─ src # 组件源代码
|
||||
├─ test # 单测工具类
|
||||
└─ vant.config.mjs # 文档网站配置
|
||||
```
|
||||
|
||||
组件代码位于 src 目录下,每个组件一个独立的文件夹。
|
||||
|
||||
### 组件目录结构
|
||||
|
||||
添加新组件时,请按照下面的目录结构组织文件,并在 `vant.config.mjs` 中配置组件名称。
|
||||
`src` 目录包含各个组件的源码,每个文件夹对应一个组件:
|
||||
|
||||
```
|
||||
src
|
||||
└─ button
|
||||
├─ demo # 示例代码
|
||||
├─ test # 单元测试
|
||||
├─ Component.ts # 组件
|
||||
├─ Component.tsx # 组件
|
||||
├─ index.ts # 组件入口
|
||||
├─ index.less # 样式
|
||||
├─ var.less # 样式变量
|
||||
@@ -93,7 +100,7 @@ src
|
||||
|
||||
```bash
|
||||
# 添加主仓库到 remote,作为 fork 后仓库的上游仓库
|
||||
git remote add upstream https://github.com/youzan/vant.git
|
||||
git remote add upstream git@github.com:youzan/vant.git
|
||||
|
||||
# 拉取主仓库最新代码
|
||||
git fetch upstream
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
- 🍭 Support Vue 2 & Vue 3
|
||||
- 🍭 Support Tree Shaking
|
||||
- 🍭 Support Custom Theme
|
||||
- 🍭 Support Accessibility (still improving)
|
||||
- 🍭 Support i18n
|
||||
- 🌍 Support SSR
|
||||
|
||||
@@ -24,16 +25,14 @@
|
||||
|
||||
See in [Quickstart](#/en-US/quickstart).
|
||||
|
||||
### Contribution
|
||||
|
||||
Please make sure to read the [Contributing Guide](https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
|
||||
|
||||
### Browser Support
|
||||
|
||||
Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.
|
||||
|
||||
Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
|
||||
|
||||
## Links
|
||||
|
||||
### Official Ecosystem
|
||||
|
||||
| Project | Description |
|
||||
@@ -55,12 +54,34 @@ Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
|
||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
|
||||
| [@antmjs/vantui](https://github.com/antmjs/vantui) | Mobile UI Components based on Vant, supporting Taro and React |
|
||||
|
||||
### Links
|
||||
### Other Links
|
||||
|
||||
- [Feedback](https://github.com/youzan/vant/issues)
|
||||
- [Changelog](#/en-US/changelog)
|
||||
- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||
|
||||
## Contribution
|
||||
|
||||
### Core Team
|
||||
|
||||
Core contributors of Vant and Vant Weapp:
|
||||
|
||||
| [](https://github.com/chenjiahan/) | [](https://github.com/cookfront/) | [](https://github.com/w91/) | [](https://github.com/pangxie1991/) | [](https://github.com/rex-zsd/) | [](https://github.com/nemo-shen/) | [](https://github.com/Lindysen/) | [](https://github.com/JakeLaoyu/) |
|
||||
| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
|
||||
| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) |
|
||||
|
||||
### All Contributors
|
||||
|
||||
Thanks to the following friends for their contributions to Vant:
|
||||
|
||||
<a href="https://github.com/youzan/vant/graphs/contributors" target="_black">
|
||||
<img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors" style="width: 100%; margin: 16px 0">
|
||||
</a>
|
||||
|
||||
### Contribution Guide
|
||||
|
||||
Please make sure to read the [Contributing Guide](https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
|
||||
|
||||
### LICENSE
|
||||
|
||||
[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
|
||||
|
||||
@@ -27,6 +27,7 @@ Vant 是**有赞前端团队**开源的移动端组件库,于 2017 年开源
|
||||
- 🍭 支持 Vue 2、Vue 3 和微信小程序
|
||||
- 🍭 支持主题定制,内置 700+ 个主题变量
|
||||
- 🍭 支持按需引入和 Tree Shaking
|
||||
- 🍭 支持无障碍访问(持续改进中)
|
||||
- 🍭 支持服务器端渲染
|
||||
- 🌍 支持国际化和语言包定制
|
||||
|
||||
@@ -34,18 +35,14 @@ Vant 是**有赞前端团队**开源的移动端组件库,于 2017 年开源
|
||||
|
||||
请阅读[快速上手](#/zh-CN/quickstart)章节,通过该章节你可以了解到 Vant 的安装方法和基本使用姿势。
|
||||
|
||||
### 贡献代码
|
||||
|
||||
贡献代码请阅读我们的[贡献指南](#/zh-CN/contribution)。
|
||||
|
||||
使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们,当然,我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
|
||||
|
||||
### 浏览器支持
|
||||
|
||||
Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
|
||||
|
||||
Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一致)。
|
||||
|
||||
## 链接
|
||||
|
||||
### 官方生态
|
||||
|
||||
由 Vant 官方团队维护的项目如下:
|
||||
@@ -71,13 +68,37 @@ Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一致
|
||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
|
||||
| [@antmjs/vantui](https://github.com/antmjs/vantui) | 基于 Vant Weapp 开发的多端组件库,同时支持 Taro 和 React |
|
||||
|
||||
### 链接
|
||||
### 其他链接
|
||||
|
||||
- [意见反馈](https://github.com/youzan/vant/issues)
|
||||
- [更新日志](#/zh-CN/changelog)
|
||||
- [码云镜像](https://gitee.com/vant-contrib/vant)
|
||||
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||
|
||||
## 贡献
|
||||
|
||||
### 核心团队
|
||||
|
||||
以下是 Vant 和 Vant Weapp 的核心贡献者们:
|
||||
|
||||
| [](https://github.com/chenjiahan/) | [](https://github.com/cookfront/) | [](https://github.com/w91/) | [](https://github.com/pangxie1991/) | [](https://github.com/rex-zsd/) | [](https://github.com/nemo-shen/) | [](https://github.com/Lindysen/) | [](https://github.com/JakeLaoyu/) |
|
||||
| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
|
||||
| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) |
|
||||
|
||||
### 贡献者们
|
||||
|
||||
感谢以下小伙伴们为 Vant 发展做出的贡献:
|
||||
|
||||
<a href="https://github.com/youzan/vant/graphs/contributors" target="_black">
|
||||
<img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors" style="width: 100%; margin: 16px 0">
|
||||
</a>
|
||||
|
||||
### 贡献指南
|
||||
|
||||
贡献代码请阅读我们的[贡献指南](#/zh-CN/contribution)。
|
||||
|
||||
使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们,当然,我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
|
||||
|
||||
### 开源协议
|
||||
|
||||
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议,请自由地享受和参与开源
|
||||
|
||||
@@ -56,12 +56,21 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
|
||||
</script>
|
||||
```
|
||||
|
||||
#### Free CDN
|
||||
|
||||
You can use Vant through these free CDN services:
|
||||
|
||||
- [jsdelivr](https://www.jsdelivr.com/package/npm/vant)
|
||||
- [cdnjs](https://cdnjs.com/libraries/vant)
|
||||
- [unpkg](https://unpkg.com/)
|
||||
|
||||
Note: Free CDN is generally used for making prototypes or personal projects. It is not recommended to use free CDN in production environment.
|
||||
|
||||
For enterprise developers, we recommend:
|
||||
|
||||
- install with npm, use build tools to bundle it
|
||||
- download the scripts, host it on your own server
|
||||
|
||||
### CLI
|
||||
|
||||
We recommend to use [Vue Cli](https://cli.vuejs.org/) to create a new project.
|
||||
@@ -83,16 +92,67 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to
|
||||
|
||||
## Usage
|
||||
|
||||
### 1. Import on demand
|
||||
### Import on demand in vite projects (recommended)
|
||||
|
||||
Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand.
|
||||
If you are using vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import).
|
||||
|
||||
#### 1. Install Plugin
|
||||
|
||||
```bash
|
||||
npm i vite-plugin-style-import@1.2.0 -D
|
||||
```
|
||||
|
||||
#### 2. Configure Plugin
|
||||
|
||||
Configure the plugin in the `vite.config.js` file:
|
||||
|
||||
```js
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import styleImport from 'vite-plugin-style-import';
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
vue(),
|
||||
styleImport({
|
||||
libs: [
|
||||
{
|
||||
libraryName: 'vant',
|
||||
esModule: true,
|
||||
resolveStyle: (name) => `vant/es/${name}/style/index`,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
#### 3. Import Components
|
||||
|
||||
Then you can import components from Vant:
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue';
|
||||
import { Button } from 'vant';
|
||||
|
||||
const app = createApp();
|
||||
app.use(Button);
|
||||
```
|
||||
|
||||
> Vant supports Tree Shaking by default.
|
||||
|
||||
### Import on demand in non-vite projects (recommended)
|
||||
|
||||
In non-vite projects, use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand.
|
||||
|
||||
#### 1. Install Plugin
|
||||
|
||||
```bash
|
||||
# Install plugin
|
||||
npm i babel-plugin-import -D
|
||||
```
|
||||
|
||||
Set babel config in .babelrc or babel.config.js:
|
||||
#### 2. Configure Plugin
|
||||
|
||||
Set babel config in `.babelrc` or `babel.config.js`:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -109,7 +169,9 @@ Set babel config in .babelrc or babel.config.js:
|
||||
}
|
||||
```
|
||||
|
||||
Then you can import components from vant:
|
||||
#### 3. Import Components
|
||||
|
||||
Then you can import components from Vant:
|
||||
|
||||
```js
|
||||
// Input
|
||||
@@ -122,43 +184,9 @@ import 'vant/es/button/style';
|
||||
|
||||
> If you are using TypeScript,please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead.
|
||||
|
||||
### 2. Vite Plugin
|
||||
### Import all components (not recommended)
|
||||
|
||||
If you are using Vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import).
|
||||
|
||||
```bash
|
||||
npm i vite-plugin-style-import -D
|
||||
```
|
||||
|
||||
```js
|
||||
// vite.config.js
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import styleImport from 'vite-plugin-style-import';
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
vue(),
|
||||
styleImport({
|
||||
libs: [
|
||||
{
|
||||
libraryName: 'vant',
|
||||
esModule: true,
|
||||
resolveStyle: (name) => `vant/es/${name}/style`,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### 3. Manually import
|
||||
|
||||
```js
|
||||
import Button from 'vant/es/button';
|
||||
import 'vant/es/button/style';
|
||||
```
|
||||
|
||||
### 4. Import all components
|
||||
Import all components will **increase the bundle size**, so this is not recommended.
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue';
|
||||
@@ -170,3 +198,13 @@ app.use(Vant);
|
||||
```
|
||||
|
||||
> If you configured babel-plugin-import, you won't be allowed to import all components.
|
||||
|
||||
### Manually import (not recommended)
|
||||
|
||||
```js
|
||||
// import script
|
||||
import Button from 'vant/es/button/index';
|
||||
// import style
|
||||
// if the component does not have a style file, there is no need to import
|
||||
import 'vant/es/button/style/index';
|
||||
```
|
||||
|
||||
@@ -61,30 +61,20 @@ pnpm add vant@3
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 免费 CDN
|
||||
|
||||
你可以通过以下免费 CDN 服务来使用 Vant:
|
||||
|
||||
- [jsdelivr](https://www.jsdelivr.com/package/npm/vant)
|
||||
- [cdnjs](https://cdnjs.com/libraries/vant)
|
||||
- [unpkg](https://unpkg.com/)
|
||||
|
||||
### 通过脚手架安装
|
||||
注意:免费 CDN 一般用于制作原型或个人小型项目,不推荐在企业生产环境中使用免费 CDN。
|
||||
|
||||
在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目并安装 Vant。
|
||||
对于企业开发者,建议使用以下方式:
|
||||
|
||||
```bash
|
||||
# 安装 Vue Cli
|
||||
npm install -g @vue/cli
|
||||
|
||||
# 创建一个项目
|
||||
vue create hello-world
|
||||
|
||||
# 创建完成后,可以通过命令打开图形化界面,如下图所示
|
||||
vue ui
|
||||
```
|
||||
|
||||

|
||||
|
||||
在图形化界面中,点击 `依赖` -> `安装依赖`,然后将 `vant` 添加到依赖中即可。
|
||||
- 通过 npm 引入,并通过构建工具进行打包
|
||||
- 下载对应文件,并托管在你自己的服务器或 CDN 上
|
||||
|
||||
## 示例
|
||||
|
||||
@@ -92,8 +82,9 @@ vue ui
|
||||
|
||||
我们提供了丰富的[示例工程](https://github.com/youzan/vant-demo),通过示例工程你可以了解如下内容:
|
||||
|
||||
- 基于 Vue Cli 和 Vant 搭建应用
|
||||
- 基于 Vite 和 Vant 搭建应用
|
||||
- 基于 Nuxt 和 Vant 搭建应用
|
||||
- 基于 Vue Cli 和 Vant 搭建应用
|
||||
- 配置按需引入组件
|
||||
- 配置基于 Rem 的适配方案
|
||||
- 配置基于 Viewport 的适配方案
|
||||
@@ -102,15 +93,66 @@ vue ui
|
||||
|
||||
## 引入组件
|
||||
|
||||
### 方式一. 通过 babel 插件按需引入组件
|
||||
### 在 vite 项目中按需引入组件(推荐)
|
||||
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件,它会在编译过程中将 import 语句自动转换为按需引入的方式。
|
||||
在 vite 项目中使用 Vant 时,推荐安装 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 插件,它可以自动按需引入组件的样式。
|
||||
|
||||
#### 1. 安装插件
|
||||
|
||||
```bash
|
||||
npm i vite-plugin-style-import@1.2.0 -D
|
||||
```
|
||||
|
||||
#### 2. 配置插件
|
||||
|
||||
安装完成后,在 `vite.config.js` 文件中配置插件:
|
||||
|
||||
```js
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import styleImport from 'vite-plugin-style-import';
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
vue(),
|
||||
styleImport({
|
||||
libs: [
|
||||
{
|
||||
libraryName: 'vant',
|
||||
esModule: true,
|
||||
resolveStyle: (name) => `vant/es/${name}/style/index`,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
#### 3. 引入组件
|
||||
|
||||
完成以上两步,就可以直接使用 Vant 组件了:
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue';
|
||||
import { Button } from 'vant';
|
||||
|
||||
const app = createApp();
|
||||
app.use(Button);
|
||||
```
|
||||
|
||||
> Vant 默认支持通过 Tree Shaking 实现 script 的按需引入。
|
||||
|
||||
### 在非 vite 项目中按需引入组件(推荐)
|
||||
|
||||
在非 vite 的项目中,可以通过 babel 插件来实现按需引入组件。我们需要安装 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件,它会在编译过程中将 import 语句自动转换为按需引入的方式。
|
||||
|
||||
#### 1. 安装插件
|
||||
|
||||
```bash
|
||||
# 安装插件
|
||||
npm i babel-plugin-import -D
|
||||
```
|
||||
|
||||
#### 2. 配置插件
|
||||
|
||||
在.babelrc 或 babel.config.js 中添加配置:
|
||||
|
||||
```json
|
||||
@@ -128,6 +170,8 @@ npm i babel-plugin-import -D
|
||||
}
|
||||
```
|
||||
|
||||
#### 3. 引入组件
|
||||
|
||||
接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为按需引入的形式。
|
||||
|
||||
```js
|
||||
@@ -141,50 +185,9 @@ import 'vant/es/button/style';
|
||||
|
||||
> 如果你在使用 TypeScript,可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。
|
||||
|
||||
### 方式二. 在 Vite 项目中按需引入组件
|
||||
### 导入所有组件(不推荐)
|
||||
|
||||
对于 vite 项目,可以使用 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 实现按需引入, 原理和 `babel-plugin-import` 类似。
|
||||
|
||||
```bash
|
||||
# 安装插件
|
||||
npm i vite-plugin-style-import -D
|
||||
```
|
||||
|
||||
```js
|
||||
// vite.config.js
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import styleImport from 'vite-plugin-style-import';
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
vue(),
|
||||
styleImport({
|
||||
libs: [
|
||||
{
|
||||
libraryName: 'vant',
|
||||
esModule: true,
|
||||
resolveStyle: (name) => `vant/es/${name}/style`,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### 方式三. 手动按需引入组件
|
||||
|
||||
在不使用插件的情况下,可以手动引入需要使用的组件和样式。
|
||||
|
||||
```js
|
||||
// 引入组件
|
||||
import Button from 'vant/es/button';
|
||||
// 引入组件对应的样式,若组件没有样式文件,则无须引入
|
||||
import 'vant/es/button/style';
|
||||
```
|
||||
|
||||
### 方式四. 导入所有组件
|
||||
|
||||
Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法。
|
||||
Vant 支持一次性导入所有组件,引入所有组件会**增加代码包体积**,因此不推荐这种做法。
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue';
|
||||
@@ -195,4 +198,16 @@ const app = createApp();
|
||||
app.use(Vant);
|
||||
```
|
||||
|
||||
> Tips: 配置按需引入后,将不允许直接导入所有组件。
|
||||
> Tips: 配置按需引入插件后,将不允许直接导入所有组件。
|
||||
|
||||
### 手动按需引入组件(不推荐)
|
||||
|
||||
在不使用任何构建插件的情况下,可以手动引入需要使用的组件和样式。
|
||||
|
||||
```js
|
||||
// 引入组件脚本
|
||||
import Button from 'vant/es/button/index';
|
||||
// 引入组件样式
|
||||
// 若组件没有样式文件,则无须引入
|
||||
import 'vant/es/button/style/index';
|
||||
```
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
# useEventListener
|
||||
|
||||
### Intro
|
||||
|
||||
Attaching an event when the component is `mounted` and `activated`, then removing the event when the component is `unmounted` and `deactivated`.
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { useEventListener } from '@vant/use';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
// attach the resize event to window
|
||||
useEventListener('resize', () => {
|
||||
console.log('window resize');
|
||||
});
|
||||
|
||||
// attach the click event to the body element
|
||||
useEventListener(
|
||||
'click',
|
||||
() => {
|
||||
console.log('click body');
|
||||
},
|
||||
{ target: document.body }
|
||||
);
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Type Declarations
|
||||
|
||||
```ts
|
||||
type Options = {
|
||||
target?: EventTarget | Ref<EventTarget>;
|
||||
capture?: boolean;
|
||||
passive?: boolean;
|
||||
};
|
||||
|
||||
function useEventListener(
|
||||
type: string,
|
||||
listener: EventListener,
|
||||
options?: Options
|
||||
): void;
|
||||
```
|
||||
|
||||
### Params
|
||||
|
||||
| Name | Description | Type | Default Value |
|
||||
| -------- | ----------------- | --------------- | ------------- |
|
||||
| type | Event type | _string_ | - |
|
||||
| listener | Callback function | _EventListener_ | - |
|
||||
| options | Options | _Options_ | - |
|
||||
|
||||
### Options
|
||||
|
||||
| Name | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| target | Target element | _EventTarget \| Ref\<EventTarget>_ | `window` |
|
||||
| capture | Whether to enable capture | _boolean_ | `false` |
|
||||
| passive | if true, indicates that the listener will never call `preventDefault()` | _boolean_ | `false` |
|
||||
@@ -32,6 +32,8 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### 类型定义
|
||||
|
||||
```ts
|
||||
@@ -48,15 +50,13 @@ function useEventListener(
|
||||
): void;
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### 参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ------------------------ | --------------- | ------ |
|
||||
| type | 监听的事件类型 | _string_ | - |
|
||||
| listener | 点击外部时触发的回调函数 | _EventListener_ | - |
|
||||
| options | 可选的配置项 | _Options_ | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | -------------- | --------------- | ------ |
|
||||
| type | 监听的事件类型 | _string_ | - |
|
||||
| listener | 事件回调函数 | _EventListener_ | - |
|
||||
| options | 可选的配置项 | _Options_ | - |
|
||||
|
||||
### Options
|
||||
|
||||
|
||||
@@ -13,16 +13,18 @@
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRect } from '@vant/use';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const root = ref();
|
||||
const rect = useRect(root);
|
||||
|
||||
console.log(rect); // -> 元素的大小及其相对于视口的位置
|
||||
|
||||
onMounted(()=>{
|
||||
const rect = useRect(root);
|
||||
console.log(rect); // -> 元素的大小及其相对于视口的位置
|
||||
})
|
||||
|
||||
return { root };
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user