chore: move vant to packages folder (#9384)

2021-09-03 14:32:16 +08:00
parent 5a75326b65
commit c21324b256
1022 changed files with 150 additions and 164 deletions
@@ -0,0 +1,145 @@
+# Advanced Usage
+
+### Intro
+
+Through this chapter, you can learn about some advanced usages of Vant.
+
+## Component Usage
+
+### Component Registration
+
+Vant supports multiple ways to register components:
+
+#### Global Registration
+
+```js
+import { Button } from 'vant';
+import { createApp } from 'vue';
+
+const app = createApp();
+
+// Method 1. via app.use
+app.use(Button);
+
+// Method 2. Register via app.component
+app.component(Button.name, Button);
+```
+
+#### Local Registration
+
+```js
+import { Button } from 'vant';
+
+export default {
+  components: {
+    [Button.name]: Button,
+  },
+};
+```
+
+> For more information, please refer to [Vue.js - Component Registration](https://v3.vuejs.org/guide/component-registration.html#component-registration)。
+
+#### \<script setup\>
+
+Vant components can be used directly in `<script setup>` without component registration.
+
+```xml
+<script setup>
+  import { Button } from 'vant';
+</script>
+
+<template>
+  <Button />
+</template>
+```
+
+#### JSX/TSX
+
+Vant components can be used directly in JSX and TSX without component registration.
+
+```jsx
+import { Button } from 'vant';
+
+export default {
+  render() {
+    return <Button />;
+  },
+};
+```
+
+## Browser adaptation
+
+### Viewport Units
+
+Vant uses `px` unit by default，you can use tools such as [postcss--px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) to transform `px` unit to viewport units (vw, vh, vmin, vmax).
+
+#### PostCSS Config
+
+PostCSS config example:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-px-to-viewport': {
+      viewportWidth: 375,
+    },
+  },
+};
+```
+
+### Rem Unit
+
+You can use tools such as `postcss-pxtorem` to transform `px` unit to `rem` unit.
+
+- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)
+- [lib-flexible](https://github.com/amfe/lib-flexible)
+
+#### PostCSS Config
+
+PostCSS config example:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-pxtorem': {
+      rootValue: 37.5,
+      propList: ['*'],
+    },
+  },
+};
+```
+
+### Custom rootValue
+
+If the size of the design draft is 750 or other sizes, you can adjust the `rootValue` to:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    // postcss-pxtorem version >= 5.0.0
+    'postcss-pxtorem': {
+      rootValue({ file }) {
+        return file.indexOf('vant') !== -1 ? 37.5 : 75;
+      },
+      propList: ['*'],
+    },
+  },
+};
+```
+
+### Adapt to PC Browsers
+
+Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.
+
+```bash
+# Install
+npm i @vant/touch-emulator -S
+```
+
+```js
+// Just import this module, then Vant works in PC browser
+import '@vant/touch-emulator';
+```
@@ -0,0 +1,226 @@
+# 进阶用法
+
+### 介绍
+
+通过本章节你可以了解到 Vant 的一些进阶用法，比如组件插槽用法、多种浏览器适配方式。
+
+## 组件用法
+
+### 组件注册
+
+Vant 支持多种组件注册方式，请根据实际业务需要进行选择。
+
+#### 全局注册
+
+全局注册后，你可以在 app 下的任意子组件中使用注册的 Vant 组件。
+
+```js
+import { Button } from 'vant';
+import { createApp } from 'vue';
+
+const app = createApp();
+
+// 方式一. 通过 app.use 注册
+// 注册完成后，在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件
+app.use(Button);
+
+// 方式二. 通过 app.component 注册
+// 注册完成后，在模板中通过 <van-button> 标签来使用按钮组件
+app.component(Button.name, Button);
+```
+
+#### 局部注册
+
+局部注册后，你可以在当前组件中使用注册的 Vant 组件。
+
+```js
+import { Button } from 'vant';
+
+export default {
+  components: {
+    [Button.name]: Button,
+  },
+};
+```
+
+> 对于组件注册更详细的介绍，请参考 [Vue 官方文档 - 组件注册](https://v3.cn.vuejs.org/guide/component-registration.html#%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%86%8C)。
+
+#### \<script setup\>
+
+在 `<script setup>` 中可以直接使用 Vant 组件，不需要进行组件注册。
+
+```xml
+<script setup>
+  import { Button } from 'vant';
+</script>
+
+<template>
+  <Button />
+</template>
+```
+
+#### JSX/TSX
+
+在 JSX 和 TSX 中可以直接使用 Vant 组件，不需要进行组件注册。
+
+```jsx
+import { Button } from 'vant';
+
+export default {
+  render() {
+    return <Button />;
+  },
+};
+```
+
+### 组件插槽
+
+Vant 提供了丰富的组件插槽，通过插槽可以对组件的某一部分进行个性化定制。如果你对 Vue 的插槽不太熟悉，可以阅读 Vue 官方文档中的[插槽章节](https://v3.cn.vuejs.org/guide/component-slots.html)。下面是通过插槽来定制 Checkbox 图标的示例：
+
+```html
+<van-checkbox v-model="checked">
+  <!-- 使用组件提供的 icon 插槽 -->
+  <!-- 将默认图标替换为个性化图片 -->
+  <template #icon="props">
+    <img :src="props.checked ? activeIcon : inactiveIcon" />
+  </template>
+</van-checkbox>
+```
+
+```js
+export default {
+  data() {
+    return {
+      checked: true,
+      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
+    };
+  },
+};
+```
+
+### 组件实例方法
+
+Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 [ref](https://v3.cn.vuejs.org/guide/component-template-refs.html) 来注册组件引用信息，引用信息将会注册在父组件的`$refs`对象上。注册完成后，我们可以通过`this.$refs.xxx`访问到对应的组件实例，并调用上面的实例方法。
+
+```html
+<!-- 通过 ref 属性将组件绑定到 this.$refs.checkbox 上 -->
+<van-checkbox v-model="checked" ref="checkbox"> 复选框 </van-checkbox>
+```
+
+```js
+export default {
+  data() {
+    return {
+      checked: false,
+    };
+  },
+  // 注意：组件挂载后才能访问到 ref 对象
+  mounted() {
+    this.$refs.checkbox.toggle();
+  },
+};
+```
+
+## 浏览器适配
+
+### Viewport 布局
+
+Vant 默认使用 `px` 作为样式单位，如果需要使用 `viewport` 单位 (vw, vh, vmin, vmax)，推荐使用 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 进行转换。
+
+[postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。
+
+#### PostCSS PostCSS 示例配置
+
+下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-px-to-viewport': {
+      viewportWidth: 375,
+    },
+  },
+};
+```
+
+> Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。
+
+### Rem 布局适配
+
+如果需要使用 `rem` 单位进行适配，推荐使用以下两个工具：
+
+- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
+- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值
+
+#### PostCSS 示例配置
+
+下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-pxtorem': {
+      rootValue: 37.5,
+      propList: ['*'],
+    },
+  },
+};
+```
+
+#### 其他设计稿尺寸
+
+如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 `rootValue` 配置调整为:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    // postcss-pxtorem 插件的版本需要 >= 5.0.0
+    'postcss-pxtorem': {
+      rootValue({ file }) {
+        return file.indexOf('vant') !== -1 ? 37.5 : 75;
+      },
+      propList: ['*'],
+    },
+  },
+};
+```
+
+### 桌面端适配
+
+Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 `touch` 事件，没有监听桌面端的 `mouse` 事件。
+
+如果你需要在桌面端使用 Vant，可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator)，这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件，使得组件能够在桌面端使用。
+
+```bash
+# 安装模块
+npm i @vant/touch-emulator -S
+```
+
+```js
+// 引入模块后自动生效
+import '@vant/touch-emulator';
+```
+
+### 底部安全区适配
+
+iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行安全区适配。Vant 中部分组件提供了 `safe-area-inset-top` 或 `safe-area-inset-bottom` 属性，设置该属性后，即可在对应的机型上开启适配，如下示例：
+
+```html
+<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
+/>
+
+<!-- 开启顶部安全区适配 -->
+<van-nav-bar safe-area-inset-top />
+
+<!-- 开启底部安全区适配 -->
+<van-number-keyboard safe-area-inset-bottom />
+```
+
+<img src="https://img.yzcdn.cn/vant/safearea.png">
@@ -0,0 +1,732 @@
+# Changelog
+
+### Tips
+
+The current document is the changelog of Vant 3. If you want to view the changelog of Vant 2, please visit [Vant 2 Changelog](https://youzan.github.io/vant/#/en-US/changelog).
+
+### Intro
+
+Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
+
+**Release Schedule**
+
+- Patch version：released weekly, including features and bug fixes.
+- Minor version：released every one to two months, including backwards compatible features.
+- Major version：including breaking changes and new features.
+
+## Details
+
+### [v3.2.2](https://github.com/youzan/vant/compare/v3.2.1...v3.2.2)
+
+`2021-09-02`
+
+**Feature**
+
+- Field: add id prop [#9347](https://github.com/youzan/vant/issues/9347)
+- Field: add `van-field__error` class when error [#9327](https://github.com/youzan/vant/issues/9327)
+- Field: using `label` tag for label [#9346](https://github.com/youzan/vant/issues/9346)
+- Popover: add show-arrow prop [#9372](https://github.com/youzan/vant/issues/9372)
+- Progress: add transition effect [ba4ff5](https://github.com/youzan/vant/commit/ba4ff58af6ccf67e255bf43ef905677dc64596a3)
+- Search: add id prop [#9349](https://github.com/youzan/vant/issues/9349)
+- Tab: add show-zero-badge prop [#9343](https://github.com/youzan/vant/issues/9343)
+- Locale: simplify locale configs [#9329](https://github.com/youzan/vant/issues/9329)
+
+**Bug Fixes**
+
+- AddressEdit: remove unused finish button [#9364](https://github.com/youzan/vant/issues/9364)
+- Progress: fix render error when use v-show and improve performance [841e09](https://github.com/youzan/vant/commit/841e09d0529961058ecb63ed26f018cf3a66a3bf)
+- Progress: percentage missing default value [8ac597](https://github.com/youzan/vant/commit/8ac597dc3d2316d34f866dcfd7e1646c695da180)
+- fix animation css vars not work [#9337](https://github.com/youzan/vant/issues/9337)
+
+### [v3.2.1](https://github.com/youzan/vant/compare/v3.2.0...v3.2.1)
+
+`2021-08-22`
+
+**Feature**
+
+- Circle: add start-position prop [#9305](https://github.com/youzan/vant/issues/9305)
+- Slider: add reverse prop [#9308](https://github.com/youzan/vant/issues/9308)
+- NumberKeyboard: add van-number-keyboard-key-background-color css var [#9303](https://github.com/youzan/vant/issues/9303)
+- PasswordInput: add password-input-text-color css var [#9304](https://github.com/youzan/vant/issues/9304)
+
+**Bug Fixes**
+
+- Calendar: title is undefined in month-show event [#9275](https://github.com/youzan/vant/issues/9275)
+- Dialog: fix beforeClose repeat trigger [#9283](https://github.com/youzan/vant/issues/9283) [#9291](https://github.com/youzan/vant/issues/9291)
+- Field: should export FieldInstance type [#9254](https://github.com/youzan/vant/issues/9254)
+- Rate: convert count type [#9307](https://github.com/youzan/vant/issues/9307)
+- TreeSelect: fix negative css vars [#9306](https://github.com/youzan/vant/issues/9306)
+
+### [v3.2.0](https://github.com/youzan/vant/compare/v3.1.5...v3.2.0)
+
+`2021-08-12`
+
+**Feature**
+
+- Form: add useCustomFieldValue api [#9200](https://github.com/youzan/vant/issues/9200)
+- Button: loading-size prop support number type [#9177](https://github.com/youzan/vant/issues/9177)
+- Style: add van-safe-area-bottom util class [#9205](https://github.com/youzan/vant/issues/9205)
+
+**Types**
+
+- AddressEdit: add AddressEditInstance type [#9197](https://github.com/youzan/vant/issues/9197)
+- Area: add AreaInstance type [#9195](https://github.com/youzan/vant/issues/9195)
+- Calendar: add CalendarInstance type [#9165](https://github.com/youzan/vant/issues/9165)
+- Checkbox: add CheckboxInstance type [#9140](https://github.com/youzan/vant/issues/9140)
+- CheckboxGroup: add CheckboxGroupInstance type [#9142](https://github.com/youzan/vant/issues/9142)
+- CollapseItem: add CollapseItemInstance type [#9194](https://github.com/youzan/vant/issues/9194)
+- CountDown: add CountDownInstance type [#9153](https://github.com/youzan/vant/issues/9153)
+- DatetimePicker: add DatetimePickerInstance type [#9208](https://github.com/youzan/vant/issues/9208)
+- DropdownItem: add DropdownItemInstance type [#9214](https://github.com/youzan/vant/issues/9214)
+- Field: add FieldInstance type [#9166](https://github.com/youzan/vant/issues/9166)
+- Form: add FormInstance type [#9139](https://github.com/youzan/vant/issues/9139)
+- ImagePreview: add ImagePreviewInstance type [#9216](https://github.com/youzan/vant/issues/9216)
+- IndexBar: add IndexBarInstance type [#9246](https://github.com/youzan/vant/issues/9246)
+- List: add ListInstance type [#9159](https://github.com/youzan/vant/issues/9159)
+- NoticeBar: add NoticeBarInstance type [#9245](https://github.com/youzan/vant/issues/9245)
+- Picker: add PickerInstance type [#9183](https://github.com/youzan/vant/issues/9183)
+- Progress: add ProgressInstance type [#9247](https://github.com/youzan/vant/issues/9247)
+- Search: add SearchInstance type [#9181](https://github.com/youzan/vant/issues/9181)
+- Swipe: add SwipeInstance type [#9158](https://github.com/youzan/vant/issues/9158)
+- SwipeCell: add SwipeCellInstance type [#9179](https://github.com/youzan/vant/issues/9179)
+- Tabs: add TabsInstance type [#9174](https://github.com/youzan/vant/issues/9174)
+- Uploader: add UploaderInstance type [#9164](https://github.com/youzan/vant/issues/9164)
+
+**Bug Fixes**
+
+- Badge: minus x offset not work [#9199](https://github.com/youzan/vant/issues/9199)
+- Image: fix border radius value [#9163](https://github.com/youzan/vant/issues/9163)
+- Field: textarea scroll to top after resizing [#9206](https://github.com/youzan/vant/issues/9206)
+- Notify: default option is overridden [#9138](https://github.com/youzan/vant/issues/9138)
+- Rate: should enable flex wrap [#9192](https://github.com/youzan/vant/issues/9192)
+- Tabs: remove invalid head padding for card type [#9168](https://github.com/youzan/vant/issues/9168)
+- Toast: failed to update message [#9196](https://github.com/youzan/vant/issues/9196)
+
+### [v3.1.5](https://github.com/youzan/vant/compare/v3.1.4...v3.1.5)
+
+`2021-07-26`
+
+**Feature**
+
+- AddressEdit: add address-edit-button-font-size var [#9113](https://github.com/youzan/vant/issues/9113)
+- Icon: add shield-o icon [#9082](https://github.com/youzan/vant/issues/9082)
+- Locale: add Russian language [#9088](https://github.com/youzan/vant/issues/9088)
+- Toast: improve unclickable cursor [#9116](https://github.com/youzan/vant/issues/9116)
+- Uploader: add click-upload event [#9119](https://github.com/youzan/vant/issues/9119)
+- Uploader: add readonly prop [#9118](https://github.com/youzan/vant/issues/9118)
+
+**Bug Fixes**
+
+- Icon: fix invitation typo [#9096](https://github.com/youzan/vant/issues/9096)
+- NumberKeyboard: should not emit close event when click away [#9108](https://github.com/youzan/vant/issues/9108)
+- Search: fix incorrect left icon color [#9100](https://github.com/youzan/vant/issues/9100)
+- Tabbar: fix tabbar-item-icon-margin-bottom var name [#9101](https://github.com/youzan/vant/issues/9101)
+
+### [v3.1.4](https://github.com/youzan/vant/compare/v3.1.3...v3.1.4)
+
+`2021-07-19`
+
+**Feature**
+
+- ActionSheet: add before-close prop [#9068](https://github.com/youzan/vant/issues/9068)
+- Cascader: add option slot [#9036](https://github.com/youzan/vant/issues/9036)
+- Cascader: improve option cursor [#9032](https://github.com/youzan/vant/issues/9032)
+- Popup: add before-close prop [#9067](https://github.com/youzan/vant/issues/9067)
+- ShareSheet: add before-close prop [#9068](https://github.com/youzan/vant/issues/9068)
+- Tabs: add click-tab event [#9037](https://github.com/youzan/vant/issues/9037)
+
+**Bug Fixes**
+
+- Field: required mark position [#9035](https://github.com/youzan/vant/issues/9035)
+- List: should emit load event when parent tab is activated [#9022](https://github.com/youzan/vant/issues/9022)
+- Popup: missing open、close event in some cases [#9065](https://github.com/youzan/vant/issues/9065)
+
+### [v3.1.3](https://github.com/youzan/vant/compare/v3.1.2...v3.1.3)
+
+`2021-07-11`
+
+**Feature**
+
+- Calendar: add click-subtitle event [#8981](https://github.com/youzan/vant/issues/8981)
+- Calendar: add subtitle slot [#8980](https://github.com/youzan/vant/issues/8980)
+- ConfigProvider: add icon-prefix prop [#8986](https://github.com/youzan/vant/issues/8986)
+- Slider: add drag event param [#8990](https://github.com/youzan/vant/issues/8990)
+- Slider: add left-button、right-button slot [#8989](https://github.com/youzan/vant/issues/8989)
+- touch-emulator: support data-no-touch-simulate [#8984](https://github.com/youzan/vant/issues/8984)
+
+**Bug Fixes**
+
+- Step: fix z-index issue [#9003](https://github.com/youzan/vant/issues/9003)
+
+### [v3.1.2](https://github.com/youzan/vant/compare/v3.1.1...v3.1.2)
+
+`2021-07-03`
+
+**Feature**
+
+- Area: add toolbar、confirm、cancel slots [#8969](https://github.com/youzan/vant/issues/8969)
+- Calendar: simplify placeholder dom [#8955](https://github.com/youzan/vant/issues/8955)
+- Cascader: add disabled option [#8952](https://github.com/youzan/vant/issues/8952)
+- ConfigProvider: add tag prop [#8967](https://github.com/youzan/vant/issues/8967)
+- Picker: add toolbar slot [#8968](https://github.com/youzan/vant/issues/8968)
+- Picker: allow option text to be number type [#8951](https://github.com/youzan/vant/issues/8951)
+- Picker: add picker-option-padding CSS var [#8947](https://github.com/youzan/vant/issues/8947)
+
+**Bug Fixes**
+
+- Toast: fix word break [#8965](https://github.com/youzan/vant/issues/8965)
+
+### [v3.1.1](https://github.com/youzan/vant/compare/v3.1.0...v3.1.1)
+
+`2021-06-27`
+
+**Feature**
+
+- Cell: add value slot [#8933](https://github.com/youzan/vant/issues/8933)
+- CollapseItem: add label slot [#8934](https://github.com/youzan/vant/issues/8934)
+- NoticeBar: add reset method [#8917](https://github.com/youzan/vant/issues/8917)
+- Tabs: add nav-bottom slot [#8915](https://github.com/youzan/vant/issues/8915)
+
+### [v3.1.0](https://github.com/youzan/vant/compare/v3.1.0-beta.0...v3.1.0)
+
+`2021-06-22`
+
+**New Component**
+
+- add [ConfigProvider](#/en-US/config-provider) Component [#8854](https://github.com/youzan/vant/issues/8854)
+
+**Feature**
+
+- all components support CSS Variables [aef257](https://github.com/youzan/vant/commit/aef2579a95da7c8b528ba7062b227fea698a0487) [fe1cba](https://github.com/youzan/vant/commit/fe1cba97b796eba7e9b5dca0ce4ab0d1de95715c)
+- add more CSS Variables [#8861](https://github.com/youzan/vant/issues/8861)
+- Checkbox: icon slot add disabled param [#8839](https://github.com/youzan/vant/issues/8839)
+- Cascader: add className option [#8882](https://github.com/youzan/vant/issues/8882)
+- Cascader: add color option [#8883](https://github.com/youzan/vant/issues/8883)
+- CellGroup: add inset prop [#8885](https://github.com/youzan/vant/issues/8885)
+- GridItem: add reverse prop [#8878](https://github.com/youzan/vant/issues/8878)
+- IndexBar: add teleport prop [#8820](https://github.com/youzan/vant/issues/8820)
+
+**Bug Fixes**
+
+- Dialog: allow message function to return html [#8872](https://github.com/youzan/vant/issues/8872)
+- Slider: format v-model with step correctly [#8893](https://github.com/youzan/vant/issues/8893)
+
+### [v3.0.18](https://github.com/youzan/vant/compare/v3.0.17...v3.0.18)
+
+`2021-06-03`
+
+**Feature**
+
+- Button: add icon slot [#8783](https://github.com/youzan/vant/issues/8783)
+- CouponList: add list-footer、disabled-list-footer slot [#8801](https://github.com/youzan/vant/issues/8801)
+- List: remove unused Less var @list-icon-margin-right [#8759](https://github.com/youzan/vant/issues/8759)
+- Locale: add French translations [#8795](https://github.com/youzan/vant/issues/8795)
+- Popup: add icon-prefix prop [#8793](https://github.com/youzan/vant/issues/8793)
+- Popup: add overlay-content slot [#8794](https://github.com/youzan/vant/issues/8794)
+
+**Bug Fixes**
+
+- Collapse: fix safari rendering issues [#8788](https://github.com/youzan/vant/issues/8788)
+- NoticeBar: failed to play when inside a re-opened popup [#8789](https://github.com/youzan/vant/issues/8789)
+- @vant/touch-emulator: add SSR support [#8767](https://github.com/youzan/vant/issues/8767)
+
+### [v3.0.17](https://github.com/youzan/vant/compare/v3.0.16...v3.0.17)
+
+`2021-05-23`
+
+**Feature**
+
+- ActionBarIcon: add icon-prefix prop [#8748](https://github.com/youzan/vant/issues/8748)
+- Calendar: add show-range-prompt prop [#8739](https://github.com/youzan/vant/issues/8739)
+- Calendar: add top-info、bottom-info slot [#8716](https://github.com/youzan/vant/issues/8716)
+- GridItem: add icon-color prop [#8753](https://github.com/youzan/vant/issues/8753)
+- NoticeBar: increase default speed to 60 [#8694](https://github.com/youzan/vant/issues/8694)
+- Popover: add icon-prefix prop [#8703](https://github.com/youzan/vant/issues/8703)
+- Toast: add transition [#8743](https://github.com/youzan/vant/issues/8743)
+- Uploader: max-size prop can be a function [#8744](https://github.com/youzan/vant/issues/8744)
+
+**Bug Fixes**
+
+- Button: add onClick event shim for tsx [#8665](https://github.com/youzan/vant/issues/8665)
+- Calendar: initial date incorrect [#8696](https://github.com/youzan/vant/issues/8696)
+- DatetimePicker: vant3 fixed incorrect value when dynamic set min/max [#8658](https://github.com/youzan/vant/issues/8658)
+- List: skip check when inside an inactive tab [#8741](https://github.com/youzan/vant/issues/8741)
+- Tabs: fix add scroll event target [#8734](https://github.com/youzan/vant/issues/8734)
+- Toast: should reset duration when type or message changed [#8742](https://github.com/youzan/vant/issues/8742)
+
+### [v3.0.16](https://github.com/youzan/vant/compare/v3.0.15...v3.0.16)
+
+`2021-05-03`
+
+**Feature**
+
+- Swipe: indicator slot add active param [#8645](https://github.com/youzan/vant/issues/8645)
+- Cascader: add @cascader-header-padding less var [#8626](https://github.com/youzan/vant/issues/8626)
+- Steps: add icon-prefix prop [#8631](https://github.com/youzan/vant/issues/8631)
+- export more types [#8652](https://github.com/youzan/vant/issues/8652)
+
+**Bug Fixes**
+
+- Stepper: fix blur event trigger timing [#8620](https://github.com/youzan/vant/issues/8620)
+- SubmitBar: @submit-bar-price-font-size not work [#8639](https://github.com/youzan/vant/issues/8639)
+- Swipe: re-initialize when popup reopened [#8643](https://github.com/youzan/vant/issues/8643)
+- Tabs: setLine when popup reopened [#8642](https://github.com/youzan/vant/issues/8642)
+
+### [v3.0.15](https://github.com/youzan/vant/compare/v2.12.14-test...v3.0.15)
+
+`2021-04-25`
+
+**Feature**
+
+- Cascader: add click-tab event [#8606](https://github.com/youzan/vant/issues/8606)
+
+**Bug Fixes**
+
+- Tab: failed to render during SSR [#8603](https://github.com/youzan/vant/issues/8603)
+- Rate: select half star correctly when clicked [#8580](https://github.com/youzan/vant/issues/8580)
+- Tag: incorrect border color when using plain [#8601](https://github.com/youzan/vant/issues/8601)
+
+### [v3.0.14](https://github.com/youzan/vant/compare/v3.0.13...v3.0.14)
+
+`2021-04-18`
+
+**Feature**
+
+- Badge: offset prop support custom unit [35edb7](https://github.com/youzan/vant/commit/35edb72b5cd519d4e75443acaa0a63db16695d2d)
+- Rate: support decimal modelValue when readonly [#8528](https://github.com/youzan/vant/issues/8528)
+
+**Bug Fixes**
+
+- ContactList: fix nodes type [0b764b](https://github.com/youzan/vant/commit/0b764b63470b09f5654d267c8d07a20bc2d31536)
+
+### [v3.0.13](https://github.com/youzan/vant/compare/v3.0.12...v3.0.13)
+
+`2021-04-11`
+
+**Feature**
+
+- ActionBar: add @action-bar-icon-background-color less var [#8474](https://github.com/youzan/vant/issues/8474)
+- Popover: bump @popperjs/core@2.9.2 [0d1323](https://github.com/youzan/vant/commit/0d132337d5d263957a7993d60e47a18efec7313e)
+- perf: reduce bundle size [ba3e6d](https://github.com/youzan/vant/commit/ba3e6d56a0bc7ae3acc25b1380f054da3b9b020f)
+
+**Types**
+
+- Popup: fix PopupCloseIconPosition type [15d901](https://github.com/youzan/vant/commit/15d901ad6aace3826881cb3c6e0499f75b71df80)
+- Search: missing some props in jsx [#8485](https://github.com/youzan/vant/issues/8485)
+- Stepper: improve theme prop typing [#8489](https://github.com/youzan/vant/issues/8489)
+
+**Bug Fixes**
+
+- Field: autofocus prop not work [#8488](https://github.com/youzan/vant/issues/8488)
+
+### [v3.0.12](https://github.com/youzan/vant/compare/v3.0.11...v3.0.12)
+
+`2021-04-05`
+
+**Feature**
+
+- CollapseItem: add readonly prop [#8445](https://github.com/youzan/vant/issues/8445)
+- Field: add clear-icon prop [#8438](https://github.com/youzan/vant/issues/8438)
+- Search: add clear-icon prop [#8439](https://github.com/youzan/vant/issues/8439)
+- Search: add error-message prop [#8442](https://github.com/youzan/vant/issues/8442)
+- Search: add formatter、format-trigger prop [#8441](https://github.com/youzan/vant/issues/8441)
+
+**Bug Fixes**
+
+- fix incorrect tag prompts under Webstorm [#8450](https://github.com/youzan/vant/issues/8450)
+
+### [v3.0.11](https://github.com/youzan/vant/compare/v3.0.10...v3.0.11)
+
+`2021-03-30`
+
+**Feature**
+
+- Cascader: add swipeable prop [#8383](https://github.com/youzan/vant/issues/8383)
+- Dialog: add footer slot [#8382](https://github.com/youzan/vant/issues/8382)
+- Dialog: allow to render JSX message [#8420](https://github.com/youzan/vant/issues/8420)
+- Image: add icon-size prop [#8395](https://github.com/youzan/vant/issues/8395)
+- Row: add wrap prop [#8393](https://github.com/youzan/vant/issues/8393)
+
+**Bug Fixes**
+
+- Field: should not reset validation after blurred [#8409](https://github.com/youzan/vant/issues/8409)
+- Sticky: Element not exist during SSR [#8407](https://github.com/youzan/vant/issues/8407)
+- Tabs: incorrect horizontal slip judgment [#8388](https://github.com/youzan/vant/issues/8388)
+
+### [v3.0.10](https://github.com/youzan/vant/compare/v3.0.9...v3.0.10)
+
+`2021-03-19`
+
+**Feature**
+
+- ActionSheet: add cancel slot [#8333](https://github.com/youzan/vant/issues/8333)
+- Badge: add show-zero prop [#8381](https://github.com/youzan/vant/issues/8381)
+- Cascader: add close-icon prop [#8334](https://github.com/youzan/vant/issues/8334)
+- Popover: add close-on-click-overlay prop [#8351](https://github.com/youzan/vant/issues/8351)
+- Popover: add duration prop [#8355](https://github.com/youzan/vant/issues/8355)
+- Popover: add overlay-class prop [#8353](https://github.com/youzan/vant/issues/8353)
+- Popover: add overlay-style prop [#8354](https://github.com/youzan/vant/issues/8354)
+- ShareSheet: add cancel slot [#8335](https://github.com/youzan/vant/issues/8335)
+- Sticky: add change event [#8374](https://github.com/youzan/vant/issues/8374)
+- Tag: close event param [#8337](https://github.com/youzan/vant/issues/8337)
+- Toast: add iconSize option [#8338](https://github.com/youzan/vant/issues/8338)
+
+**Feature**
+
+- ContactList: add @contact-list-item-radio-icon-color var [#8322](https://github.com/youzan/vant/issues/8322)
+- Coupon: add @coupon-corner-checkbox-icon-color var [#8323](https://github.com/youzan/vant/issues/8323)
+- List: add @list-loading-icon-size less var [#8365](https://github.com/youzan/vant/issues/8365)
+- Loading: add @button-loading-icon-size less var [465bf0](https://github.com/youzan/vant/commit/465bf07095c58e8292b23ef0c64be1550aa9d430)
+- PullRefresh: add @pull-refresh-loading-icon-size less var [#8366](https://github.com/youzan/vant/issues/8366)
+
+**Bug Fixes**
+
+- Popover: close-on-click-outside not work [#8352](https://github.com/youzan/vant/issues/8352)
+- Swipe: incorrect item width after scaled [#8330](https://github.com/youzan/vant/issues/8330)
+
+### [v3.0.9](https://github.com/youzan/vant/compare/v3.0.8...v3.0.9)
+
+`2021-03-08`
+
+**Feature**
+
+- AddressList: add tag slots [#8292](https://github.com/youzan/vant/issues/8292)
+
+**Bug Fixes**
+
+- fix custom theme not work [#8301](https://github.com/youzan/vant/issues/8301)
+- fix failed to install component in TypeScript [#8308](https://github.com/youzan/vant/issues/8308)
+
+### [v3.0.8](https://github.com/youzan/vant/compare/v3.0.7...v3.0.8)
+
+`2021-03-07`
+
+**Types**
+
+- Build types from source code [#8264](https://github.com/youzan/vant/issues/8264)
+
+**Feature**
+
+- ImagePreview: add overlay-style prop [#8276](https://github.com/youzan/vant/issues/8276)
+- ImagePreview: add transition prop [#8275](https://github.com/youzan/vant/issues/8275)
+- Locale: add th-TH lang [#8297](https://github.com/youzan/vant/issues/8297)
+- PullRefresh: add pull-distance prop [#8280](https://github.com/youzan/vant/issues/8280)
+- Button: add some less vars [#8281](https://github.com/youzan/vant/issues/8281)
+
+**Bug Fixes**
+
+- ImagePreview: add test cases [#8282](https://github.com/youzan/vant/issues/8282)
+- ActionSheet: should not reopen when closed [#8272](https://github.com/youzan/vant/issues/8272)
+- Stepper: incorrect text color in iOS14 when disabled [#8277](https://github.com/youzan/vant/issues/8277)
+- Swipe: should render dynamic swipe item correctly [#8288](https://github.com/youzan/vant/issues/8288)
+
+### [v3.0.7](https://github.com/youzan/vant/compare/v3.0.6...v3.0.7)
+
+`2021-02-28`
+
+**Feature**
+
+- Notify: add lockScroll option [#8168](https://github.com/youzan/vant/issues/8168)
+- Popup: click-overlay event add `Event` param [#8107](https://github.com/youzan/vant/issues/8107)
+- ShareSheet: add overlay-style prop [#8225](https://github.com/youzan/vant/issues/8225)
+- ShareSheet: add overlay-class prop [#8225](https://github.com/youzan/vant/issues/8225)
+- Step: add finish-icon slot [#8241](https://github.com/youzan/vant/issues/8241)
+- Steps: add finish-icon prop [#8103](https://github.com/youzan/vant/issues/8103)
+- Uploader: add @uploader-mask-text-color var [#8064](https://github.com/youzan/vant/issues/8064)
+
+**perf**
+
+- adjust browserslist to fit Vue 3 [#8227](https://github.com/youzan/vant/issues/8227)
+- disable enableObjectSlots to reduce bundle size [#8226](https://github.com/youzan/vant/issues/8226)
+
+**Bug Fixes**
+
+- ActionSheet: fix safe-area-inset-bottom prop not work [#8085](https://github.com/youzan/vant/issues/8085)
+- DateTimePicker: fix incorrect initial value [#8193](https://github.com/youzan/vant/issues/8193)
+- Form: may scroll to incorrect field after submitted [#8159](https://github.com/youzan/vant/issues/8159)
+- ImagePreview: fix incorrect image display during the second call [#8060](https://github.com/youzan/vant/issues/8060)
+- IndexBar: failed to render active anchor when inited [#8164](https://github.com/youzan/vant/issues/8164)
+- Popup: should watch lockScroll [#8169](https://github.com/youzan/vant/issues/8169)
+- Swipe: active may outrange when initialize [#8061](https://github.com/youzan/vant/issues/8061)
+- SwipeCell: incorrect position param when clicking outside [#8108](https://github.com/youzan/vant/issues/8108)
+- Tabbar: incorrect active tab when name is zero [#8125](https://github.com/youzan/vant/issues/8125)
+- Tabs: incorrect active tab when active prop is zero [#8074](https://github.com/youzan/vant/issues/8074)
+- Toast: ssr error [#8214](https://github.com/youzan/vant/issues/8214)
+
+### [v3.0.6](https://github.com/youzan/vant/compare/v3.0.5...v3.0.6)
+
+`2021-01-31`
+
+**Feature**
+
+- Area: support more than 6-digit area code [#8001](https://github.com/youzan/vant/issues/8001)
+- Form: adjust show-error default value to false [#8016](https://github.com/youzan/vant/issues/8016)
+- Form: allow validator to return message [#8052](https://github.com/youzan/vant/issues/8052)
+- NumberKeyboard: add blur-on-close prop [#8033](https://github.com/youzan/vant/issues/8033)
+- Popover: add click-overlay event [#8050](https://github.com/youzan/vant/issues/8050)
+- Popover: support config action color [#8049](https://github.com/youzan/vant/issues/8049)
+- Sticky: add position、offset-bottom prop [#7979](https://github.com/youzan/vant/issues/7979)
+
+**Bug Fixes**
+
+- Button: should not submit form when loading [#8018](https://github.com/youzan/vant/issues/8018)
+- Calendar: should expose scrollToDate method [#7983](https://github.com/youzan/vant/issues/7983)
+- Empty: linearGradient id conflict [#8013](https://github.com/youzan/vant/issues/8013)
+- Toast: closeOnClickOverlay not work [#8044](https://github.com/youzan/vant/issues/8044)
+
+### [v3.0.5](https://github.com/youzan/vant/compare/v3.0.4...v3.0.5)
+
+`2021-01-24`
+
+**Feature**
+
+- Badge: add offset prop [e0b463](https://github.com/youzan/vant/commit/e0b463630108b5031a02a8afcd0c141a7fdbac9e)
+- Calendar: reset method support specified date [#7966](https://github.com/youzan/vant/issues/7966)
+- Icons: add wechat icon, rename wechat-pay icon [b3cd8c](https://github.com/youzan/vant/commit/b3cd8c14aea9e542a9de4ba9999e50c3ecbf3b3c)
+- ImagePreview: reset scale after swiping [#7972](https://github.com/youzan/vant/issues/7972)
+- ImagePreview: adjust default swipeDuration to 300ms [#7970](https://github.com/youzan/vant/issues/7970)
+- ShareSheet: add wechat-moments icon [ca66fb](https://github.com/youzan/vant/commit/ca66fbca36c5c839e3a294d465b0fc2bd7bf5039)
+- Slider: add readonly prop [4cd991](https://github.com/youzan/vant/commit/4cd991dfec01bd5342cb59b750d0dfa5901b8dc8)
+
+**style**
+
+- ShareSheet: update qrcode icon [32a08b](https://github.com/youzan/vant/commit/32a08bb6807d9d38027e03eef376d82b6eab282e)
+- TreeSelect: add active feedback [bada31](https://github.com/youzan/vant/commit/bada315fb3b0fbdf30c663170c867bbbc274687c)
+
+**Bug Fixes**
+
+- Calendar: should reset to default date when calling reset method [#7967](https://github.com/youzan/vant/issues/7967)
+- Dialog: failed to render when toggling allowHtml [#7968](https://github.com/youzan/vant/issues/7968)
+- ImagePreview: scale event index is undefined [#7971](https://github.com/youzan/vant/issues/7971)
+
+### [v3.0.4](https://github.com/youzan/vant/compare/v3.0.3...v3.0.4)
+
+`2021-01-17`
+
+**Feature**
+
+- Cascader: add field-names prop [#7933](https://github.com/youzan/vant/issues/7933)
+- Cell: allow to disable clickable when using is-link [#7923](https://github.com/youzan/vant/issues/7923)
+- DropdownItem: title-class can be array or object type [#7926](https://github.com/youzan/vant/issues/7926)
+- Popup: overlay-class can be array or object [#7924](https://github.com/youzan/vant/issues/7924)
+- Toast: add overlayClass option [#7925](https://github.com/youzan/vant/issues/7925)
+- Toast: add overlayStyle option [#7898](https://github.com/youzan/vant/issues/7898)
+
+**Bug Fixes**
+
+- AddressEdit: should expose setAreaCode method [6a184f](https://github.com/youzan/vant/commit/6a184f8e930fea31035680dd44f40bc007aba4cd)
+- Circle: the gradient color is incorrect [#7909](https://github.com/youzan/vant/issues/7909)
+- NumberKeyboard: fix delete、extra-key slot not work [52a0e5](https://github.com/youzan/vant/commit/52a0e5a8c70dcc07b87140e33318acefcbdd3ef9)
+- Search: fix update:modelValue emits warning [#7872](https://github.com/youzan/vant/issues/7872)
+- Swipe: should stop autoplay when page is hidden [1c428f](https://github.com/youzan/vant/commit/1c428f240cd44d3389510263dd7f03973cfbfa2b)
+
+### [v3.0.3](https://github.com/youzan/vant/compare/v3.0.2...v3.0.3)
+
+`2021-01-10`
+
+**Feature**
+
+- Field: add autocomplate prop [#7877](https://github.com/youzan/vant/issues/7877)
+
+**Bug Fixes**
+
+- Area: should expose getValues method [03c7b4](https://github.com/youzan/vant/commit/03c7b46b04d8c543f952cbf8399ec21ca39f979f)
+- ImagePreview: close-on-popstate not work [#7880](https://github.com/youzan/vant/issues/7880)
+- List: should watch error prop and check position [b79c32](https://github.com/youzan/vant/commit/b79c32183f6159a663dad42f6189a939061f9f32)
+
+### [v3.0.2](https://github.com/youzan/vant/compare/v3.0.1...v3.0.2)
+
+`2021-01-02`
+
+**Feature**
+
+- Calendar: add scrollToDate method [#7847](https://github.com/youzan/vant/issues/7847)
+- Form: add disabled prop [#7830](https://github.com/youzan/vant/issues/7830)
+- Form: add readonly prop [#7830](https://github.com/youzan/vant/issues/7830)
+- Loading: add text-color prop [#7806](https://github.com/youzan/vant/issues/7806)
+- Picker: add columns-field-names prop [#7791](https://github.com/youzan/vant/issues/7791)
+- NumberKeyboard: add random-key-order prop [#7841](https://github.com/youzan/vant/issues/7841)
+
+**Bug Fixes**
+
+- Calendar: title slot not work [#7826](https://github.com/youzan/vant/issues/7826)
+- Calendar: failed to watch defaultDate [#7815](https://github.com/youzan/vant/issues/7815)
+- Popup: should remove lock scroll before destroyed [#7835](https://github.com/youzan/vant/issues/7835)
+- Stepper: should format model-value [81494d](https://github.com/youzan/vant/commit/81494dfa13e6ab9a3f12995f481290d27d14ab7a)
+
+### [v3.0.1](https://github.com/youzan/vant/compare/v3.0.0...v3.0.1)
+
+`2020-12-27`
+
+**Feature**
+
+- Form: support valdiate multiple names [#7810](https://github.com/youzan/vant/issues/7810)
+- Form: resetValidation support multiple names [#7811](https://github.com/youzan/vant/issues/7811)
+- Stepper: add show-input prop [#7812](https://github.com/youzan/vant/issues/7812)
+- IndexBar: add scrollTo method [#7794](https://github.com/youzan/vant/issues/7794)
+
+**Bug Fixes**
+
+- CountDown: fix ssr memory leak [#7808](https://github.com/youzan/vant/issues/7808)
+- Image: mismatching warning during ssr [#7822](https://github.com/youzan/vant/issues/7822)
+- Popup: lockScroll not work [#7738](https://github.com/youzan/vant/issues/7738)
+- Stepper: change event emitted twice [#7820](https://github.com/youzan/vant/issues/7820)
+- Swipe: incorrect size during ssr [#7821](https://github.com/youzan/vant/issues/7821)
+- Swipe: incorrect active swipe when children changed [#7802](https://github.com/youzan/vant/issues/7802)
+- Swipe: incorrect active tab when activated [#7772](https://github.com/youzan/vant/issues/7772)
+
+### [v3.0.0](https://github.com/youzan/vant/compare/v2.12.0...v3.0.0)
+
+`2020-12-23`
+
+**Content**
+
+Reference: [Vant 3.0 正式发布：全面拥抱 Vue 3](https://github.com/youzan/vant/issues/7797)。
+
+### [v3.0.0-rc.4](https://github.com/youzan/vant/compare/v2.12.0-beta.0...v3.0.0-rc.4)
+
+`2020-12-21`
+
+**New Component**
+
+- add Cascader component [#7771](https://github.com/youzan/vant/pull/7771)
+
+<img src="https://b.yzcdn.cn/vant/cascader_1221.png">
+
+**Feature**
+
+- Stepper: add show-input prop [#7785](https://github.com/youzan/vant/issues/7785)
+- uploader: add single uploader preview image style [#7731](https://github.com/youzan/vant/issues/7731)
+
+**Types**
+
+- Lazyload: fix typing [#7757](https://github.com/youzan/vant/issues/7757)
+- Contains all features and bug fixes of `v2.12.0-beta.0` version
+
+### [v3.0.0-rc.3](https://github.com/youzan/vant/compare/v2.11.2...v3.0.0-rc.3)
+
+`2020-12-10`
+
+**Breaking Change**
+
+- Stepper: rename async-change to before-change [e026d2](https://github.com/youzan/vant/commit/e026d2d83f66bb25c66f805cf8085de70d8e009f)
+
+**perf**
+
+- Stepper: improve bundle size [#7675](https://github.com/youzan/vant/issues/7675)
+
+**Bug Fixes**
+
+- Stepper: disabled not work [c27760](https://github.com/youzan/vant/commit/c277603160a7a17685dc532304b9a0c2444db959)
+- Tabs: failed to set active tab [#7717](https://github.com/youzan/vant/issues/7717)
+- Contains all features and bug fixes of `v2.11.3` version
+
+### [v3.0.0-rc.2](https://github.com/youzan/vant/compare/v3.0.0-rc.1...v3.0.0-rc.2)
+
+`2020-12-04`
+
+**perf**
+
+- reduce bundle size [#7675](https://github.com/youzan/vant/issues/7675)
+
+**Bug Fixes**
+
+- Lazyload: missing esm output [#7685](https://github.com/youzan/vant/issues/7685)
+- NumberKeyboard: fix hide-on-click-outside prop not working [#7668](https://github.com/youzan/vant/issues/7668) [#7667](https://github.com/youzan/vant/issues/7667)
+- Uploader: fix change status is not valid [#7681](https://github.com/youzan/vant/issues/7681)
+- Types: fix teleport typing [#7687](https://github.com/youzan/vant/issues/7687)
+- Contains all features and bug fixes of `v2.11.2` version
+
+### [v3.0.0-rc.1](https://github.com/youzan/vant/compare/v2.11.1...v3.0.0-rc.1)
+
+`2020-12-01`
+
+**Breaking Change**
+
+- Popover: adjust trigger default value to click [1699d9](https://github.com/youzan/vant/commit/1699d9927240373867f065355136fd27ac04b0e5)
+
+**Feature**
+
+- Lazyload: support Vue 3 [d3ca40](https://github.com/youzan/vant/commit/d3ca404f98ffd572035d7048c949e8942b89fc55)
+- Contains all features and bug fixes of `v2.11.1` version
+
+**style**
+
+- Circle: add @circle-color less var [1a6cf6](https://github.com/youzan/vant/commit/1a6cf64f548bb19c6bd478db67f2e0a1d7c9a145)
+- Circle: add @circle-layer-color less var [65a5ed](https://github.com/youzan/vant/commit/65a5ed85537b7a406655bd39f7e4f5332d780a82)
+- Circle: add @circle-size less var [b57f7e](https://github.com/youzan/vant/commit/b57f7e9d9810ce95047334f0897899ebddaac6f3)
+- IndexBar: adjust default highlight color to red [65b680](https://github.com/youzan/vant/commit/65b6807a7e6b8a415b5f228c5d55426cd81a1dfa)
+- IndexBar: adjust sticky anchor color to red [87b0a0](https://github.com/youzan/vant/commit/87b0a034958296a720409ded893e708081c35bc5)
+- IndexBar: increase right padding to 8px [aad055](https://github.com/youzan/vant/commit/aad055906484d8b6c38a9f84a768f09522b13a41)
+
+**Bug Fixes**
+
+- Image: lazy-load prop not work [0ba818](https://github.com/youzan/vant/commit/0ba8187bf540abc0c593c6571554f1b72e8d3e19)
+- Lazyload: fix typing [d0c4c2](https://github.com/youzan/vant/commit/d0c4c26d758f18ac3f33fc7d4867a98b731b129d)
+- Popup: transition-appear prop not work [dd6930](https://github.com/youzan/vant/commit/dd6930533593a363e25f56717e5c17184ef6e867)
+
+### [v3.0.0-beta.10](https://github.com/youzan/vant/compare/v3.0.0-beta.9...v3.0.0-beta.10)
+
+`2020-11-22`
+
+**Bug Fixes**
+
+- Radio: failed to bind group [0f7c9a](https://github.com/youzan/vant/commit/0f7c9a317cc9a7219ec8431bae0658a5e84d43af)
+
+### [v3.0.0-beta.9](https://github.com/youzan/vant/compare/v2.11.0...v3.0.0-beta.9)
+
+`2020-11-22`
+
+**Feature**
+
+- Search: add blur method [d26282](https://github.com/youzan/vant/commit/d26282e54245a47075fed01baf6304e0d84559e0)
+- Search: add focus method [2833bc](https://github.com/youzan/vant/commit/2833bc03f5243370e5a3aeece5b823fc2ebde64c)
+
+**Bug Fixes**
+
+- Checkbox: bind-group prop not work [#7447](https://github.com/youzan/vant/issues/7447)
+- Badge: fix missing typing [c487b3](https://github.com/youzan/vant/commit/c487b394efa946f6fae5059f1e1a69be11a25a6e)
+- Contains all features and bug fixes of `v2.11.0` version
+
+### [v3.0.0-beta.8](https://github.com/youzan/vant/compare/v2.10.14...v3.0.0-beta.8)
+
+`2020-11-15`
+
+**Bug Fixes**
+
+- ActionSheet: incorrect behavior when clicking disabled option [996598](https://github.com/youzan/vant/commit/996598686955b90bb5cf7589b5ca1589e17e2016)
+- ActionSheet: missing callback option [27b761](https://github.com/youzan/vant/commit/27b761f534186a6bfa2e8e54cc78ccb51ec48e25)
+- Calendar: failed to render when default-date is null #7519 [#7519](https://github.com/youzan/vant/issues/7519)
+- cli: should not collect coverage from test dir [c21517](https://github.com/youzan/vant/commit/c2151708bbffee95ceb169176bfa5deb5f7e9317)
+- DatetimePicker: inherit correct props [ed332d](https://github.com/youzan/vant/commit/ed332daf319e2005995f279026a57d4f30a339f6)
+- NavBar: safe-area-inset-top css incorrect [#7535](https://github.com/youzan/vant/issues/7535)
+- NoticeBar: avoid repeated start [0712d9](https://github.com/youzan/vant/commit/0712d920634e7b70b77f49c71337172bf3ece470)
+- Swipe: failed to render in lazy-render mode [e06ba4](https://github.com/youzan/vant/commit/e06ba480a9ec02af8659616ff6ceb5155defddad)
+- Swipe: avoid repeated initialization [c94173](https://github.com/youzan/vant/commit/c9417341e0adb681db6108cf1383bab77ab90da9)
+- Tabs: avoid repeated initialization [599e81](https://github.com/youzan/vant/commit/599e817cd4f4239b4a93c75f34118731d47891b5)
+- Contains all features and bug fixes of `v2.10.14` version
+
+### [v3.0.0-beta.7](https://github.com/youzan/vant/compare/v2.10.13...v3.0.0-beta.7)
+
+`2020-11-08`
+
+**Bug Fixes**
+
+- Calendar: incorrect initial date [#7412](https://github.com/youzan/vant/issues/7412)
+- DropdownMenu: can't disable closeOnClickOutside [#7473](https://github.com/youzan/vant/issues/7473)
+- Uploader: before-read return true not work [#7493](https://github.com/youzan/vant/issues/7493)
+- Uploader: can't get index in delete event [#7481](https://github.com/youzan/vant/issues/7481)
+- Contains all features and bug fixes of `v2.10.13` version
+
+### [v3.0.0-beta.6](https://github.com/youzan/vant/compare/v2.10.12...v3.0.0-beta.6)
+
+`2020-11-01`
+
+**Bug Fixes**
+
+- Calendar: watch maxData/minDate and reset [#7412](https://github.com/youzan/vant/issues/7412)
+- Swipe: incorrect lazy render when loop is false [#7465](https://github.com/youzan/vant/issues/7465)
+- Swipe: item should only rendered once [#7466](https://github.com/youzan/vant/issues/7466)
+- Tabs: skip initial animation [49e877](https://github.com/youzan/vant/commit/49e87756c70b33e1a56620ebee3c0aa53fb9fc86)
+- ActionBar: fix typing [#7440](https://github.com/youzan/vant/issues/7440) [#7442](https://github.com/youzan/vant/issues/7442)
+- Contains all features and bug fixes of `v2.10.12` version
@@ -0,0 +1,987 @@
+# 更新日志
+
+### 提示
+
+当前文档为 Vant 3 的更新日志，如需查询 Vant 2 的更新内容，请访问 [Vant 2 更新日志](https://youzan.github.io/vant/#/zh-CN/changelog)。
+
+### 介绍
+
+Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
+
+**发布节奏**
+
+- 修订号：每周发布，包含新特性和问题修复。
+- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
+- 主版本号：无固定的发布时间，包含不兼容更新和重大功能更新。
+
+## 更新内容
+
+### [v3.2.2](https://github.com/youzan/vant/compare/v3.2.1...v3.2.2)
+
+`2021-09-02`
+
+**Feature**
+
+- Field: 新增 id 属性 [#9347](https://github.com/youzan/vant/issues/9347)
+- Field: 新增 `van-field__error` 类名 [#9327](https://github.com/youzan/vant/issues/9327)
+- Field: label 现在会使用原生 `label` 标签 [#9346](https://github.com/youzan/vant/issues/9346)
+- Popover: 新增 show-arrow 属性 [#9372](https://github.com/youzan/vant/issues/9372)
+- Progress: 新增过渡动画效果 [ba4ff5](https://github.com/youzan/vant/commit/ba4ff58af6ccf67e255bf43ef905677dc64596a3)
+- Search: 新增 id 属性 [#9349](https://github.com/youzan/vant/issues/9349)
+- Tab: 新增 show-zero-badge 属性 [#9343](https://github.com/youzan/vant/issues/9343)
+- Locale: 精简一部分国际化文本配置 [#9329](https://github.com/youzan/vant/issues/9329)
+
+**Bug Fixes**
+
+- AddressEdit: 移除了无效的样式变量 [#9364](https://github.com/youzan/vant/issues/9364)
+- Progress: 修复在 v-show 内使用时无法正确渲染的问题 [841e09](https://github.com/youzan/vant/commit/841e09d0529961058ecb63ed26f018cf3a66a3bf)
+- Progress: 修复 percentage 属性缺少默认值的问题 [8ac597](https://github.com/youzan/vant/commit/8ac597dc3d2316d34f866dcfd7e1646c695da180)
+- 修复动画相关的 CSS 变量不生效的问题 [#9337](https://github.com/youzan/vant/issues/9337)
+
+### [v3.2.1](https://github.com/youzan/vant/compare/v3.2.0...v3.2.1)
+
+`2021-08-22`
+
+**Feature**
+
+- Circle: 新增 start-position 属性 [#9305](https://github.com/youzan/vant/issues/9305)
+- Slider: 新增 reverse 属性 [#9308](https://github.com/youzan/vant/issues/9308)
+- NumberKeyboard: 新增 van-number-keyboard-key-background-color CSS 变量 [#9303](https://github.com/youzan/vant/issues/9303)
+- PasswordInput: add password-input-text-color CSS 变量 [#9304](https://github.com/youzan/vant/issues/9304)
+
+**Bug Fixes**
+
+- Calendar: 修复 month-show 事件缺少 title 参数的问题 [#9275](https://github.com/youzan/vant/issues/9275)
+- Dialog: 修复 beforeClose 重复触发的问题 [#9283](https://github.com/youzan/vant/issues/9283) [#9291](https://github.com/youzan/vant/issues/9291)
+- Field: 修复 FieldInstance 类型未导出的问题 [#9254](https://github.com/youzan/vant/issues/9254)
+- Rate: 修复 count 属性传入字符串类型时展示错误的问题 [#9307](https://github.com/youzan/vant/issues/9307)
+- TreeSelect: 修复 CSS 负数变量不生效导致样式错误的问题 [#9306](https://github.com/youzan/vant/issues/9306)
+
+### [v3.2.0](https://github.com/youzan/vant/compare/v3.1.5...v3.2.0)
+
+`2021-08-12`
+
+**Feature**
+
+- Form: 新增 useCustomFieldValue 方法，用于自定义表单项 [#9200](https://github.com/youzan/vant/issues/9200)
+- Button: loading-size 属性支持 number 类型 [#9177](https://github.com/youzan/vant/issues/9177)
+- Style: 新增 van-safe-area-bottom 样式类 [#9205](https://github.com/youzan/vant/issues/9205)
+
+**Types**
+
+- AddressEdit: 新增 AddressEditInstance 类型 [#9197](https://github.com/youzan/vant/issues/9197)
+- Area: 新增 AreaInstance 类型 [#9195](https://github.com/youzan/vant/issues/9195)
+- Calendar: 新增 CalendarInstance 类型 [#9165](https://github.com/youzan/vant/issues/9165)
+- Checkbox: 新增 CheckboxInstance 类型 [#9140](https://github.com/youzan/vant/issues/9140)
+- CheckboxGroup: 新增 CheckboxGroupInstance 类型 [#9142](https://github.com/youzan/vant/issues/9142)
+- CollapseItem: 新增 CollapseItemInstance 类型 [#9194](https://github.com/youzan/vant/issues/9194)
+- CountDown: 新增 CountDownInstance 类型 [#9153](https://github.com/youzan/vant/issues/9153)
+- DatetimePicker: 新增 DatetimePickerInstance 类型 [#9208](https://github.com/youzan/vant/issues/9208)
+- DropdownItem: 新增 DropdownItemInstance 类型 [#9214](https://github.com/youzan/vant/issues/9214)
+- Field: 新增 FieldInstance 类型 [#9166](https://github.com/youzan/vant/issues/9166)
+- Form: 新增 FormInstance 类型 [#9139](https://github.com/youzan/vant/issues/9139)
+- ImagePreview: 新增 ImagePreviewInstance 类型 [#9216](https://github.com/youzan/vant/issues/9216)
+- IndexBar: 新增 IndexBarInstance 类型 [#9246](https://github.com/youzan/vant/issues/9246)
+- List: 新增 ListInstance 类型 [#9159](https://github.com/youzan/vant/issues/9159)
+- NoticeBar: 新增 NoticeBarInstance 类型 [#9245](https://github.com/youzan/vant/issues/9245)
+- Picker: 新增 PickerInstance 类型 [#9183](https://github.com/youzan/vant/issues/9183)
+- Progress: 新增 ProgressInstance 类型 [#9247](https://github.com/youzan/vant/issues/9247)
+- Search: 新增 SearchInstance 类型 [#9181](https://github.com/youzan/vant/issues/9181)
+- Swipe: 新增 SwipeInstance 类型 [#9158](https://github.com/youzan/vant/issues/9158)
+- SwipeCell: 新增 SwipeCellInstance 类型 [#9179](https://github.com/youzan/vant/issues/9179)
+- Tabs: 新增 TabsInstance 类型 [#9174](https://github.com/youzan/vant/issues/9174)
+- Uploader: 新增 UploaderInstance 类型 [#9164](https://github.com/youzan/vant/issues/9164)
+
+**Bug Fixes**
+
+- Badge: 修复 offset 为负数时不生效的问题 [#9199](https://github.com/youzan/vant/issues/9199)
+- Image: 修复圆角数值不正确的问题 [#9163](https://github.com/youzan/vant/issues/9163)
+- Field: 修复 Textarea 内容较多时，输入会导致页面滚动到顶部的问题 [#9206](https://github.com/youzan/vant/issues/9206)
+- Notify: 修复默认选项被错误覆盖的问题 [#9138](https://github.com/youzan/vant/issues/9138)
+- Rate: 修复星星较多时无法自动换行的问题 [#9192](https://github.com/youzan/vant/issues/9192)
+- Tabs: 修复 card 类型内边距错误的问题 [#9168](https://github.com/youzan/vant/issues/9168)
+- Toast: 修复某些情况下 message 无法更新的问题 [#9196](https://github.com/youzan/vant/issues/9196)
+
+### [v3.1.5](https://github.com/youzan/vant/compare/v3.1.4...v3.1.5)
+
+`2021-07-26`
+
+**Feature**
+
+- AddressEdit: 新增 address-edit-button-font-size 样式变量 [#9113](https://github.com/youzan/vant/issues/9113)
+- Icon: 新增 shield-o 图标 [#9082](https://github.com/youzan/vant/issues/9082)
+- Locale: 新增 Russian 俄罗斯语言包 [#9088](https://github.com/youzan/vant/issues/9088)
+- Toast: 优化不可点击状态下的光标展示 [#9116](https://github.com/youzan/vant/issues/9116)
+- Uploader: 新增 click-upload 事件 [#9119](https://github.com/youzan/vant/issues/9119)
+- Uploader: 新增 readonly 属性 [#9118](https://github.com/youzan/vant/issues/9118)
+
+**Bug Fixes**
+
+- Icon: 修复 invitation 图标名称拼写错误 [#9096](https://github.com/youzan/vant/issues/9096)
+- NumberKeyboard: 修复点击外部时会触发 close 事件的问题 [#9108](https://github.com/youzan/vant/issues/9108)
+- Search: 修复左侧图标颜色不正确的问题 [#9100](https://github.com/youzan/vant/issues/9100)
+- Tabbar: 修复 tabbar-item-icon-margin-bottom 样式变量名称 [#9101](https://github.com/youzan/vant/issues/9101)
+
+### [v3.1.4](https://github.com/youzan/vant/compare/v3.1.3...v3.1.4)
+
+`2021-07-19`
+
+**Feature**
+
+- ActionSheet: 新增 before-close 属性 [#9068](https://github.com/youzan/vant/issues/9068)
+- Cascader: 新增 option 插槽 [#9036](https://github.com/youzan/vant/issues/9036)
+- Cascader: 优化光标展示 [#9032](https://github.com/youzan/vant/issues/9032)
+- Popup: 新增 before-close 属性 [#9067](https://github.com/youzan/vant/issues/9067)
+- ShareSheet: 新增 before-close 属性 [#9068](https://github.com/youzan/vant/issues/9068)
+- Tabs: 新增 click-tab 事件 [#9037](https://github.com/youzan/vant/issues/9037)
+
+**Bug Fixes**
+
+- Field: 修复 label-align 为 right 时 required 标记位置错误的问题 [#9035](https://github.com/youzan/vant/issues/9035)
+- List: 修复在 Tabs 内嵌套使用时，切换 Tabs 不触发 load 事件的问题 [#9022](https://github.com/youzan/vant/issues/9022)
+- Popup: 修复某些情况下未正确触发 open、close 事件的问题 [#9065](https://github.com/youzan/vant/issues/9065)
+
+### [v3.1.3](https://github.com/youzan/vant/compare/v3.1.2...v3.1.3)
+
+`2021-07-11`
+
+**Feature**
+
+- Calendar: 新增 click-subtitle 事件 [#8981](https://github.com/youzan/vant/issues/8981)
+- Calendar: 新增 subtitle 插槽 [#8980](https://github.com/youzan/vant/issues/8980)
+- ConfigProvider: 新增 icon-prefix 属性 [#8986](https://github.com/youzan/vant/issues/8986)
+- Slider: 新增 drag 事件参数 [#8990](https://github.com/youzan/vant/issues/8990)
+- Slider: 新增 left-button、right-button 插槽 [#8989](https://github.com/youzan/vant/issues/8989)
+- touch-emulator: 支持通过白名单排除节点 [#8984](https://github.com/youzan/vant/issues/8984)
+
+**Bug Fixes**
+
+- Step: 修复 z-index 过高问题 [#9003](https://github.com/youzan/vant/issues/9003)
+
+### [v3.1.2](https://github.com/youzan/vant/compare/v3.1.1...v3.1.2)
+
+`2021-07-03`
+
+**Feature**
+
+- Area: 新增 toolbar、confirm、cancel 插槽 [#8969](https://github.com/youzan/vant/issues/8969)
+- Calendar: 优化日期较多时的加载性能 [#8955](https://github.com/youzan/vant/issues/8955)
+- Cascader: 新增 disabled 选项 [#8952](https://github.com/youzan/vant/issues/8952)
+- ConfigProvider: 新增 tag 属性 [#8967](https://github.com/youzan/vant/issues/8967)
+- Picker: 新增 toolbar 插槽，将 default 插槽标记为废弃 [#8968](https://github.com/youzan/vant/issues/8968)
+- Picker: 允许 Option 的值为 number 类型 [#8951](https://github.com/youzan/vant/issues/8951)
+- Picker: 新增 picker-option-padding CSS 变量 [#8947](https://github.com/youzan/vant/issues/8947)
+
+**Bug Fixes**
+
+- Toast: 修复文字换行问题 [#8965](https://github.com/youzan/vant/issues/8965)
+
+### [v3.1.1](https://github.com/youzan/vant/compare/v3.1.0...v3.1.1)
+
+`2021-06-27`
+
+**Feature**
+
+- Cell: 新增 value 插槽，将 default 插槽标记为废弃 [#8933](https://github.com/youzan/vant/issues/8933)
+- CollapseItem: 新增 label 插槽 [#8934](https://github.com/youzan/vant/issues/8934)
+- NoticeBar: 新增 reset 方法 [#8917](https://github.com/youzan/vant/issues/8917)
+- Tabs: 新增 nav-bottom 插槽 [#8915](https://github.com/youzan/vant/issues/8915)
+
+### [v3.1.0](https://github.com/youzan/vant/compare/v3.1.0-beta.0...v3.1.0)
+
+`2021-06-22`
+
+**New Component**
+
+- 新增 [ConfigProvider](#/zh-CN/config-provider) 组件，用于主题定制 [#8854](https://github.com/youzan/vant/issues/8854)
+
+**Feature**
+
+- 所有组件支持 CSS 变量 [aef257](https://github.com/youzan/vant/commit/aef2579a95da7c8b528ba7062b227fea698a0487) [fe1cba](https://github.com/youzan/vant/commit/fe1cba97b796eba7e9b5dca0ce4ab0d1de95715c)
+- 新增 primary-color 等样式变量 [#8861](https://github.com/youzan/vant/issues/8861)
+- Checkbox: icon 插槽新增 disabled 参数 [#8839](https://github.com/youzan/vant/issues/8839)
+- Cascader: 新增 className 选项 [#8882](https://github.com/youzan/vant/issues/8882)
+- Cascader: 新增 color 选项 [#8883](https://github.com/youzan/vant/issues/8883)
+- CellGroup: 新增 inset 属性 [#8885](https://github.com/youzan/vant/issues/8885)
+- GridItem: 新增 reverse 属性 [#8878](https://github.com/youzan/vant/issues/8878)
+- IndexBar: 新增 teleport 属性 [#8820](https://github.com/youzan/vant/issues/8820)
+
+**Bug Fixes**
+
+- Dialog: 修复 message 作为函数时返回 HTML 字符串无效的问题 [#8872](https://github.com/youzan/vant/issues/8872)
+- Slider: 修复设置 step 属性时，输入值格式化错误的问题 [#8893](https://github.com/youzan/vant/issues/8893)
+
+### [v3.0.18](https://github.com/youzan/vant/compare/v3.0.17...v3.0.18)
+
+`2021-06-03`
+
+**Feature**
+
+- Button: 新增 icon 插槽 [#8783](https://github.com/youzan/vant/issues/8783)
+- CouponList: 新增 list-footer、disabled-list-footer 插槽 [#8801](https://github.com/youzan/vant/issues/8801)
+- Locale: 新增 French 法语语言包 [#8795](https://github.com/youzan/vant/issues/8795)
+- Popup: 新增 icon-prefix 属性 [#8793](https://github.com/youzan/vant/issues/8793)
+- Popup: 新增 overlay-content 插槽 [#8794](https://github.com/youzan/vant/issues/8794)
+
+**Bug Fixes**
+
+- Collapse: 修复在 safari 上可能出现渲染异常的问题 [#8788](https://github.com/youzan/vant/issues/8788)
+- NoticeBar: 修复在 Popup 内嵌套使用时播放异常的问题 [#8789](https://github.com/youzan/vant/issues/8789)
+- List: 移除未使用的 @list-icon-margin-right 变量 [#8759](https://github.com/youzan/vant/issues/8759)
+- @vant/touch-emulator: 修复 SSR 时报错的问题 [#8767](https://github.com/youzan/vant/issues/8767)
+
+### [v3.0.17](https://github.com/youzan/vant/compare/v3.0.16...v3.0.17)
+
+`2021-05-23`
+
+**Feature**
+
+- ActionBarIcon: 新增 icon-prefix 属性 [#8748](https://github.com/youzan/vant/issues/8748)
+- Calendar: 新增 over-range 事件 [#8739](https://github.com/youzan/vant/issues/8739)
+- Calendar: 新增 show-range-prompt 属性 [#8739](https://github.com/youzan/vant/issues/8739)
+- Calendar: 新增 top-info、bottom-info 插槽 [#8716](https://github.com/youzan/vant/issues/8716)
+- GridItem: 新增 icon-color 属性 [#8753](https://github.com/youzan/vant/issues/8753)
+- NoticeBar: 默认 speed 由 50 调整为 60 [#8694](https://github.com/youzan/vant/issues/8694)
+- Popover: 新增 icon-prefix 属性 [#8703](https://github.com/youzan/vant/issues/8703)
+- Toast: 新增不同类型 Toast 的 transition 过渡效果 [#8743](https://github.com/youzan/vant/issues/8743)
+- Uploader: max-size 属性支持函数格式 [#8744](https://github.com/youzan/vant/issues/8744)
+
+**Bug Fixes**
+
+- Button: 修复 tsx 下使用时缺少 onClick 类型定义的问题 [#8665](https://github.com/youzan/vant/issues/8665)
+- Calendar: 修复默认日期不正确的问题 [#8696](https://github.com/youzan/vant/issues/8696)
+- DatetimePicker: 修复动态设置 minDate、maxDate 时异常的问题 [#8658](https://github.com/youzan/vant/issues/8658)
+- List: 修复在开启 animated 的 Tabs 下使用时加载异常的问题 [#8741](https://github.com/youzan/vant/issues/8741)
+- Tabs: 修复滚动事件监听不正确的问题 [#8734](https://github.com/youzan/vant/issues/8734)
+- Toast: 修复多次调用时持续时间不正确的问题 [#8742](https://github.com/youzan/vant/issues/8742)
+
+### [v3.0.16](https://github.com/youzan/vant/compare/v3.0.15...v3.0.16)
+
+`2021-05-03`
+
+**Feature**
+
+- Swipe: 新增 indicator 插槽的 active 参数 [#8645](https://github.com/youzan/vant/issues/8645)
+- Cascader: 新增 @cascader-header-padding less 变量 [#8626](https://github.com/youzan/vant/issues/8626)
+- Steps: 新增 icon-prefix 属性 [#8631](https://github.com/youzan/vant/issues/8631)
+- 导出更多类型定义 [#8652](https://github.com/youzan/vant/issues/8652)
+
+**Bug Fixes**
+
+- Stepper: 修复 blur 事件触发时机 [#8620](https://github.com/youzan/vant/issues/8620)
+- SubmitBar: 修复 @submit-bar-price-font-size 变量不生效的问题 [#8639](https://github.com/youzan/vant/issues/8639)
+- Swipe: 修复在 Popup 内时展示可能不正确的问题 [#8643](https://github.com/youzan/vant/issues/8643)
+- Tabs: 修复在 Popup 内时展示可能不正确的问题 [#8642](https://github.com/youzan/vant/issues/8642)
+
+### [v3.0.15](https://github.com/youzan/vant/compare/v2.12.14-test...v3.0.15)
+
+`2021-04-25`
+
+**Feature**
+
+- Cascader: 新增 click-tab 事件 [#8606](https://github.com/youzan/vant/issues/8606)
+
+**Bug Fixes**
+
+- Tab: 修复 SSR 时报错的问题 [#8603](https://github.com/youzan/vant/issues/8603)
+- Rate: 修复点击半星时未正确选中的问题 [#8580](https://github.com/youzan/vant/issues/8580)
+- Tag: 修复使用 color 和 plain 属性时边框颜色错误的问题 [#8601](https://github.com/youzan/vant/issues/8601)
+
+### [v3.0.14](https://github.com/youzan/vant/compare/v3.0.13...v3.0.14)
+
+`2021-04-18`
+
+**Feature**
+
+- Badge: offset 属性支持传入任意单位 [35edb7](https://github.com/youzan/vant/commit/35edb72b5cd519d4e75443acaa0a63db16695d2d)
+- Rate: 支持在 readonly 时渲染任意小数结果 [#8528](https://github.com/youzan/vant/issues/8528)
+
+**Bug Fixes**
+
+- ContactList: 修复 nodes 类型错误 [0b764b](https://github.com/youzan/vant/commit/0b764b63470b09f5654d267c8d07a20bc2d31536)
+
+### [v3.0.13](https://github.com/youzan/vant/compare/v3.0.12...v3.0.13)
+
+`2021-04-11`
+
+**Feature**
+
+- ActionBar: 新增 @action-bar-icon-background-color 样式变量 [#8474](https://github.com/youzan/vant/issues/8474)
+- Popover: 升级依赖的 @popperjs/core 到 2.9.2 版本 [0d1323](https://github.com/youzan/vant/commit/0d132337d5d263957a7993d60e47a18efec7313e)
+- perf: 优化包体积 [ba3e6d](https://github.com/youzan/vant/commit/ba3e6d56a0bc7ae3acc25b1380f054da3b9b020f)
+
+**Types**
+
+- Popup: 修复 PopupCloseIconPosition 类型错误 [15d901](https://github.com/youzan/vant/commit/15d901ad6aace3826881cb3c6e0499f75b71df80)
+- Search: 修复在 tsx 下部分 props 不存在的问题 [#8485](https://github.com/youzan/vant/issues/8485)
+- Stepper: 优化 theme 属性类型定义 [#8489](https://github.com/youzan/vant/issues/8489)
+
+**Bug Fixes**
+
+- Field: 修复 autofocus 属性不生效的问题 [#8488](https://github.com/youzan/vant/issues/8488)
+
+### [v3.0.12](https://github.com/youzan/vant/compare/v3.0.11...v3.0.12)
+
+`2021-04-05`
+
+**Feature**
+
+- CollapseItem: 新增 readonly 属性 [#8445](https://github.com/youzan/vant/issues/8445)
+- Field: 新增 clear-icon 属性 [#8438](https://github.com/youzan/vant/issues/8438)
+- Search: 新增 clear-icon 属性 [#8439](https://github.com/youzan/vant/issues/8439)
+- Search: 新增 error-message 属性 [#8442](https://github.com/youzan/vant/issues/8442)
+- Search: 新增 formatter、format-trigger 属性 [#8441](https://github.com/youzan/vant/issues/8441)
+
+**Bug Fixes**
+
+- 修复 Webstorm 下组件标签提示不正确的问题 [#8450](https://github.com/youzan/vant/issues/8450)
+
+### [v3.0.11](https://github.com/youzan/vant/compare/v3.0.10...v3.0.11)
+
+`2021-03-30`
+
+**Feature**
+
+- Cascader: 新增 swipeable 属性 [#8383](https://github.com/youzan/vant/issues/8383)
+- Dialog: 新增 footer 插槽 [#8382](https://github.com/youzan/vant/issues/8382)
+- Dialog: 支持在 message 中传入 render 函数 [#8420](https://github.com/youzan/vant/issues/8420)
+- Image: 新增 icon-size 属性 [#8395](https://github.com/youzan/vant/issues/8395)
+- Row: 新增 wrap 属性 [#8393](https://github.com/youzan/vant/issues/8393)
+
+**Bug Fixes**
+
+- Field: 修复在个别情况下错误地清除错误提示的问题 [#8409](https://github.com/youzan/vant/issues/8409)
+- Sticky: 修复在 SSR 时提示 Element 不存在的问题 [#8407](https://github.com/youzan/vant/issues/8407)
+- Tabs: 修复在 safari 上左滑退出页面时手势判断错误的问题 [#8388](https://github.com/youzan/vant/issues/8388)
+
+### [v3.0.10](https://github.com/youzan/vant/compare/v3.0.9...v3.0.10)
+
+`2021-03-19`
+
+**Feature**
+
+- ActionSheet: 新增 cancel 插槽 [#8333](https://github.com/youzan/vant/issues/8333)
+- Badge: 新增 show-zero 属性 [#8381](https://github.com/youzan/vant/issues/8381)
+- Cascader: 新增 close-icon 属性 [#8334](https://github.com/youzan/vant/issues/8334)
+- Popover: 新增 close-on-click-overlay 属性 [#8351](https://github.com/youzan/vant/issues/8351)
+- Popover: 新增 duration 属性 [#8355](https://github.com/youzan/vant/issues/8355)
+- Popover: 新增 overlay-class 属性 [#8353](https://github.com/youzan/vant/issues/8353)
+- Popover: 新增 overlay-style 属性 [#8354](https://github.com/youzan/vant/issues/8354)
+- ShareSheet: 新增 cancel 插槽 [#8335](https://github.com/youzan/vant/issues/8335)
+- Sticky: 新增 change event [#8374](https://github.com/youzan/vant/issues/8374)
+- Tag: close 事件新增 event 参数 [#8337](https://github.com/youzan/vant/issues/8337)
+- Toast: 新增 iconSize 选项 [#8338](https://github.com/youzan/vant/issues/8338)
+
+**Feature**
+
+- ContactList: 新增 @contact-list-item-radio-icon-color Less 变量 [#8322](https://github.com/youzan/vant/issues/8322)
+- Coupon: 新增 @coupon-corner-checkbox-icon-color Less 变量 [#8323](https://github.com/youzan/vant/issues/8323)
+- List: 新增 @list-loading-icon-size Less 变量 [#8365](https://github.com/youzan/vant/issues/8365)
+- Loading: 新增 @button-loading-icon-size Less 变量 [465bf0](https://github.com/youzan/vant/commit/465bf07095c58e8292b23ef0c64be1550aa9d430)
+- PullRefresh: 新增 @pull-refresh-loading-icon-size Less 变量 [#8366](https://github.com/youzan/vant/issues/8366)
+
+**Bug Fixes**
+
+- Popover: 修复 close-on-click-outside 属性不生效的问题 [#8352](https://github.com/youzan/vant/issues/8352)
+- Swipe: 修复添加 scale 动画时宽度计算错误的问题 [#8330](https://github.com/youzan/vant/issues/8330)
+
+### [v3.0.9](https://github.com/youzan/vant/compare/v3.0.8...v3.0.9)
+
+`2021-03-08`
+
+**Feature**
+
+- AddressList: 新增 tag 插槽 [#8292](https://github.com/youzan/vant/issues/8292)
+
+**Bug Fixes**
+
+- 修复主题定制不生效的问题 [#8301](https://github.com/youzan/vant/issues/8301)
+- 修复在 TS 下使用 app.use 注册组件报错的问题 [#8308](https://github.com/youzan/vant/issues/8308)
+
+### [v3.0.8](https://github.com/youzan/vant/compare/v3.0.7...v3.0.8)
+
+`2021-03-07`
+
+**Types**
+
+- 完善所有组件的类型定义 [#8264](https://github.com/youzan/vant/issues/8264)
+
+**Feature**
+
+- ImagePreview: 新增 transition 属性 [#8275](https://github.com/youzan/vant/issues/8275)
+- ImagePreview: 新增 overlay-style 属性 [#8276](https://github.com/youzan/vant/issues/8276)
+- Locale: 新增 th-TH 泰语 [#8297](https://github.com/youzan/vant/issues/8297)
+- PullRefresh: 新增 pull-distance 属性 [#8280](https://github.com/youzan/vant/issues/8280)
+- Button: 新增若干个 Less 变量 [#8281](https://github.com/youzan/vant/issues/8281)
+
+**Bug Fixes**
+
+- ActionSheet: 修复返回页面时可能错误地重新打开的问题 [#8272](https://github.com/youzan/vant/issues/8272)
+- Stepper: 修复在 iOS14 下禁用时输入框文字不可见的问题 [#8277](https://github.com/youzan/vant/issues/8277)
+- Swipe: 修复动态插入轮播图时渲染错误的问题 [#8288](https://github.com/youzan/vant/issues/8288)
+
+### [v3.0.7](https://github.com/youzan/vant/compare/v3.0.6...v3.0.7)
+
+`2021-02-28`
+
+**Feature**
+
+- Notify: 新增 lockScroll 选项 [#8168](https://github.com/youzan/vant/issues/8168)
+- Popup: click-overlay 事件新增 `Event` 参数 [#8107](https://github.com/youzan/vant/issues/8107)
+- ShareSheet: 新增 overlay-style 属性 [#8225](https://github.com/youzan/vant/issues/8225)
+- ShareSheet: 新增 overlay-class 属性 [#8225](https://github.com/youzan/vant/issues/8225)
+- Step: 新增 finish-icon 插槽 [#8241](https://github.com/youzan/vant/issues/8241)
+- Steps: 新增 finish-icon 属性 [#8103](https://github.com/youzan/vant/issues/8103)
+- Uploader: 新增 @uploader-mask-text-color 样式变量 [#8064](https://github.com/youzan/vant/issues/8064)
+
+**perf**
+
+- 包体积优化：调整适配的浏览器版本，与 Vue 3 保持一致 [#8227](https://github.com/youzan/vant/issues/8227)
+
+**Bug Fixes**
+
+- ActionSheet: 修复 safe-area-inset-bottom 属性不生效的问题 [#8085](https://github.com/youzan/vant/issues/8085)
+- DateTimePicker: 修复 v-model 为 null 时初始值不正确的问题 [#8193](https://github.com/youzan/vant/issues/8193)
+- Form: 修复提交表单时可能滚动到错误的表单项的问题 [#8159](https://github.com/youzan/vant/issues/8159)
+- ImagePreview: 修复第二次调用时可能出现渲染不正确的问题 [#8060](https://github.com/youzan/vant/issues/8060)
+- IndexBar: 修复初始化时激活的锚点未正确渲染的问题 [#8164](https://github.com/youzan/vant/issues/8164)
+- Popup: 修复动态设置 lock-scroll 属性不生效的问题 [#8169](https://github.com/youzan/vant/issues/8169)
+- Swipe: 修复初始化时 active 值可能错误的问题 [#8061](https://github.com/youzan/vant/issues/8061)
+- SwipeCell: 修复点击外部时 click 事件参数不正确的问题 [#8108](https://github.com/youzan/vant/issues/8108)
+- Tabbar: 修复 name 为 0 时激活的选项可能不正确的问题 [#8125](https://github.com/youzan/vant/issues/8125)
+- Tabs: 修复 v-model 为 0 时激活的标签页可能不正确的问题 [#8074](https://github.com/youzan/vant/issues/8074)
+- Toast: 修复 SSR 时可能报错的问题 [#8214](https://github.com/youzan/vant/issues/8214)
+
+### [v3.0.6](https://github.com/youzan/vant/compare/v3.0.5...v3.0.6)
+
+`2021-01-31`
+
+**Feature**
+
+- Area: 支持超过 6 位的地区码 [#8001](https://github.com/youzan/vant/issues/8001)
+- Form: show-error 属性的默认值调整为 false [#8016](https://github.com/youzan/vant/issues/8016)
+- Form: 支持在 validator 中返回错误提示 [#8052](https://github.com/youzan/vant/issues/8052)
+- NumberKeyboard: 新增 blur-on-close 属性 [#8033](https://github.com/youzan/vant/issues/8033)
+- Popover: 新增 click-overlay 事件 [#8050](https://github.com/youzan/vant/issues/8050)
+- Popover: 支持在 action 选项对象中配置 color 字段 [#8049](https://github.com/youzan/vant/issues/8049)
+- Sticky: 新增 position、offset-bottom 属性 [#7979](https://github.com/youzan/vant/issues/7979)
+
+**Bug Fixes**
+
+- Button: 修复加载状态下会触发表单提交的问题 [#8018](https://github.com/youzan/vant/issues/8018)
+- Calendar: 修复无法使用 scrollToDate 方法的问题 [#7983](https://github.com/youzan/vant/issues/7983)
+- Empty: 修复 linearGradient id 可能导致冲突的问题 [#8013](https://github.com/youzan/vant/issues/8013)
+- Toast: 修复 closeOnClickOverlay 设置为 true 不生效的问题 [#8044](https://github.com/youzan/vant/issues/8044)
+
+### [v3.0.5](https://github.com/youzan/vant/compare/v3.0.4...v3.0.5)
+
+`2021-01-24`
+
+**Feature**
+
+- Badge: 新增 offset 属性 [e0b463](https://github.com/youzan/vant/commit/e0b463630108b5031a02a8afcd0c141a7fdbac9e)
+- Calendar: reset 方法支持重置到指定日期 [#7966](https://github.com/youzan/vant/issues/7966)
+- Icons: 新增 wechat 图标, 重命名原 wechat 图标为 wechat-pay [b3cd8c](https://github.com/youzan/vant/commit/b3cd8c14aea9e542a9de4ba9999e50c3ecbf3b3c)
+- ImagePreview: 调用 swipeTo 方法后自动重置缩放状态 [#7972](https://github.com/youzan/vant/issues/7972)
+- ImagePreview: 调整 swipeDuration 的默认值为 300ms [#7970](https://github.com/youzan/vant/issues/7970)
+- ShareSheet: 新增 wechat-moments 朋友圈图标 [ca66fb](https://github.com/youzan/vant/commit/ca66fbca36c5c839e3a294d465b0fc2bd7bf5039)
+- Slider: 新增 readonly 属性 [4cd991](https://github.com/youzan/vant/commit/4cd991dfec01bd5342cb59b750d0dfa5901b8dc8)
+
+**style**
+
+- ShareSheet: 更新 qrcode 图标 [32a08b](https://github.com/youzan/vant/commit/32a08bb6807d9d38027e03eef376d82b6eab282e)
+- TreeSelect: 新增右侧选项点击反馈 [bada31](https://github.com/youzan/vant/commit/bada315fb3b0fbdf30c663170c867bbbc274687c)
+
+**Bug Fixes**
+
+- Calendar: 修复调用 reset 方法时未重置到默认日期的问题 [#7967](https://github.com/youzan/vant/issues/7967)
+- Dialog: 修复切换 allowHtml 时 message 渲染不正确的问题 [#7968](https://github.com/youzan/vant/issues/7968)
+- ImagePreview: 修复 scale 事件的 index 参数为 undefined 的问题 [#7971](https://github.com/youzan/vant/issues/7971)
+
+### [v3.0.4](https://github.com/youzan/vant/compare/v3.0.3...v3.0.4)
+
+`2021-01-17`
+
+**Feature**
+
+- Cascader: 新增 field-names 属性，用于自定义字段名 [#7933](https://github.com/youzan/vant/issues/7933)
+- Cell: 支持在设置 is-link 时将 clickable 设置为 false 来禁用点击状态 [#7923](https://github.com/youzan/vant/issues/7923)
+- DropdownItem: 支持传入数组或对象格式的 title-class [#7926](https://github.com/youzan/vant/issues/7926)
+- Popup: 支持传入数组或对象格式的 overlay-class [#7924](https://github.com/youzan/vant/issues/7924)
+- Toast: 新增 overlayClass 选项 [#7925](https://github.com/youzan/vant/issues/7925)
+- Toast: 新增 overlayStyle 选项 [#7898](https://github.com/youzan/vant/issues/7898)
+
+**Bug Fixes**
+
+- AddressEdit: 修复无法调用 setAreaCode 方法的问题 [6a184f](https://github.com/youzan/vant/commit/6a184f8e930fea31035680dd44f40bc007aba4cd)
+- Circle: 修复渐变色不生效的问题 [#7909](https://github.com/youzan/vant/issues/7909)
+- NumberKeyboard: 修复 delete、extra-key 插槽不生效的问题 [52a0e5](https://github.com/youzan/vant/commit/52a0e5a8c70dcc07b87140e33318acefcbdd3ef9)
+- Search: 修复控制台存在 update:modelValue warning 的问题 [#7872](https://github.com/youzan/vant/issues/7872)
+- Swipe: 修复页面隐藏时未暂停自动轮播的问题 [1c428f](https://github.com/youzan/vant/commit/1c428f240cd44d3389510263dd7f03973cfbfa2b)
+
+### [v3.0.3](https://github.com/youzan/vant/compare/v3.0.2...v3.0.3)
+
+`2021-01-10`
+
+**Feature**
+
+- Field: 新增 autocomplate 属性 [#7877](https://github.com/youzan/vant/issues/7877)
+
+**Bug Fixes**
+
+- Area: 修复无法调用 getValues 方法的问题 [03c7b4](https://github.com/youzan/vant/commit/03c7b46b04d8c543f952cbf8399ec21ca39f979f)
+- ImagePreview: 修复 close-on-popstate 属性不生效的问题 [#7880](https://github.com/youzan/vant/issues/7880)
+- List: 修复更新 error 属性后未触发位置检查的问题 [b79c32](https://github.com/youzan/vant/commit/b79c32183f6159a663dad42f6189a939061f9f32)
+
+### [v3.0.2](https://github.com/youzan/vant/compare/v3.0.1...v3.0.2)
+
+`2021-01-02`
+
+**Feature**
+
+- Calendar: 新增 scrollToDate 方法 [#7847](https://github.com/youzan/vant/issues/7847)
+- Form: 新增 disabled 属性 [#7830](https://github.com/youzan/vant/issues/7830)
+- Form: 新增 readonly 属性 [#7830](https://github.com/youzan/vant/issues/7830)
+- Loading: 新增 text-color 属性 [#7806](https://github.com/youzan/vant/issues/7806)
+- Picker: 新增 columns-field-names 属性 [#7791](https://github.com/youzan/vant/issues/7791)
+- NumberKeyboard: 新增 random-key-order 属性 [#7841](https://github.com/youzan/vant/issues/7841)
+
+**Bug Fixes**
+
+- Calendar: 修复 title 插槽不生效的问题 [#7826](https://github.com/youzan/vant/issues/7826)
+- Calendar: 修复动态设置 defaultDate 不生效的问题 [#7815](https://github.com/youzan/vant/issues/7815)
+- Popup: 修复组件销毁时未解除滚动锁定的问题 [#7835](https://github.com/youzan/vant/issues/7835)
+- Stepper: 修复动态设置 modelValue 时未格式化的问题 [81494d](https://github.com/youzan/vant/commit/81494dfa13e6ab9a3f12995f481290d27d14ab7a)
+
+### [v3.0.1](https://github.com/youzan/vant/compare/v3.0.0...v3.0.1)
+
+`2020-12-27`
+
+**Feature**
+
+- Form: valdiate 方法支持校验多个表单项 [#7810](https://github.com/youzan/vant/issues/7810)
+- Form: resetValidation 方法支持重置多个表单项 [#7811](https://github.com/youzan/vant/issues/7811)
+- Stepper: 新增 show-input 属性，用于控制是否显示输入框 [#7812](https://github.com/youzan/vant/issues/7812)
+- IndexBar: 新增 scrollTo 方法 [#7794](https://github.com/youzan/vant/issues/7794)
+
+**Bug Fixes**
+
+- Cascader: 修复动画闪烁的问题 [#7802](https://github.com/youzan/vant/issues/7802)
+- CountDown: 修复 SSR 过程中内存泄露的问题 [#7808](https://github.com/youzan/vant/issues/7808)
+- Image: 修复 SSR 时提示 DOM 不匹配的问题 [#7822](https://github.com/youzan/vant/issues/7822)
+- Popup: 修复滚动穿透的问题 [#7738](https://github.com/youzan/vant/issues/7738)
+- Stepper: 修复 change 事件重复触发的问题 [#7820](https://github.com/youzan/vant/issues/7820)
+- Swipe: 修复 SSR 样式不正确的问题 [#7821](https://github.com/youzan/vant/issues/7821)
+- Swipe: 修复在 keepalive 标签内使用时显示不正确的问题 [#7772](https://github.com/youzan/vant/issues/7772)
+
+### [v3.0.0](https://github.com/youzan/vant/compare/v2.12.0...v3.0.0)
+
+`2020-12-23`
+
+**更新内容**
+
+请参考 [Vant 3.0 正式发布：全面拥抱 Vue 3](https://github.com/youzan/vant/issues/7797)。
+
+### [v3.0.0-rc.4](https://github.com/youzan/vant/compare/v2.12.0-beta.0...v3.0.0-rc.4)
+
+`2020-12-21`
+
+**New Component**
+
+- 新增 Cascader 级联选择组件 [#7771](https://github.com/youzan/vant/pull/7771)
+
+<img src="https://b.yzcdn.cn/vant/cascader_1221.png">
+
+**Feature**
+
+- Stepper: 新增 show-input 属性 [#7785](https://github.com/youzan/vant/issues/7785)
+- uploader: 支持在 fileList 的选项中单独配置 `imageFit` `deletable` `previewSize` `beforeDelete` 字段 [#7731](https://github.com/youzan/vant/issues/7731)
+
+**Types**
+
+- Lazyload: 修复类型定义错误 [#7757](https://github.com/youzan/vant/issues/7757)
+
+### [v3.0.0-rc.3](https://github.com/youzan/vant/compare/v2.11.2...v3.0.0-rc.3)
+
+`2020-12-10`
+
+**Breaking Change**
+
+- Stepper: `async-change` 属性重命名为 `before-change`，并调整使用方法 [e026d2](https://github.com/youzan/vant/commit/e026d2d83f66bb25c66f805cf8085de70d8e009f)
+
+**perf**
+
+- Stepper: 优化代码包体积 [#7675](https://github.com/youzan/vant/issues/7675)
+
+**Bug Fixes**
+
+- Stepper: 修复禁用按钮仍然能点击的问题 [c27760](https://github.com/youzan/vant/commit/c277603160a7a17685dc532304b9a0c2444db959)
+- Tabs: 修复动态设置 active 值无效的问题 [#7717](https://github.com/youzan/vant/issues/7717)
+- 包含 `v2.11.3` 版本的所有改动和修复
+
+### [v3.0.0-rc.2](https://github.com/youzan/vant/compare/v3.0.0-rc.1...v3.0.0-rc.2)
+
+`2020-12-04`
+
+**perf**
+
+- 优化包体积大小 [#7675](https://github.com/youzan/vant/issues/7675)
+
+**Bug Fixes**
+
+- Lazyload: 修复未导出 ESModule 的问题 [#7685](https://github.com/youzan/vant/issues/7685)
+- NumberKeyboard: 修复 hide-on-click-outside 属性不生效的问题 [#7668](https://github.com/youzan/vant/issues/7668) [#7667](https://github.com/youzan/vant/issues/7667)
+- Uploader: 修复动态修改 status 不生效的问题 [#7681](https://github.com/youzan/vant/issues/7681)
+- Types: 修复 teleport 类型定义错误的问题 [#7687](https://github.com/youzan/vant/issues/7687)
+- 包含 `v2.11.2` 版本的所有改动和修复
+
+### [v3.0.0-rc.1](https://github.com/youzan/vant/compare/v2.11.1...v3.0.0-rc.1)
+
+`2020-12-01`
+
+**Breaking Change**
+
+- Popover: trigger 属性的默认值调整为 click [1699d9](https://github.com/youzan/vant/commit/1699d9927240373867f065355136fd27ac04b0e5)
+
+**Feature**
+
+- Lazyload: 适配 Vue 3 [d3ca40](https://github.com/youzan/vant/commit/d3ca404f98ffd572035d7048c949e8942b89fc55)
+- 包含 `v2.11.1` 版本的所有改动和修复
+
+**style**
+
+- Circle: 新增 @circle-color Less 变量 [1a6cf6](https://github.com/youzan/vant/commit/1a6cf64f548bb19c6bd478db67f2e0a1d7c9a145)
+- Circle: 新增 @circle-layer-color Less 变量 [65a5ed](https://github.com/youzan/vant/commit/65a5ed85537b7a406655bd39f7e4f5332d780a82)
+- Circle: 新增 @circle-size Less 变量 [b57f7e](https://github.com/youzan/vant/commit/b57f7e9d9810ce95047334f0897899ebddaac6f3)
+- IndexBar: 默认高亮颜色调整为红色 [65b680](https://github.com/youzan/vant/commit/65b6807a7e6b8a415b5f228c5d55426cd81a1dfa) [87b0a0](https://github.com/youzan/vant/commit/87b0a034958296a720409ded893e708081c35bc5)
+- IndexBar: 右边距调整为 8px [aad055](https://github.com/youzan/vant/commit/aad055906484d8b6c38a9f84a768f09522b13a41)
+
+**Bug Fixes**
+
+- Image: 修复 lazy-load 属性不生效的问题 [0ba818](https://github.com/youzan/vant/commit/0ba8187bf540abc0c593c6571554f1b72e8d3e19)
+- Lazyload: 修复类型定义错误的问题 [d0c4c2](https://github.com/youzan/vant/commit/d0c4c26d758f18ac3f33fc7d4867a98b731b129d)
+- Popup: 修复 transition-appear 属性不生效的问题 [dd6930](https://github.com/youzan/vant/commit/dd6930533593a363e25f56717e5c17184ef6e867)
+
+### [v3.0.0-beta.10](https://github.com/youzan/vant/compare/v3.0.0-beta.9...v3.0.0-beta.10)
+
+`2020-11-22`
+
+**Bug Fixes**
+
+- Radio: 修复 Radio 无法操作的问题 [0f7c9a](https://github.com/youzan/vant/commit/0f7c9a317cc9a7219ec8431bae0658a5e84d43af)
+
+### [v3.0.0-beta.9](https://github.com/youzan/vant/compare/v2.11.0...v3.0.0-beta.9)
+
+`2020-11-22`
+
+**New Component**
+
+- 新增 [Popover 气泡弹出框](#/zh-CN/popover)组件 [#7579](https://github.com/youzan/vant/issues/7579)
+
+![](https://img.yzcdn.cn/vant/component-preview-1122.png)
+
+**Feature**
+
+- Search: 新增 blur 方法 [d26282](https://github.com/youzan/vant/commit/d26282e54245a47075fed01baf6304e0d84559e0)
+- Search: 新增 focus 方法 [2833bc](https://github.com/youzan/vant/commit/2833bc03f5243370e5a3aeece5b823fc2ebde64c)
+
+**Bug Fixes**
+
+- Checkbox: 修复 bind-group 属性不生效的问题 [#7447](https://github.com/youzan/vant/issues/7447)
+- Badge: 修复无类型定义的问题 [c487b3](https://github.com/youzan/vant/commit/c487b394efa946f6fae5059f1e1a69be11a25a6e)
+- 包含 `v2.11.0` 版本的所有改动和修复
+
+### [v3.0.0-beta.8](https://github.com/youzan/vant/compare/v2.10.14...v3.0.0-beta.8)
+
+`2020-11-15`
+
+**Bug Fixes**
+
+- ActionSheet: 修复选项禁用或加载时仍能点击的问题 [996598](https://github.com/youzan/vant/commit/996598686955b90bb5cf7589b5ca1589e17e2016)
+- ActionSheet: 修复 callback 选项不生效的问题 [27b761](https://github.com/youzan/vant/commit/27b761f534186a6bfa2e8e54cc78ccb51ec48e25)
+- Calendar: 修复 default-date 为 null 时渲染失败的问题 [#7519](https://github.com/youzan/vant/issues/7519)
+- DatetimePicker: 修复 DOM 上渲染多余属性的问题 [ed332d](https://github.com/youzan/vant/commit/ed332daf319e2005995f279026a57d4f30a339f6)
+- NoticeBar: 修复初始化逻辑执行多次的问题 [0712d9](https://github.com/youzan/vant/commit/0712d920634e7b70b77f49c71337172bf3ece470)
+- Swipe: 修复在 lazy-render 模式下渲染失败的问题 [e06ba4](https://github.com/youzan/vant/commit/e06ba480a9ec02af8659616ff6ceb5155defddad)
+- Swipe: 修复初始化逻辑执行多次的问题 [c94173](https://github.com/youzan/vant/commit/c9417341e0adb681db6108cf1383bab77ab90da9)
+- Tabs: 修复初始化逻辑执行多次的问题 [599e81](https://github.com/youzan/vant/commit/599e817cd4f4239b4a93c75f34118731d47891b5)
+- 包含 `v2.10.14` 版本的所有改动和修复
+
+### [v3.0.0-beta.7](https://github.com/youzan/vant/compare/v2.10.13...v3.0.0-beta.7)
+
+`2020-11-08`
+
+**Bug Fixes**
+
+- Calendar: 修复动态设置 minDate 和 maxDate 时展示错误的问题 [#7412](https://github.com/youzan/vant/issues/7412)
+- DropdownMenu: 修复无法禁用 closeOnClickOutside 属性的问题 [#7473](https://github.com/youzan/vant/issues/7473)
+- Uploader: 修复在 before-read 返回 true 无效的问题 [#7493](https://github.com/youzan/vant/issues/7493)
+- Uploader: 修复在 delete 事件中无法获取 index 的问题 [#7481](https://github.com/youzan/vant/issues/7481)
+- 包含 `v2.10.13` 版本的所有改动和修复
+
+### [v3.0.0-beta.6](https://github.com/youzan/vant/compare/v2.10.12...v3.0.0-beta.6)
+
+`2020-11-01`
+
+**Bug Fixes**
+
+- Swipe: 修复开启 lazy-render 且 loop 为 false 时渲染节点不正确的问题 [#7465](https://github.com/youzan/vant/issues/7465)
+- Swipe: 修复开启 lazy-render 时子节点被重复挂载的问题 [#7466](https://github.com/youzan/vant/issues/7466)
+- Tabs: 修复初始动画错误的问题 [49e877](https://github.com/youzan/vant/commit/49e87756c70b33e1a56620ebee3c0aa53fb9fc86)
+- ActionBar: 修复类型定义不存在的问题 [#7440](https://github.com/youzan/vant/issues/7440) [#7442](https://github.com/youzan/vant/issues/7442)
+- 包含 `v2.10.12` 版本的所有改动和修复
+
+### [v3.0.0-beta.5](https://github.com/youzan/vant/compare/v2.10.11...v3.0.0-beta.5)
+
+`2020-10-24`
+
+**Bug Fixes**
+
+- Swipe: 修复动态插入轮播时无法滚动的问题 [#7366](https://github.com/youzan/vant/issues/7366)
+- Toast: 修复 forbidClick 属性不生效的问题 [#7396](https://github.com/youzan/vant/issues/7396)
+- Toast: 修复 duration 变化未生效的问题 [#7394](https://github.com/youzan/vant/issues/7394)
+- 包含 `v2.10.11` 版本的所有改动和修复
+
+### [v3.0.0-beta.4](https://github.com/youzan/vant/compare/v2.10.10...v3.0.0-beta.4)
+
+`2020-10-18`
+
+**refactor**
+
+- Layout: 默认使用 flex 布局，移除 type 属性 [f7a120](https://github.com/youzan/vant/commit/f7a1208a18f61eaa9dbec80db1c585f19229cd91)
+
+**style**
+
+- Stepper: 布局方式调整为 inline-block [e9c282](https://github.com/youzan/vant/commit/e9c28212358cd0317442051383b92d23441920c6)
+
+**Bug Fixes**
+
+- ContactList: 修复 select 事件重复触发的问题 [1dd408](https://github.com/youzan/vant/commit/1dd4083102272250637d6397bd98355d87d99bf5)
+- Search: 修复布局错误的问题 [9cd48e](https://github.com/youzan/vant/commit/9cd48e0e333fc6f0a2f71b568b7e5b5ca2138bae)
+- Image: 修复图片加载错误时仍会渲染图片节点的问题 [59fb1d](https://github.com/youzan/vant/commit/59fb1d4dfcdc99773642a63c62e6b08baa3fac30)
+- Pagination: 修复 change 事件触发时机错误的问题 [346035](https://github.com/youzan/vant/commit/3460351ce396bb418408ddbfad462ddac8ef9477)
+- Toast: 修复展示时会锁定滚动的问题 [a622ca](https://github.com/youzan/vant/commit/a622caa649baedac7cfe9614ded88e7ec1cd18e1)
+- 包含 `v2.10.10` 版本的所有改动和修复
+
+### [v3.0.0-beta.3](https://github.com/youzan/vant/compare/v2.10.9...v3.0.0-beta.3)
+
+`2020-10-03`
+
+**breaking changes**
+
+- Checkbox: 在 Cell 内部使用时，现在需要手动添加 `@click.stop` 来阻止事件冒泡 [#7023](https://github.com/youzan/vant/issues/7023)
+
+**Feature**
+
+- 新增 Badge 徽标组件 [#6573](https://github.com/youzan/vant/issues/6573)
+- Tab: 增加滑动切换动画 [#1174](https://github.com/youzan/vant/issues/1174)
+- 包含 `v2.10.9` 版本的所有改动和修复
+
+### [v3.0.0-beta.2](https://github.com/youzan/vant/compare/v3.0.0-beta.1...v3.0.0-beta.2)
+
+`2020-09-28`
+
+**Bug Fixes**
+
+- 修复引入 Vant 时提示 'global is not defined' 的问题 [7007fc](https://github.com/youzan/vant/commit/7007fcf9eaea239f5e680068d59d8e9f8202ec3b)
+
+### [v3.0.0-beta.1](https://github.com/youzan/vant/compare/v2.10.8...v3.0.0-beta.1)
+
+`2020-09-28`
+
+**breaking changes**
+
+- DatetimePicker: change 事件的第一个参数调整为当前选中值 [058665](https://github.com/youzan/vant/commit/05866514dbdac098d8210f8b08e2fbc8d3479ada)
+
+**refactor**
+
+使用 Composition API 重构以下组件：
+
+- AddressEdit [749e4a](https://github.com/youzan/vant/commit/749e4ae73b9c07265e81237493b5e7d37afc6255)
+- Calendar [fc50e2](https://github.com/youzan/vant/commit/fc50e26416feb1cbc3d07de23cd39bf6ba57eefc)
+- Checkbox [278ea6](https://github.com/youzan/vant/commit/278ea6a439b65c1bf1ce420ab7619858a739486c)
+- ContactEdit [4f0921](https://github.com/youzan/vant/commit/4f0921cbdffe1f654ce75222027f8b85120ab67b)
+- DatetimePicker [638842](https://github.com/youzan/vant/commit/6388423c9609e099565e51423271e333fab38a55)
+- Field [00dbf2](https://github.com/youzan/vant/commit/00dbf2cc50c44d0ac45bc43daeaa91730b1a6e23)
+- Form [92aac9](https://github.com/youzan/vant/commit/92aac941fc25e028a7631be301ed895edff53487)
+- Radio [aafbcf](https://github.com/youzan/vant/commit/aafbcfcf04e7c0a4b4f5da83291e9b158f2503c3)
+- Tabs [882e3e](https://github.com/youzan/vant/commit/882e3ef5e787e587909bde1064f5dabe3d66ad72)
+
+**Feature**
+
+- Locale: 新增德语语言包 [#7245](https://github.com/youzan/vant/issues/7245)
+- Pagination: 新增多个插槽 [#7222](https://github.com/youzan/vant/issues/7222)
+
+**Bug Fixes**
+
+- Picker: 修复 setIndex 方法无效的问题 [d2a542](https://github.com/youzan/vant/commit/d2a54279766acca3981403c4fb9eb34d3d586643)
+- Dialog: 修复最小高度错误的问题 [bf1f0f](https://github.com/youzan/vant/commit/bf1f0f57eb16e2308b388c4e2ccab46c65f76196)
+- 包含 `v2.10.8` 版本的所有改动和修复
+
+### [v3.0.0-beta.0](https://github.com/youzan/vant/compare/v2.10.7...v3.0.0-beta.0)
+
+`2020-09-18`
+
+**breaking changes**
+
+- Dialog: allow-html 属性的默认值调整为 false [02c7a7](https://github.com/youzan/vant/commit/02c7a75ee3d7725157b744bb710bd879f01a0065)
+- Picker: allow-html 属性的默认值调整为 false [02c7a7](https://github.com/youzan/vant/commit/02c7a75ee3d7725157b744bb710bd879f01a0065)
+
+**refactor**
+
+使用 Composition API 重构以下组件：
+
+- ImagePreview [6ab2b3](https://github.com/youzan/vant/commit/6ab2b3bf1f53dabf272ae3a6d663221236eab47c)
+- Picker [85d0d4](https://github.com/youzan/vant/commit/85d0d423eb33567d74d029991509589237214cf8)
+- Popup [946565](https://github.com/youzan/vant/commit/9465653f429d216bf0f34cb9cf26cc1f51b3e358)
+- Swipe [39c68c](https://github.com/youzan/vant/commit/39c68c993a34f8cfb0de056f0da7edcd01bd6d4d)
+- Uploader [595b06](https://github.com/youzan/vant/commit/595b062c34e34e48b5f8d730dc6b13221fcad841)
+
+**Bug Fixes**
+
+- AddressEdit: 修复 emits 未声明导致 warning 的问题 [1e6a12](https://github.com/youzan/vant/commit/1e6a120b2e48f7262062729260d362c96355eca6)
+- AddressEdit: 修复点击省市区弹窗的蒙层时无法关闭的问题 [02e89a](https://github.com/youzan/vant/commit/02e89a73c57af1e59429ab320c2a13395abc0520)
+- Field: 修复在 iOS 上中文输入过程中触发 input 事件的问题 [#7035](https://github.com/youzan/vant/issues/7035)
+- 包含 `v2.10.7` 版本的所有改动和修复
+
+### [v3.0.0-alpha.5](https://github.com/youzan/vant/compare/v2.10.6...v3.0.0-alpha.5)
+
+`2020-09-13`
+
+**breaking changes**
+
+- Button: native-type 属性的默认值调整为 button [df8059](https://github.com/youzan/vant/commit/df8059eb015f2804433a7306c208a5909a4d46ac)
+
+**refactor**
+
+使用 Composition API 重构以下组件：
+
+- DatetimePicker [60e087](https://github.com/youzan/vant/commit/60e08767b313e90b13c6a4a3246a113367ed09a5)
+- DropdownItem [cd5f5b](https://github.com/youzan/vant/commit/cd5f5bb65544676279e486790761c38a2a9f0fc1)
+- Grid [38740b](https://github.com/youzan/vant/commit/38740b6c1c783d49a2201b24ba51121576e4c643)
+- IndexBar [f94c8c](https://github.com/youzan/vant/commit/f94c8ccbb93f4783814832a9363d663fb4986f10)
+- NumberKeyboard [14c1d4](https://github.com/youzan/vant/commit/14c1d4ea771cd9f01cb282493e57303ced897fa9)
+- PullRefresh [9f632f](https://github.com/youzan/vant/commit/9f632f151e3028adfd376f8ad166bf9d8af356fc)
+- Stepper [a7c285](https://github.com/youzan/vant/commit/a7c28548fcefe48a2ffa95bb0423dee0a48f8e16)
+- SwipeCell [b17c67](https://github.com/youzan/vant/commit/b17c67ab53652a361185934cb4119eca23622d9a)
+
+**Feature**
+
+- Button: 新增 icon-position 属性 [#7174](https://github.com/youzan/vant/issues/7174)
+- slider: 新增 range 属性，支持范围选择 [#7175](https://github.com/youzan/vant/issues/7175)
+- TabbarItem: 新增 @tabbar-item-active-background-color 变量 [#7162](https://github.com/youzan/vant/issues/7162)
+
+**Bug Fixes**
+
+- Sticky: 修复组件销毁时报错的问题 [#7169](https://github.com/youzan/vant/issues/7169)
+
+### [v3.0.0-alpha.4](https://github.com/youzan/vant/compare/v2.10.5...v3.0.0-alpha.4)
+
+`2020-09-06`
+
+**breaking changes**
+
+- Dialog: `before-close` 属性用法调整，不再传入 done 函数，而是通过返回 Promise 来控制
+- SwipeCell: `before-close` 属性不再传入组件实例
+- ImagePreview: 移除 `async-close` 属性，新增 `before-close` 属性
+
+**refactor**
+
+使用 Composition API 重构以下组件：
+
+- Coupon [ec5a75](https://github.com/youzan/vant/commit/ec5a759f684531e7c5ab751d1d746d0e65d26279)
+- Dialog [2b8284](https://github.com/youzan/vant/commit/2b8284a227b6d483685cfa3a70e01774491a2ff9)
+- NumberKeyboard [f735b2](https://github.com/youzan/vant/commit/f735b24a4b71176ce5c214af69b7afc99deab85f)
+- Pagination [1cd918](https://github.com/youzan/vant/commit/1cd918395805f57a60f2cce1f5174b480cfd70f2)
+
+**Bug Fixes**
+
+- Tag: 修复 color 属性不生效的问题 [4b6da2](https://github.com/youzan/vant/commit/4b6da2aab6acae95977579094bc5707345f3d3e9)
+- 修复在 TSX 中使用组件时提示类型错误的问题 [#7076](https://github.com/youzan/vant/issues/7076)
+- 修复全量引入组件时提示类型错误的问题 [#7056](https://github.com/youzan/vant/issues/7056)
+
+### [v3.0.0-alpha.3](https://github.com/youzan/vant/compare/v3.0.0-alpha.2...v3.0.0-alpha.3)
+
+`2020-09-01`
+
+**Feature**
+
+- ActionSheet: 新增 description 插槽 [#7068](https://github.com/youzan/vant/issues/7068)
+- Toast: 使用 composition api 重构 [44aaa4](https://github.com/youzan/vant/commit/44aaa471879ac79b7baee0e07c92d7a71ff7f530)
+
+**Types**
+
+- 修复使用 app.use 注册组件时提示类型错误的问题 [#7056](https://github.com/youzan/vant/issues/7056)
+- 修复 $toast、$dialog 类型不存在的问题 [0acbc6](https://github.com/youzan/vant/commit/0acbc6ec21588686b41f6387d2fdf642ae2c024e)
+
+**Bug Fixes**
+
+- Dialog: 修复 Dialog.close 不生效的问题 [476e16](https://github.com/youzan/vant/commit/476e16ff2d22a5da3ab8b57a6c7789610b008e22)
+- Toast: 修复设置 toast.message 不生效的问题 [dac7fe](https://github.com/youzan/vant/commit/dac7feb919cfc4c3c1b8dc544431eb5547414604)
+
+### [v3.0.0-alpha.2](https://github.com/youzan/vant/compare/v3.0.0-alpha.1...v3.0.0-alpha.2)
+
+`2020-08-28`
+
+**Bug Fixes**
+
+- 修复使用 `yarn add vant@next` 安装失败的问题
+
+### [v3.0.0-alpha.1](https://github.com/youzan/vant/compare/v2.10.3...v3.0.0-alpha.1)
+
+`2020-08-28`
+
+**refactor**
+
+使用 Composition API 重构以下组件：
+
+- ActionBar
+- AddressList
+- Area
+- Badge
+- Button
+- Circle
+- Col
+- Collapse
+- CountDown
+- Image
+- Row
+- List
+- Loading
+- NavBar
+- NoticeBar
+- Progress
+- Rate
+- Sidebar
+- Slider
+- Steps
+- Sticky
+- Tabbar
+
+**Bug Fixes**
+
+- Rate: 修复控制台报 emit warning 提示的问题 [c32fba](https://github.com/youzan/vant/commit/c32fba0f1e7afa657c69c233d644c1994963a638)
+- Button: 修复 click 事件参数丢失的问题 [cea272](https://github.com/youzan/vant/commit/cea2724321daf693a1dd36dd6923c4d28585895a)
+- CellGroup: 修复 attrs 继承错误的问题 [8f978a](https://github.com/youzan/vant/commit/8f978addd49b7d2a5e6fcce0c952fcb05145ad1d)
+- Dialog: 修复部分弹窗相关属性不生效的问题 [af94c9](https://github.com/youzan/vant/commit/af94c92614b78e999e5377208e2c3c3672480210)
+- Image: 修复 loading 图标和 error 图标不展示的问题 [c720ee](https://github.com/youzan/vant/commit/c720eea83170b36e1b2f4eb8bdaff400e88bf714)
+
+### v3.0.0-alpha.0
+
+`2020-08-22`
+
+**主要改动**
+
+- 完成 Vue 3 适配
+- 调整部分组件的 v-model 和 prop.sync 用法，以适配 v-model 语法变更
+- 调整部分组件的 prop 和 event 用法
+- 重命名所有组件的 info 属性为 badge
+- 重命名所有组件的 get-container 属性为 teleport
+- 废弃 SwitchCell 组件
+- 废弃个别 API
+
+**已知问题**
+
+- Lazyload、Panel 和 Sku 组件暂未完成 Vue 3 适配
+
+> 详细改动请参考 [从 v2 升级](https://youzan.github.io/vant/v3/#/zh-CN/migrate-from-v2)。
@@ -0,0 +1,104 @@
+# 贡献指南
+
+### 介绍
+
+感谢你使用 Vant。
+
+以下是关于向 Vant 提交反馈或代码的指南。在向 Vant 提交 issue 或者 PR 之前，请先花几分钟时间阅读以下文字。
+
+### Issue 规范
+
+- 遇到问题时，请先确认这个问题是否已经在 issue 中有记录或者已被修复
+- 提 issue 时，请用简短的语言描述遇到的问题，并添加出现问题时的环境和复现步骤
+
+## 参与开发
+
+### 本地开发
+
+按照下面的步骤操作，即可在本地开发 Vant 组件。
+
+```bash
+# 克隆仓库
+# 默认为 dev 分支，包含 Vant 3 的代码
+# 如果需要在 Vant 2 上进行更改，请基于 2.x 分支进行开发
+git clone git@github.com:youzan/vant.git
+
+# 安装依赖
+cd vant && yarn
+
+# 进入开发模式，浏览器访问 http://localhost:8080
+npm run dev
+```
+
+### 目录结构
+
+项目的主要目录结构如下所示：
+
+```
+vant
+├─ docs            # 文档
+├─ packages        # 基础包
+├─ src             # 组件源代码
+├─ test            # 单测工具类
+└─ vant.config.js  # 文档网站配置
+```
+
+组件代码位于 src 目录下，每个组件一个独立的文件夹。
+
+### 组件目录结构
+
+添加新组件时，请按照下面的目录结构组织文件，并在 `vant.config.js` 中配置组件名称。
+
+```
+src
+└─ button
+   ├─ demo             # 示例代码
+   ├─ test             # 单元测试
+   ├─ Component.ts     # 组件
+   ├─ index.ts         # 组件入口
+   ├─ index.less       # 样式
+   ├─ var.less         # 样式变量
+   ├─ README.md        # 英文文档
+   └─ README.zh-CN.md  # 中文文档
+```
+
+## 提交 PR
+
+### Pull Request 规范
+
+如果你是第一次在 GitHub 上提 Pull Request ，可以阅读下面这两篇文章来学习：
+
+- [如何优雅地在 GitHub 上贡献代码](https://segmentfault.com/a/1190000000736629)
+- [第一次参与开源](https://github.com/firstcontributions/first-contributions/blob/master/translations/README.chs.md)
+
+#### 规范
+
+- 如果遇到问题，建议保持你的 PR 足够小。保证一个 PR 只解决一个问题或只添加一个功能
+- 当新增组件或者修改原有组件时，记得增加或者修改测试代码，保证代码的稳定
+- 在 PR 中请添加合适的描述，并关联相关的 Issue
+
+### Pull Request 流程
+
+1. fork 主仓库，如果已经 fork 过，请同步主仓库的最新代码
+2. 基于 fork 后仓库的 dev 分支新建一个分支，比如 `feature/button_color`
+3. 在新分支上进行开发，开发完成后，提 Pull Request 到主仓库的 dev 分支
+4. Pull Request 会在 Review 通过后被合并到主仓库
+5. 等待 Vant 发布版本，一般是每周一次
+
+### 同步最新代码
+
+提 Pull Request 前，请依照下面的流程同步主仓库的最新代码：
+
+```bash
+# 添加主仓库到 remote，作为 fork 后仓库的上游仓库
+git remote add upstream https://github.com/youzan/vant.git
+
+# 拉取主仓库最新代码
+git fetch upstream
+
+# 切换至 dev 分支
+git checkout dev
+
+# 合并主仓库代码
+git merge upstream/dev
+```
@@ -0,0 +1,60 @@
+# Design Resource
+
+### Intro
+
+You can download Vant's design resources here.
+
+## Resources
+
+### Components (Sketch)
+
+Contains color specifications, font specifications, and component design specifications.
+
+#### Colors
+
+<img src="https://img.yzcdn.cn/vant/color_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+#### Fonts
+
+<img src="https://img.yzcdn.cn/vant/words_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+#### Components
+
+<img src="https://img.yzcdn.cn/vant/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+<a class="design-download" href="https://github.com/youzan/vant/blob/dev/docs/assets/design.sketch?raw=true">Download</a>
+
+### Icons (Sketch)
+
+Contains icon library resources.
+
+<img src="https://img.yzcdn.cn/vant/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+<a class="design-download" href="https://github.com/youzan/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">Download</a>
+
+### Axure
+
+<img src="https://img.yzcdn.cn/vant/vant-axure-0905.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+<a class="design-download" href="https://b.yzcdn.cn/vant/vant-axure-20200905.zip">Download</a>
+
+<style>
+a.design-download {
+  display: inline-block;
+  width: 100px;
+  color: #fff !important;
+  line-height: 40px;
+  text-align: center;
+  background-color: #38f;
+  border-radius: 3px;
+}
+
+a.design-download:hover {
+  color: #fff;
+  opacity: .9;
+}
+
+a.design-download:active {
+  opacity: .7;
+}
+</style>
@@ -0,0 +1,66 @@
+# 设计资源
+
+### 介绍
+
+Vant 是基于有赞 [Zan Design System](https://design.youzan.com/) 视觉规范实现的组件库，在这里可以下载 Vant 的设计资源。
+
+## 设计稿
+
+### 组件设计稿（Sketch）
+
+包含 Sketch 格式的色彩规范、字体规范、组件设计规范。
+
+#### 色彩规范
+
+<img src="https://img.yzcdn.cn/vant/color_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+#### 字体规范
+
+<img src="https://img.yzcdn.cn/vant/words_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+#### 组件规范
+
+<img src="https://img.yzcdn.cn/vant/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+<a class="design-download" href="https://github.com/youzan/vant/blob/dev/docs/assets/design.sketch?raw=true">下载</a>
+
+### 图标设计稿（Sketch）
+
+包含 Sketch 格式的图标库资源。
+
+<img src="https://img.yzcdn.cn/vant/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+<a class="design-download" href="https://github.com/youzan/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">下载</a>
+
+#### 在线资源
+
+Vant 的所有图标都托管在 **iconfont.cn** 上，点此查看：[Vant 图标库](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=31945)。
+
+### Axure 元件库
+
+Axure 元件库，由社区的 [@axure-tczy](https://github.com/axure-tczy) 同学贡献。
+
+<img src="https://img.yzcdn.cn/vant/vant-axure-0905.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+<a class="design-download" href="https://b.yzcdn.cn/vant/vant-axure-20200905.zip">下载</a>
+
+<style>
+a.design-download {
+  display: inline-block;
+  width: 100px;
+  color: #fff !important;
+  line-height: 40px;
+  text-align: center;
+  background-color: #38f;
+  border-radius: 3px;
+}
+
+a.design-download:hover {
+  color: #fff;
+  opacity: .9;
+}
+
+a.design-download:active {
+  opacity: .7;
+}
+</style>
@@ -0,0 +1,63 @@
+<div class="card">
+  <div class="van-doc-intro">
+    <img class="van-doc-intro__logo" style="width: 120px; height: 120px;" src="https://img.yzcdn.cn/vant/logo.png">
+    <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Vant</h2>
+    <p>Mobile UI Components built on Vue</p>
+  </div>
+</div>
+
+### Features
+
+- 65+ Reusable components
+- 1kb Component average size (min+gzip)
+- 90%+ Unit test coverage
+- Extensive documentation and demos
+- Support Vue 2 & Vue 3
+- Support Tree Shaking
+- Support Custom Theme
+- Support i18n
+- Support TS
+- Support SSR
+
+### Quickstart
+
+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).
+
+### Official Ecosystem
+
+| Project | Description |
+| --- | --- |
+| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
+| [vant-demo](https://github.com/youzan/vant-demo) | Collection of Vant demos |
+| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
+| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
+| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
+
+### Community Ecosystem
+
+| Project | Description |
+| --- | --- |
+| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components base on Vant |
+| [mxdi9i7/vant-react](https://github.com/mxdi9i7/vant-react) | Mobile UI Components built on React and TS, inspired by Vant |
+| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
+| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
+
+### 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)
+
+### LICENSE
+
+[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
@@ -0,0 +1,80 @@
+<div class="card">
+  <div class="van-doc-intro">
+    <img class="van-doc-intro__logo" style="width: 120px; height: 120px;" src="https://img.yzcdn.cn/vant/logo.png">
+    <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Vant</h2>
+    <p>轻量、可靠的移动端 Vue 组件库</p>
+  </div>
+</div>
+
+### 介绍
+
+Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。 <br><br>
+
+目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant)、[Vue 3 版本](https://vant-contrib.gitee.io/vant/v3)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。
+
+### 版本提示
+
+你当前浏览的是 **Vant 3.x 版本** 的文档，适用于 Vue 3 开发。如果你在使用 Vue 2，请浏览 [Vant 2 文档](https://vant-contrib.gitee.io/vant)。
+
+### 特性
+
+- 提供 60 多个高质量组件，覆盖移动端各类场景
+- 性能极佳，组件平均体积不到 1kb（min+gzip）
+- 单元测试覆盖率 90%+，提供稳定性保障
+- 完善的中英文文档和示例
+- 支持 Vue 2 & Vue 3
+- 支持按需引入
+- 支持主题定制
+- 支持国际化
+- 支持 TypeScript
+- 支持 SSR
+
+### 快速上手
+
+请阅读[快速上手](#/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 官方团队维护的项目如下：
+
+| 项目 | 描述 |
+| --- | --- |
+| [vant-weapp](https://github.com/youzan/vant-weapp) | Vant 微信小程序版 |
+| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 |
+| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
+| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
+| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+
+### 社区生态
+
+由社区维护的项目如下，欢迎补充：
+
+| 项目 | 描述 |
+| --- | --- |
+| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 移动端组件库 |
+| [mxdi9i7/vant-react](https://github.com/mxdi9i7/vant-react) | 基于 React 和 TS 构建的移动端组件库 |
+| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
+| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
+
+### 链接
+
+- [意见反馈](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)
+
+### 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源
@@ -0,0 +1,241 @@
+# 从 v2 升级
+
+### 介绍
+
+本文档提供了从 Vant 2 到 Vant 3 的升级指南。
+
+### 升级步骤
+
+#### 1. 升级 Vue 3
+
+Vant 3 是基于 Vue 3 开发的，在使用 Vant 3 前，请将项目中的 Vue 升级到 3.0 以上版本。
+
+#### 2. 处理不兼容更新
+
+Vant 2 到 Vant 3 存在一些不兼容更新，请仔细阅读下方的不兼容更新内容，并依次处理。
+
+## 不兼容更新
+
+### 组件命名调整
+
+GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。
+
+```html
+<!-- Vant 2 -->
+<van-goods-action>
+  <van-goods-action-icon text="图标" />
+  <van-goods-action-button text="按钮" />
+</van-goods-action>
+
+<!-- Vant 3 -->
+<van-action-bar>
+  <van-action-bar-icon text="图标" />
+  <van-action-bar-button text="按钮" />
+</van-action-bar>
+```
+
+### 废弃组件
+
+移除 SwitchCell 组件，可以直接使用 Cell 和 Switch 组件代替。
+
+```html
+<!-- Vant 2 -->
+<van-switch-cell title="标题" v-model="checked" />
+
+<!-- Vant 3 -->
+<van-cell center title="标题">
+  <template #right-icon>
+    <van-switch v-model="checked" size="24" />
+  </template>
+</van-cell>
+```
+
+### 弹窗型组件 v-model 变更
+
+为了适配 Vue 3 的 v-model API 用法变更，所有提供 v-model 属性的组件在用法上有一定调整。以下弹窗类组件的 `v-model` 被重命名为 `v-model:show`：
+
+- ActionSheet
+- Calendar
+- Dialog
+- ImagePreview
+- Notify
+- Popover
+- Popup
+- ShareSheet
+
+```html
+<!-- Vant 2 -->
+<van-popup v-model="show" />
+
+<!-- Vant 3 -->
+<van-popup v-model:show="show" />
+```
+
+### 表单型组件 v-model 内部值变更
+
+以下表单型组件 v-model 对应的 prop 重命名为 `modelValue`，event 重命名为 `update:modelValue`：
+
+- Checkbox
+- CheckboxGroup
+- DatetimePicker
+- DropdownItem
+- Field
+- Radio
+- RadioGroup
+- Search
+- Stepper
+- Switch
+- Sidebar
+- Uploader
+
+```html
+<!-- Vant 2 -->
+<van-field :value="value" @input="onInput" />
+
+<!-- Vant 3 -->
+<van-field :model-value="value" @update:model-value="onInput" />
+```
+
+### 其他 v-model 调整
+
+- Circle: `v-model` 重命名为 `v-model:currentRate`
+- CouponList: `v-model` 重命名为 `v-model:code`
+- List: `v-model` 重命名为 `v-model:loading`，`error.sync` 重命名为 `v-model:error`
+- Tabs: `v-model` 重命名为 `v-model:active`
+- TreeSelect: `active-id.sync` 重命名为 `v-model:active-id`
+- TreeSelect: `main-active-index.sync` 重命名为 `v-model:main-active-index`
+
+### 徽标属性命名调整
+
+在之前的版本中，我们通过 info 属性来展示图标右上角的徽标信息，为了更符合社区的命名习惯，我们将这个属性重命名为 badge，影响以下组件：
+
+- Tab
+- Icon
+- GridItem
+- TreeSelect
+- TabbarItem
+- SidebarItem
+- GoodsActionIcon
+
+同时内部使用的 Info 组件也会重命名为 Badge。
+
+```html
+<!-- Vant 2 -->
+<van-icon info="5" />
+
+<!-- Vant 3 -->
+<van-icon badge="5" />
+```
+
+### 重命名 get-container 属性
+
+Vue 3.0 中增加了 `Teleport` 组件，提供将组件渲染到任意 DOM 位置的能力，Vant 2 也通过 `get-container` 属性提供了类似的能力。为了与官方的 API 保持一致，Vant 中的 `get-container` 属性将重命名为 `teleport`。
+
+```html
+<!-- Vant 2 -->
+<template>
+  <van-popup get-container="body" />
+  <van-popup :get-container="getContainer" />
+</template>
+<script>
+  export default {
+    methods: {
+      getContainer() {
+        return document.querySelector('#container');
+      },
+    },
+  };
+</script>
+
+<!-- Vant 3 -->
+<template>
+  <van-popup teleport="body" />
+  <van-popup :teleport="container" />
+</template>
+<script>
+  export default {
+    beforeCreate() {
+      this.container = document.querySelector('#container');
+    },
+  };
+</script>
+```
+
+### API 调整
+
+#### Area
+
+- `change` 事件参数不再传入组件实例
+
+#### Button
+
+- 蓝色按钮对应的类型由 `info` 调整为 `primary`
+- 绿色按钮对应的类型由 `primary` 调整为 `success`
+- `native-type` 的默认值由 `submit` 调整为 `button`
+
+#### Checkbox
+
+- 在 Cell 内部使用时，现在需要手动添加 `@click.stop` 来阻止事件冒泡
+
+#### Dialog
+
+- 默认关闭 `allow-html` 属性
+- `before-close` 属性用法调整，不再传入 done 函数，而是通过返回 Promise 来控制
+
+#### DatetimePicker
+
+- `change` 事件参数不再传入组件实例
+
+#### ImagePreview
+
+- 移除 `async-close` 属性，可以使用新增的 `before-close` 属性代替
+
+#### Picker
+
+- `change` 事件参数不再传入组件实例
+- 默认关闭 `allow-html` 属性
+- 默认开启 `show-toolbar` 属性
+- 级联选择下，`confirm`、`change` 事件返回的回调参数将包含为完整的选项对象。
+
+#### Popover
+
+- `trigger` 属性的默认值调整为 `click`
+
+#### Stepper
+
+- `async-change` 属性重命名为 `before-change`，并调整使用方法
+
+#### SwipeCell
+
+- `open` 事件的 `detail` 参数重命名为 `name`
+- `on-close` 属性重命名为 `before-close`，并调整参数结构
+- `before-close` 属性不再传入组件实例
+
+#### Toast
+
+- `mask` 属性重命名为 `overlay`
+
+#### TreeSelect
+
+- `navclick` 事件重命名为 `click-nav`
+- `itemclick` 事件重命名为 `click-item`
+
+### 注册全局方法
+
+Vant 2 中默认提供了 `$toast`、`$dialog` 等全局方法，但 Vue 3.0 不再支持直接在 Vue 的原型链上挂载方法，因此从 Vant 3.0 开始，使用全局方法前必须先通过 `app.use` 将组件注册到对应的 app 上。
+
+```js
+import { Toast, Dialog, Notify } from 'vant';
+
+// 将 Toast 等组件注册到 app 上
+app.use(Toast);
+app.use(Dialog);
+app.use(Notify);
+
+// app 内的子组件可以直接调用 $toast 等方法
+export default {
+  mounted() {
+    this.$toast('提示文案');
+  },
+};
+```
@@ -0,0 +1,160 @@
+# Quickstart
+
+## Install
+
+### npm
+
+```bash
+# Install Vant 2 for Vue 2 project
+npm i vant -S
+
+# Install Vant 3 for Vue 3 project
+npm i vant@next -S
+```
+
+### CDN
+
+The easiest way to use Vant is to include a CDN link in the html file, after which you can access all components via the global variable `vant`.
+
+```html
+<!-- import style -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"
+/>
+
+<!-- import script -->
+<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
+<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
+
+<script>
+  // Render the Button component
+  const app = Vue.createApp({
+    template: `<van-button>Button</van-button>`,
+  });
+  app.use(vant);
+
+  // Register Lazyload directive
+  app.use(vant.Lazyload);
+
+  // Call function component
+  vant.Toast('Message');
+
+  app.mount('#app');
+</script>
+```
+
+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/)
+
+### CLI
+
+We recommend to use [Vue Cli](https://cli.vuejs.org/) to create a new project.
+
+```bash
+# Install Vue Cli
+npm install -g @vue/cli
+
+# Create a project
+vue create hello-world
+
+# Open GUI
+vue ui
+```
+
+![](https://img.yzcdn.cn/vant/vue-cli-demo-201809030812.png)
+
+In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to the dependencies.
+
+## Usage
+
+### 1. Import on demand
+
+Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand.
+
+```bash
+# Install plugin
+npm i babel-plugin-import -D
+```
+
+Set babel config in .babelrc or babel.config.js:
+
+```json
+{
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "vant",
+        "libraryDirectory": "es",
+        "style": true
+      }
+    ]
+  ]
+}
+```
+
+Then you can import components from vant:
+
+```js
+// Input
+import { Button } from 'vant';
+
+// Output
+import Button from 'vant/es/button';
+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
+
+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
+
+```js
+import { createApp } from 'vue';
+import Vant from 'vant';
+import 'vant/lib/index.css';
+
+const app = createApp();
+app.use(Vant);
+```
+
+> If you configured babel-plugin-import, you won't be allowed to import all components.
@@ -0,0 +1,240 @@
+# 快速上手
+
+### 介绍
+
+通过本章节你可以了解到 Vant 的安装方法和基本使用姿势。
+
+## 安装
+
+### 通过 npm 安装
+
+在现有项目中使用 Vant 时，可以通过 `npm` 或 `yarn` 进行安装：
+
+```bash
+# Vue 2 项目，安装 Vant 2：
+npm i vant -S
+
+# Vue 3 项目，安装 Vant 3：
+npm i vant@next -S
+```
+
+### 通过 CDN 安装
+
+使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 `vant` 访问到所有组件。
+
+```html
+<!-- 引入样式文件 -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"
+/>
+
+<!-- 引入 Vue 和 Vant 的 JS 文件 -->
+<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
+<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
+
+<script>
+  // 在 #app 标签下渲染一个按钮组件
+  const app = Vue.createApp({
+    template: `<van-button>按钮</van-button>`,
+  });
+  app.use(vant);
+
+  // 通过 CDN 引入时不会自动注册 Lazyload 组件
+  // 可以通过下面的方式手动注册
+  app.use(vant.Lazyload);
+
+  // 调用函数组件，弹出一个 Toast
+  vant.Toast('提示');
+
+  app.mount('#app');
+</script>
+```
+
+你可以通过以下免费 CDN 服务来使用 Vant:
+
+- [jsdelivr](https://www.jsdelivr.com/package/npm/vant)
+- [cdnjs](https://cdnjs.com/libraries/vant)
+- [unpkg](https://unpkg.com/)
+
+### 通过脚手架安装
+
+在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目并安装 Vant。
+
+```bash
+# 安装 Vue Cli
+npm install -g @vue/cli
+
+# 创建一个项目
+vue create hello-world
+
+# 创建完成后，可以通过命令打开图形化界面，如下图所示
+vue ui
+```
+
+![](https://img.yzcdn.cn/vant/vue-cli-demo-201809032000.png)
+
+在图形化界面中，点击 `依赖` -> `安装依赖`，然后将 `vant` 添加到依赖中即可。
+
+## 示例
+
+### 示例工程
+
+我们提供了丰富的[示例工程](https://github.com/youzan/vant-demo)，通过示例工程你可以了解如下内容：
+
+- 基于 Vue Cli 和 Vant 搭建应用
+- 基于 Nuxt 和 Vant 搭建应用
+- 配置按需引入组件
+- 配置基于 Rem 的适配方案
+- 配置基于 Viewport 的适配方案
+- 配置基于 TypeScript 的工程
+- 配置自定义主题色方案
+
+## 引入组件
+
+### 方式一. 通过 babel 插件按需引入组件
+
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。
+
+```bash
+# 安装插件
+npm i babel-plugin-import -D
+```
+
+在.babelrc 或 babel.config.js 中添加配置：
+
+```json
+{
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "vant",
+        "libraryDirectory": "es",
+        "style": true
+      }
+    ]
+  ]
+}
+```
+
+接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入的形式。
+
+```js
+// 原始代码
+import { Button } from 'vant';
+
+// 编译后代码
+import Button from 'vant/es/button';
+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 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
+
+```js
+import { createApp } from 'vue';
+import Vant from 'vant';
+import 'vant/lib/index.css';
+
+const app = createApp();
+app.use(Vant);
+```
+
+> Tips: 配置按需引入后，将不允许直接导入所有组件。
+
+## 常见问题
+
+### 如何自定义 Vant 组件的样式？
+
+#### 1. 主题定制
+
+Vant 基于 CSS 变量提供了主题定制的能力，可以对组件样式进行统一修改，详见 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件。
+
+#### 2. 覆盖默认样式
+
+如果主题定制不能满足你的需求，也可以通过**自定义样式类**来覆盖默认样式，参考下面的示例：
+
+```html
+<template>
+  <van-button class="my-button">按钮</van-button>
+</template>
+
+<style>
+  /** 覆盖 Button 最外层元素的样式 */
+  .my-button {
+    width: 200px;
+  }
+
+  /** 覆盖 Button 内部子元素的样式 */
+  .my-button .van-button__text {
+    color: red;
+  }
+</style>
+```
+
+### 在 HTML 中无法正确渲染组件？
+
+在 HTML 中使用 Vant 组件时，你可能会碰到部分示例代码无法正确渲染的情况，比如下面的用法：
+
+```html
+<van-cell-group>
+  <van-cell title="单元格" value="内容" />
+  <van-cell title="单元格" value="内容" />
+</van-cell-group>
+```
+
+这是因为 HTML 并不支持自闭合的自定义元素，也就是说 `<van-cell />` 这样的语法是不被识别的，使用完整的闭合标签可以避免这个问题：
+
+```html
+<van-cell-group>
+  <van-cell title="单元格" value="内容"></van-cell>
+  <van-cell title="单元格" value="内容"></van-cell>
+</van-cell-group>
+```
+
+在单文件组件、字符串模板和 JSX 中可以使用自闭合的自定义元素，因此不会出现这个问题。
@@ -0,0 +1,204 @@
+# 风格指南
+
+### 介绍
+
+在参与 Vant 开发时，请遵守约定的单文件组件风格指南，指南内容节选自 [Vue 官方风格指南](https://v3.cn.vuejs.org/style-guide/)。
+
+### 组件数据
+
+组件的 data 必须是一个函数。
+
+```js
+// bad
+export default {
+  data: {
+    foo: 'bar',
+  },
+};
+
+// good
+export default {
+  data() {
+    return {
+      foo: 'bar',
+    };
+  },
+};
+```
+
+### 单文件组件文件名称
+
+单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
+
+```
+// bad
+mycomponent.vue
+myComponent.vue
+
+// good
+my-component.vue
+MyComponent.vue
+```
+
+### 紧密耦合的组件名
+
+和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
+
+```
+// bad
+components/
+|- TodoList.vue
+|- TodoItem.vue
+└─ TodoButton.vue
+
+// good
+components/
+|- TodoList.vue
+|- TodoListItem.vue
+└─ TodoListItemButton.vue
+```
+
+### 自闭合组件
+
+在单文件组件中没有内容的组件应该是自闭合的。
+
+```html
+<!-- bad -->
+<my-component></my-component>
+
+<!-- good -->
+<my-component />
+```
+
+### Prop 名大小写
+
+在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case。
+
+```js
+// bad
+export default {
+  props: {
+    'greeting-text': String,
+  },
+};
+
+// good
+export default {
+  props: {
+    greetingText: String,
+  },
+};
+```
+
+```html
+<!-- bad -->
+<welcome-message greetingText="hi" />
+
+<!-- good -->
+<welcome-message greeting-text="hi" />
+```
+
+### 指令缩写
+
+指令缩写，用 `:` 表示 `v-bind:` ，用 `@` 表示 `v-on:`
+
+```html
+<!-- bad -->
+<input v-bind:value="value" v-on:input="onInput" />
+
+<!-- good -->
+<input :value="value" @input="onInput" />
+```
+
+### Props 顺序
+
+标签的 Props 应该有统一的顺序，依次为指令、属性和事件。
+
+```html
+<my-component
+  v-if="if"
+  v-show="show"
+  v-model="value"
+  ref="ref"
+  :key="key"
+  :text="text"
+  @input="onInput"
+  @change="onChange"
+/>
+```
+
+### 组件选项的顺序
+
+组件选项应该有统一的顺序。
+
+```js
+export default {
+  name: '',
+
+  components: {},
+
+  props: {},
+
+  emits: [],
+
+  setup() {},
+
+  data() {},
+
+  computed: {},
+
+  watch: {},
+
+  created() {},
+
+  mounted() {},
+
+  unmounted() {},
+
+  methods: {},
+};
+```
+
+### 组件选项中的空行
+
+组件选项较多时，建议在属性之间添加空行。
+
+```js
+export default {
+  computed: {
+    formattedValue() {
+      // ...
+    },
+
+    styles() {
+      // ...
+    },
+  },
+
+  methods: {
+    onInput() {
+      // ...
+    },
+
+    onChange() {
+      // ...
+    },
+  },
+};
+```
+
+### 单文件组件顶级标签的顺序
+
+单文件组件应该总是让顶级标签的顺序保持一致，且标签之间留有空行。
+
+```html
+<template> ... </template>
+
+<script>
+  /* ... */
+</script>
+
+<style>
+  /* ... */
+</style>
+```
@@ -0,0 +1,215 @@
+# Custom Theme
+
+### Deprecated
+
+This document is deprecated. Vant provides a more convenient [ConfigProvider](#/en-US/config-provider) component for theme configuration. Less variables **will be removed in the next major version**.
+
+### Intro
+
+Vant use [Less](http://lesscss.org/) as css preprocessor，you can override the default less variables to custom theme.
+
+### Less variables
+
+There are some [basic variables](<(https://github.com/youzan/vant/blob/dev/packages/vant/src/style/var.less)>) below, for component less variables, please refer to the documentation of each component, or view the `var.less` file in the component source directory.
+
+```less
+// Color Palette
+@black: #000;
+@white: #fff;
+@gray-1: #f7f8fa;
+@gray-2: #f2f3f5;
+@gray-3: #ebedf0;
+@gray-4: #dcdee0;
+@gray-5: #c8c9cc;
+@gray-6: #969799;
+@gray-7: #646566;
+@gray-8: #323233;
+@red: #ee0a24;
+@blue: #1989fa;
+@orange: #ff976a;
+@orange-dark: #ed6a0c;
+@orange-light: #fffbe8;
+@green: #07c160;
+
+// Gradient Colors
+@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+
+// Component Colors
+@text-color: @gray-8;
+@active-color: @gray-2;
+@active-opacity: 0.7;
+@disabled-opacity: 0.5;
+@background-color: @gray-1;
+@background-color-light: #fafafa;
+@text-link-color: #576b95;
+
+// Padding
+@padding-base: 4px;
+@padding-xs: @padding-base * 2;
+@padding-sm: @padding-base * 3;
+@padding-md: @padding-base * 4;
+@padding-lg: @padding-base * 6;
+@padding-xl: @padding-base * 8;
+
+// Font
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+@font-weight-bold: 500;
+@line-height-xs: 14px;
+@line-height-sm: 18px;
+@line-height-md: 20px;
+@line-height-lg: 22px;
+@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
+  'Microsoft Yahei', sans-serif;
+@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
+  sans-serif;
+
+// Animation
+@animation-duration-base: 0.3s;
+@animation-duration-fast: 0.2s;
+@animation-timing-function-enter: ease-out;
+@animation-timing-function-leave: ease-in;
+
+// Border
+@border-color: @gray-3;
+@border-width-base: 1px;
+@border-radius-sm: 2px;
+@border-radius-md: 4px;
+@border-radius-lg: 8px;
+@border-radius-max: 999px;
+```
+
+## How to custom theme
+
+### Step 1: import less file
+
+First you should import the less source file to your project. you can use babel-plugin-import to automatically import or just manually import less file.
+
+#### Automatically import style
+
+Configure babel plugin in babel.config.js, if you are using babel6, please manually import less file.
+
+```js
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'vant',
+        libraryDirectory: 'es',
+        // specify less file path
+        style: (name) => `${name}/style/less`,
+      },
+      'vant',
+    ],
+  ],
+};
+```
+
+#### Manually import style
+
+```js
+// import all styles
+import 'vant/lib/index.less';
+
+// import style of single component
+import 'vant/lib/button/style/less';
+```
+
+### Step 2: modify less variables
+
+Use [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) provided by less.js to modify less variables，webpack config for reference:
+
+```js
+// webpack.config.js
+module.exports = {
+  rules: [
+    {
+      test: /\.less$/,
+      use: [
+        // ...other loaders
+        {
+          loader: 'less-loader',
+          options: {
+            lessOptions: {
+              modifyVars: {
+                // override with less vars
+                'text-color': '#111',
+                'border-color': '#eee',
+                // or override with less file
+                hack: `true; @import "your-less-file-path.less";`,
+              },
+            },
+          },
+        },
+      ],
+    },
+  ],
+};
+```
+
+If you build a project by vue-cli,it can be configured in `vue.config.js`:
+
+```js
+// vue.config.js
+module.exports = {
+  css: {
+    loaderOptions: {
+      less: {
+        lessOptions: {
+          modifyVars: {
+            // override with less vars
+            'text-color': '#111',
+            'border-color': '#eee',
+            // or override with less file
+            hack: `true; @import "your-less-file-path.less";`,
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+### Vite
+
+Add the following config in `vite.config.js`.
+
+```js
+// vite.config.js
+import vue from '@vitejs/plugin-vue';
+import styleImport from 'vite-plugin-style-import';
+
+export default {
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+        modifyVars: {
+          'text-color': '#111',
+          'border-color': '#eee',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: [{ find: /^~/, replacement: '' }],
+  },
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [
+        {
+          libraryName: 'vant',
+          esModule: true,
+          resolveStyle: (name) => `vant/es/${name}/style/less`,
+        },
+      ],
+    }),
+  ],
+};
+```
@@ -0,0 +1,225 @@
+# 定制主题
+
+### 废弃提示
+
+本文档已废弃，Vant 提供了更方便的 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行主题配置。基于 Less 变量进行定制的方式**将在下个大版本废弃**。
+
+### 介绍
+
+Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。
+
+### 示例工程
+
+我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为 [Vant Demo](https://github.com/youzan/vant-demo)，其中包含了定制主题的基本配置，可以作为参考。
+
+### 样式变量
+
+Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。
+
+下面是所有的[基础样式变量](https://github.com/youzan/vant/blob/dev/packages/vant/src/style/var.less)，组件的样式变量请参考各个组件的文档，或查看组件源码目录下的 `var.less` 文件。
+
+```less
+// Color Palette
+@black: #000;
+@white: #fff;
+@gray-1: #f7f8fa;
+@gray-2: #f2f3f5;
+@gray-3: #ebedf0;
+@gray-4: #dcdee0;
+@gray-5: #c8c9cc;
+@gray-6: #969799;
+@gray-7: #646566;
+@gray-8: #323233;
+@red: #ee0a24;
+@blue: #1989fa;
+@orange: #ff976a;
+@orange-dark: #ed6a0c;
+@orange-light: #fffbe8;
+@green: #07c160;
+
+// Gradient Colors
+@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+
+// Component Colors
+@text-color: @gray-8;
+@active-color: @gray-2;
+@active-opacity: 0.7;
+@disabled-opacity: 0.5;
+@background-color: @gray-1;
+@background-color-light: #fafafa;
+@text-link-color: #576b95;
+
+// Padding
+@padding-base: 4px;
+@padding-xs: @padding-base * 2;
+@padding-sm: @padding-base * 3;
+@padding-md: @padding-base * 4;
+@padding-lg: @padding-base * 6;
+@padding-xl: @padding-base * 8;
+
+// Font
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+@font-weight-bold: 500;
+@line-height-xs: 14px;
+@line-height-sm: 18px;
+@line-height-md: 20px;
+@line-height-lg: 22px;
+@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
+  'Microsoft Yahei', sans-serif;
+@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
+  sans-serif;
+
+// Animation
+@animation-duration-base: 0.3s;
+@animation-duration-fast: 0.2s;
+@animation-timing-function-enter: ease-out;
+@animation-timing-function-leave: ease-in;
+
+// Border
+@border-color: @gray-3;
+@border-width-base: 1px;
+@border-radius-sm: 2px;
+@border-radius-md: 4px;
+@border-radius-lg: 8px;
+@border-radius-max: 999px;
+```
+
+## 定制方法
+
+### 步骤一 引入样式源文件
+
+定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。
+
+#### 按需引入样式（推荐）
+
+在 babel.config.js 中配置按需引入样式源文件，注意 babel 6 不支持按需引入样式，请手动引入样式。
+
+```js
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'vant',
+        libraryDirectory: 'es',
+        // 指定样式路径
+        style: (name) => `${name}/style/less`,
+      },
+      'vant',
+    ],
+  ],
+};
+```
+
+#### 手动引入样式
+
+```js
+// 引入全部样式
+import 'vant/lib/index.less';
+
+// 引入单个组件样式
+import 'vant/lib/button/style/less';
+```
+
+### 步骤二 修改样式变量
+
+使用 Less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 即可对变量进行修改，下面是参考的 webpack 配置。
+
+```js
+// webpack.config.js
+module.exports = {
+  rules: [
+    {
+      test: /\.less$/,
+      use: [
+        // ...其他 loader 配置
+        {
+          loader: 'less-loader',
+          options: {
+            // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
+            lessOptions: {
+              modifyVars: {
+                // 直接覆盖变量
+                'text-color': '#111',
+                'border-color': '#eee',
+                // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+                hack: `true; @import "your-less-file-path.less";`,
+              },
+            },
+          },
+        },
+      ],
+    },
+  ],
+};
+```
+
+如果 vue-cli 搭建的项目，可以在 `vue.config.js` 中进行配置。
+
+```js
+// vue.config.js
+module.exports = {
+  css: {
+    loaderOptions: {
+      less: {
+        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
+        lessOptions: {
+          modifyVars: {
+            // 直接覆盖变量
+            'text-color': '#111',
+            'border-color': '#eee',
+            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+            hack: `true; @import "your-less-file-path.less";`,
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+### Vite 项目
+
+如果是 vite 项目，可以跳过以上步骤，直接在 `vite.config.js` 中添加如下配置即可。
+
+```js
+// vite.config.js
+import vue from '@vitejs/plugin-vue';
+import styleImport from 'vite-plugin-style-import';
+
+export default {
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+        // 覆盖样式变量
+        modifyVars: {
+          'text-color': '#111',
+          'border-color': '#eee',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: [{ find: /^~/, replacement: '' }],
+  },
+  plugins: [
+    vue(),
+    // 按需引入样式源文件
+    styleImport({
+      libs: [
+        {
+          libraryName: 'vant',
+          esModule: true,
+          resolveStyle: (name) => `vant/es/${name}/style/less`,
+        },
+      ],
+    }),
+  ],
+};
+```
@@ -0,0 +1,85 @@
+# useClickAway
+
+### Intro
+
+Triggers a callback when user clicks outside of the target element.
+
+## Usage
+
+### Basic Usage
+
+```html
+<div ref="root" />
+```
+
+```js
+import { ref } from 'vue';
+import { useClickAway } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    useClickAway(root, () => {
+      console.log('click outside!');
+    });
+
+    return { root };
+  },
+};
+```
+
+### Custom Event
+
+```html
+<div ref="root" />
+```
+
+```js
+import { ref } from 'vue';
+import { useClickAway } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    useClickAway(
+      root,
+      () => {
+        console.log('touch outside!');
+      },
+      { eventName: 'touchstart' }
+    );
+
+    return { root };
+  },
+};
+```
+
+## API
+
+### Type Declarations
+
+```ts
+type Options = {
+  eventName?: string;
+};
+
+function useClickAway(
+  target: Element | Ref<Element | undefined>,
+  listener: EventListener,
+  options?: Options
+): void;
+```
+
+### Params
+
+| Name | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| target | Target element | _Element \| Ref\<Element>_ | - |
+| listener | Callback function when the outside is clicked | _EventListener_ | - |
+| options | Options | _Options_ | `{ eventName: 'click' }` |
+
+### Options
+
+| Name      | Description | Type     | Default Value |
+| --------- | ----------- | -------- | ------------- |
+| eventName | Event name  | _string_ | `click`       |
@@ -0,0 +1,87 @@
+# useClickAway
+
+### 介绍
+
+监听点击元素外部的事件。
+
+## 代码演示
+
+### 基本用法
+
+```html
+<div ref="root" />
+```
+
+```js
+import { ref } from 'vue';
+import { useClickAway } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    useClickAway(root, () => {
+      console.log('click outside!');
+    });
+
+    return { root };
+  },
+};
+```
+
+### 自定义事件
+
+通过 `eventName` 选项可以自定义需要监听的事件类型。
+
+```html
+<div ref="root" />
+```
+
+```js
+import { ref } from 'vue';
+import { useClickAway } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    useClickAway(
+      root,
+      () => {
+        console.log('touch outside!');
+      },
+      { eventName: 'touchstart' }
+    );
+
+    return { root };
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+type Options = {
+  eventName?: string;
+};
+
+function useClickAway(
+  target: Element | Ref<Element | undefined>,
+  listener: EventListener,
+  options?: Options
+): void;
+```
+
+### 参数
+
+| 参数     | 说明                     | 类型                       | 默认值 |
+| -------- | ------------------------ | -------------------------- | ------ |
+| target   | 绑定事件的元素           | _Element \| Ref\<Element>_ | -      |
+| listener | 点击外部时触发的回调函数 | _EventListener_            | -      |
+| options  | 可选的配置项             | _Options_                  | 见下表 |
+
+### Options
+
+| 参数      | 说明           | 类型     | 默认值  |
+| --------- | -------------- | -------- | ------- |
+| eventName | 监听的事件类型 | _string_ | `click` |
@@ -0,0 +1,116 @@
+# useCountDown
+
+### Intro
+
+Used to manage the countdown.
+
+## Usage
+
+### Basic Usage
+
+```html
+<span>Total time：{{ current.total }}</span>
+<span>Remain days：{{ current.days }}</span>
+<span>Remain hours：{{ current.hours }}</span>
+<span>Remain minutes：{{ current.minutes }}</span>
+<span>Remain seconds：{{ current.seconds }}</span>
+<span>Remain milliseconds：{{ current.milliseconds }}</span>
+```
+
+```js
+import { useCountDown } from '@vant/use';
+
+export default {
+  setup() {
+    const countDown = useCountDown({
+      time: 24 * 60 * 60 * 1000,
+    });
+
+    countDown.start();
+
+    return {
+      current: countDown.current,
+    };
+  },
+};
+```
+
+### Millisecond
+
+```js
+import { useCountDown } from '@vant/use';
+
+export default {
+  setup() {
+    const countDown = useCountDown({
+      time: 24 * 60 * 60 * 1000,
+      millisecond: true,
+    });
+    countDown.start();
+
+    return {
+      current: countDown.current,
+    };
+  },
+};
+```
+
+## API
+
+### Type Declarations
+
+```ts
+type CurrentTime = {
+  days: number;
+  hours: number;
+  total: number;
+  minutes: number;
+  seconds: number;
+  milliseconds: number;
+};
+
+type CountDown = {
+  start: () => void;
+  pause: () => void;
+  reset: (totalTime: number) => void;
+  current: ComputedRef<CurrentTime>;
+};
+
+type UseCountDownOptions = {
+  time: number;
+  millisecond?: boolean;
+  onChange?: (current: CurrentTime) => void;
+  onFinish?: () => void;
+};
+
+function useCountDown(options: UseCountDownOptions): CountDown;
+```
+
+### Params
+
+| Name | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| time | Total time, unit milliseconds | _number_ | - |
+| millisecond | Whether to enable millisecond render | _boolean_ | `false` |
+| onChange | Triggered when count down changed | _(current: CurrentTime) => void_ | - |
+| onFinish | Triggered when count down finished | - |
+
+### Return Value
+
+| Name    | Description         | Type                    |
+| ------- | ------------------- | ----------------------- |
+| current | Current remain time | _CurrentTime_           |
+| start   | Start count down    | _() => void_            |
+| pause   | Pause count down    | _() => void_            |
+| reset   | Reset count down    | _(time?: number): void_ |
+
+### CurrentTime Structure
+
+| Name         | Description                   | Type     |
+| ------------ | ----------------------------- | -------- |
+| total        | Total time, unit milliseconds | _number_ |
+| days         | Remain days                   | _number_ |
+| hours        | Remain hours                  | _number_ |
+| minutes      | Remain minutes                | _number_ |
+| seconds      | Remain seconds                | _number_ |
+| milliseconds | Remain milliseconds           | _number_ |
@@ -0,0 +1,120 @@
+# useCountDown
+
+### 介绍
+
+提供倒计时管理能力。
+
+## 代码演示
+
+### 基本用法
+
+```html
+<span>总时间：{{ current.total }}</span>
+<span>剩余天数：{{ current.days }}</span>
+<span>剩余小时：{{ current.hours }}</span>
+<span>剩余分钟：{{ current.minutes }}</span>
+<span>剩余秒数：{{ current.seconds }}</span>
+<span>剩余毫秒：{{ current.milliseconds }}</span>
+```
+
+```js
+import { useCountDown } from '@vant/use';
+
+export default {
+  setup() {
+    const countDown = useCountDown({
+      // 倒计时 24 小时
+      time: 24 * 60 * 60 * 1000,
+    });
+
+    // 开始倒计时
+    countDown.start();
+
+    return {
+      current: countDown.current,
+    };
+  },
+};
+```
+
+### 毫秒级渲染
+
+倒计时默认每秒渲染一次，设置 millisecond 选项可以开启毫秒级渲染。
+
+```js
+import { useCountDown } from '@vant/use';
+
+export default {
+  setup() {
+    const countDown = useCountDown({
+      time: 24 * 60 * 60 * 1000,
+      millisecond: true,
+    });
+    countDown.start();
+
+    return {
+      current: countDown.current,
+    };
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+type CurrentTime = {
+  days: number;
+  hours: number;
+  total: number;
+  minutes: number;
+  seconds: number;
+  milliseconds: number;
+};
+
+type CountDown = {
+  start: () => void;
+  pause: () => void;
+  reset: (totalTime: number) => void;
+  current: ComputedRef<CurrentTime>;
+};
+
+type UseCountDownOptions = {
+  time: number;
+  millisecond?: boolean;
+  onChange?: (current: CurrentTime) => void;
+  onFinish?: () => void;
+};
+
+function useCountDown(options: UseCountDownOptions): CountDown;
+```
+
+### 参数
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| time | 倒计时时长，单位毫秒 | _number_ | - |
+| millisecond | 是否开启毫秒级渲染 | _boolean_ | `false` |
+| onChange | 倒计时改变时触发的回调函数 | _(current: CurrentTime) => void_ | - |
+| onFinish | 倒计时结束时触发的回调函数 | - |
+
+### 返回值
+
+| 参数    | 说明                               | 类型                    |
+| ------- | ---------------------------------- | ----------------------- |
+| current | 当前剩余的时间                     | _CurrentTime_           |
+| start   | 开始倒计时                         | _() => void_            |
+| pause   | 暂停倒计时                         | _() => void_            |
+| reset   | 重置倒计时，支持传入新的倒计时时长 | _(time?: number): void_ |
+
+### CurrentTime 格式
+
+| 名称         | 说明                   | 类型     |
+| ------------ | ---------------------- | -------- |
+| total        | 剩余总时间（单位毫秒） | _number_ |
+| days         | 剩余天数               | _number_ |
+| hours        | 剩余小时               | _number_ |
+| minutes      | 剩余分钟               | _number_ |
+| seconds      | 剩余秒数               | _number_ |
+| milliseconds | 剩余毫秒               | _number_ |
@@ -0,0 +1,50 @@
+# useCustomFieldValue
+
+### Intro
+
+Used to custom Field value.
+
+## Usage
+
+### Basic Usage
+
+If you want to custom Form items, you can insert your component into the `input` slot of the Field component, and call the `useCustomFieldValue` method inside your custom component.
+
+#### MyComponent
+
+```js
+// MyComponent.vue
+import { useCustomFieldValue } from '@vant/use';
+
+export default {
+  setup() {
+    useCustomFieldValue(() => 'Some value');
+  },
+};
+```
+
+#### Form
+
+```html
+<van-form>
+  <van-field name="my-field" label="Custom Field">
+    <template #input>
+      <my-component />
+    </template>
+  </van-field>
+</van-form>
+```
+
+## API
+
+### Type Declarations
+
+```ts
+function useCustomFieldValue(customValue: () => unknown): void;
+```
+
+### Params
+
+| Name        | Description                 | Type            | Default Value |
+| ----------- | --------------------------- | --------------- | ------------- |
+| customValue | Function to get field value | _() => unknown_ | -             |
@@ -0,0 +1,57 @@
+# useCustomFieldValue
+
+### 介绍
+
+用于自定义 Form 组件中的表单项。
+
+## 代码演示
+
+### 基本用法
+
+如果需要自定义表单项，可以在 Field 组件的 `input` 插槽中插入你的自定义组件，并在自定义组件内部调用 `useCustomFieldValue` 方法。
+
+#### 自定义组件
+
+首先，在你的自定义组件中，调用 `useCustomFieldValue` 方法，并传入一个回调函数，这个函数返回值为表单项的值。
+
+```js
+// MyComponent.vue
+import { useCustomFieldValue } from '@vant/use';
+
+export default {
+  setup() {
+    // 此处传入的值会替代 Field 组件内部的 value
+    useCustomFieldValue(() => 'Some value');
+  },
+};
+```
+
+#### 表单
+
+接着，在 Form 组件中嵌入你的自定义组件，当提交表单时，即可获取到自定义表单项的值。
+
+```html
+<van-form>
+  <!-- 这是一个自定义表单项 -->
+  <!-- 当表单提交时，会包括 useCustomFieldValue 中传入的值 -->
+  <van-field name="my-field" label="自定义表单项">
+    <template #input>
+      <my-component />
+    </template>
+  </van-field>
+</van-form>
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useCustomFieldValue(customValue: () => unknown): void;
+```
+
+### 参数
+
+| 参数        | 说明               | 类型            | 默认值 |
+| ----------- | ------------------ | --------------- | ------ |
+| customValue | 获取表单项值的函数 | _() => unknown_ | -      |
@@ -0,0 +1,67 @@
+# useEventListener
+
+### 介绍
+
+方便地进行事件绑定，在组件 `mounted` 和 `activated` 时绑定事件，`unmounted` 和 `deactivated` 时解绑事件。
+
+## 代码演示
+
+### 基本用法
+
+```js
+import { ref } from 'vue';
+import { useEventListener } from '@vant/use';
+
+export default {
+  setup() {
+    // 在 window 上绑定 resize 事件
+    // 未指定监听对象时，默认会监听 window 的事件
+    useEventListener('resize', () => {
+      console.log('window resize');
+    });
+
+    // 在 body 元素上绑定 click 事件
+    useEventListener(
+      'click',
+      () => {
+        console.log('click body');
+      },
+      { target: document.body }
+    );
+  },
+};
+```
+
+### 类型定义
+
+```ts
+type Options = {
+  target?: EventTarget | Ref<EventTarget>;
+  capture?: boolean;
+  passive?: boolean;
+};
+
+function useEventListener(
+  type: string,
+  listener: EventListener,
+  options?: Options
+): void;
+```
+
+## API
+
+### 参数
+
+| 参数     | 说明                     | 类型            | 默认值 |
+| -------- | ------------------------ | --------------- | ------ |
+| type     | 监听的事件类型           | _string_        | -      |
+| listener | 点击外部时触发的回调函数 | _EventListener_ | -      |
+| options  | 可选的配置项             | _Options_       | -      |
+
+### Options
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| target | 绑定事件的元素 | _EventTarget \| Ref\<EventTarget>_ | `window` |
+| capture | 是否在事件捕获阶段触发 | _boolean_ | `false` |
+| passive | 设置为 `true` 时，表示 `listener` 永远不会调用 `preventDefault` | _boolean_ | `false` |
@@ -0,0 +1,40 @@
+# usePageVisibility
+
+### 介绍
+
+获取页面的可见状态。
+
+## 代码演示
+
+### 基本用法
+
+```js
+import { watch } from 'vue';
+import { usePageVisibility } from '@vant/use';
+
+export default {
+  setup() {
+    const pageVisibility = usePageVisibility();
+
+    watch(pageVisibility, (value) => {
+      console.log('visibility: ', value);
+    });
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+type VisibilityState = 'visible' | 'hidden';
+
+function usePageVisibility(): Ref<VisibilityState>;
+```
+
+### 返回值
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| visibilityState | 页面当前的可见状态，`visible` 为可见，`hidden` 为隐藏 | _Ref\<VisibilityState>_ |
@@ -0,0 +1,50 @@
+# useRect
+
+### 介绍
+
+获取元素的大小及其相对于视口的位置，等价于 [Element.getBoundingClientRect](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)。
+
+## 代码演示
+
+### 基本用法
+
+```html
+<div ref="root" />
+```
+
+```js
+import { ref } from 'vue';
+import { useRect } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    const rect = useRect(root);
+
+    console.log(rect); // -> 元素的大小及其相对于视口的位置
+
+    return { root };
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useRect(
+  element: Element | Window | Ref<Element | Window | undefined>
+): DOMRect;
+```
+
+### 返回值
+
+| 参数   | 说明                       | 类型     |
+| ------ | -------------------------- | -------- |
+| width  | 宽度                       | _number_ |
+| height | 高度                       | _number_ |
+| top    | 顶部与视图窗口左上角的距离 | _number_ |
+| left   | 左侧与视图窗口左上角的距离 | _number_ |
+| right  | 右侧与视图窗口左上角的距离 | _number_ |
+| bottom | 底部与视图窗口左上角的距离 | _number_ |
@@ -0,0 +1,80 @@
+# useRelation
+
+### 介绍
+
+建立父子组件之间的关联关系，进行数据通信和方法调用，基于 `provide` 和 `inject` 实现。
+
+## 代码演示
+
+### 基本用法
+
+在父组件中使用 `useChildren` 关联子组件:
+
+```js
+import { ref } from 'vue';
+import { useChildren } from '@vant/use';
+
+const RELATION_KEY = Symbol('my-relation');
+
+export default {
+  setup() {
+    const { linkChildren } = useChildren(RELATION_KEY);
+
+    const count = ref(0);
+    const add = () => {
+      count.value++;
+    };
+
+    // 向子组件提供数据和方法
+    linkChildren({ add, count });
+  },
+};
+```
+
+在子组件中使用 `useParent` 获取父组件提供的数据和方法:
+
+```js
+import { useParent } from '@vant/use';
+
+export default {
+  setup() {
+    const { parent } = useParent(RELATION_KEY);
+
+    // 调用父组件提供的数据和方法
+    if (parent) {
+      parent.add();
+      console.log(parent.count.value); // -> 1
+    }
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useParent<T>(key: string | symbol): {
+  parent?: T;
+  index?: Ref<number>;
+};
+
+function useChildren(key: string | symbol): {
+  children: ComponentPublicInstance[];
+  linkChildren: (value: any) => void;
+};
+```
+
+### useParent 返回值
+
+| 参数   | 说明                                         | 类型           |
+| ------ | -------------------------------------------- | -------------- |
+| parent | 父组件提供的值                               | _any_          |
+| index  | 当前组件在父组件的所有子组件中对应的索引位置 | _Ref\<number>_ |
+
+### useChildren 返回值
+
+| 参数         | 说明                 | 类型                        |
+| ------------ | -------------------- | --------------------------- |
+| children     | 子组件列表           | _ComponentPublicInstance[]_ |
+| linkChildren | 向子组件提供值的方法 | _(value: any) => void_      |
@@ -0,0 +1,57 @@
+# useScrollParent
+
+### 介绍
+
+获取元素最近的可滚动父元素。
+
+## 代码演示
+
+### 基本用法
+
+```html
+<div ref="root" />
+```
+
+```js
+import { ref, watch } from 'vue';
+import { useScrollParent, useEventListener } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    const scrollParent = useScrollParent(root);
+
+    useEventListener(
+      'scroll',
+      () => {
+        console.log('scroll');
+      },
+      { target: scrollParent }
+    );
+
+    return { root };
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useScrollParent(
+  element: Ref<Element | undefined>
+): Ref<Element | Window | undefined>;
+```
+
+### 参数
+
+| 参数    | 说明     | 类型            | 默认值 |
+| ------- | -------- | --------------- | ------ |
+| element | 当前元素 | _Ref\<Element>_ | -      |
+
+### 返回值
+
+| 参数         | 说明               | 类型            |
+| ------------ | ------------------ | --------------- |
+| scrollParent | 最近的可滚动父元素 | _Ref\<Element>_ |
@@ -0,0 +1,64 @@
+# useToggle
+
+### Intro
+
+Used to switch between `true` and `false`.
+
+## Usage
+
+### Basic Usage
+
+```js
+import { useToggle } from '@vant/use';
+
+export default {
+  setup() {
+    const [state, toggle] = useToggle();
+
+    toggle(true);
+    console.log(state.value); // -> true
+
+    toggle(false);
+    console.log(state.value); // -> false
+
+    toggle();
+    console.log(state.value); // -> true
+  },
+};
+```
+
+### Default Value
+
+```js
+import { useToggle } from '@vant/use';
+
+export default {
+  setup() {
+    const [state, toggle] = useToggle(true);
+    console.log(state.value); // -> true
+  },
+};
+```
+
+## API
+
+### Type Declarations
+
+```ts
+function useToggle(
+  defaultValue: boolean
+): [Ref<boolean>, (newValue: boolean) => void];
+```
+
+### Params
+
+| Name         | Description   | Type      | Default Value |
+| ------------ | ------------- | --------- | ------------- |
+| defaultValue | Default value | _boolean_ | `false`       |
+
+### Return Value
+
+| Name   | Description              | Type                           |
+| ------ | ------------------------ | ------------------------------ |
+| state  | State                    | _Ref\<boolean>_                |
+| toggle | Function to switch state | _(newValue?: boolean) => void_ |
@@ -0,0 +1,64 @@
+# useToggle
+
+### 介绍
+
+用于在 `true` 和 `false` 之间进行切换。
+
+## 代码演示
+
+### 基本用法
+
+```js
+import { useToggle } from '@vant/use';
+
+export default {
+  setup() {
+    const [state, toggle] = useToggle();
+
+    toggle(true);
+    console.log(state.value); // -> true
+
+    toggle(false);
+    console.log(state.value); // -> false
+
+    toggle();
+    console.log(state.value); // -> true
+  },
+};
+```
+
+### 设置默认值
+
+```js
+import { useToggle } from '@vant/use';
+
+export default {
+  setup() {
+    const [state, toggle] = useToggle(true);
+    console.log(state.value); // -> true
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useToggle(
+  defaultValue: boolean
+): [Ref<boolean>, (newValue: boolean) => void];
+```
+
+### 参数
+
+| 参数         | 说明   | 类型      | 默认值  |
+| ------------ | ------ | --------- | ------- |
+| defaultValue | 默认值 | _boolean_ | `false` |
+
+### 返回值
+
+| 参数   | 说明             | 类型                           |
+| ------ | ---------------- | ------------------------------ |
+| state  | 状态值           | _Ref\<boolean>_                |
+| toggle | 切换状态值的函数 | _(newValue?: boolean) => void_ |
@@ -0,0 +1,45 @@
+# useWindowSize
+
+### 介绍
+
+获取浏览器窗口的视口宽度和高度，并在窗口大小变化时自动更新。
+
+## 代码演示
+
+### 基本用法
+
+```js
+import { watch } from 'vue';
+import { useWindowSize } from '@vant/use';
+
+export default {
+  setup() {
+    const { width, height } = useWindowSize();
+
+    console.log(width.value); // -> 窗口宽度
+    console.log(height.value); // -> 窗口高度
+
+    watch([width, height], () => {
+      console.log('window resized');
+    });
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useWindowSize(): {
+  width: Ref<number>;
+  height: Ref<number>;
+};
+```
+
+### 返回值
+
+| 参数   | 说明           | 类型           |
+| ------ | -------------- | -------------- |
+| width  | 浏览器窗口宽度 | _Ref\<number>_ |
+| height | 浏览器窗口高度 | _Ref\<number>_ |
@@ -0,0 +1,24 @@
+# Composables
+
+### Intro
+
+Vant provide some built-in composition APIs, you can directly use these APIs for development.
+
+### Demo
+
+```js
+import { useWindowSize } from '@vant/use';
+
+const { width, height } = useWindowSize();
+
+console.log(width.value); // -> window width
+console.log(height.value); // -> window height
+```
+
+### API List
+
+| Name | Description |
+| --- | --- |
+| [useClickAway](#/en-US/use-click-away) | Triggers a callback when user clicks outside of the target element |
+| [useCountDown](#/en-US/use-count-down) | Used to manage the countdown |
+| [useToggle](#/en-US/use-toggle) | Used to switch between `true` and `false` |
@@ -0,0 +1,34 @@
+# 组合式 API
+
+### 介绍
+
+Vant 内置了一系列的组合式 API，对于安装了 `vant` 的项目，可以直接使用这些 API 进行开发。
+
+### 示例
+
+下面是一个 Vant 组合式 API 的用法示例，我们从 `@vant/use` 这个包中引入 `useWindowSize` 方法，然后进行调用，即可获取到当前 Window 的宽度和高度。
+
+```js
+import { useWindowSize } from '@vant/use';
+
+const { width, height } = useWindowSize();
+
+console.log(width.value); // -> 窗口宽度
+console.log(height.value); // -> 窗口高度
+```
+
+### API 列表
+
+下面是 Vant 对外提供的所有组合式 API，点击名称可以查看详细介绍：
+
+| 名称 | 描述 |
+| --- | --- |
+| [useClickAway](#/zh-CN/use-click-away) | 监听点击元素外部的事件 |
+| [useCountDown](#/zh-CN/use-count-down) | 提供倒计时管理能力 |
+| [useEventListener](#/zh-CN/use-event-listener) | 方便地进行事件绑定 |
+| [usePageVisibility](#/zh-CN/use-page-visibility) | 获取页面的可见状态 |
+| [useRect](#/zh-CN/use-rect) | 获取元素的大小及其相对于视口的位置 |
+| [useRelation](#/zh-CN/use-relation) | 建立父子组件之间的关联关系 |
+| [useScrollParent](#/zh-CN/use-scroll-parent) | 获取元素最近的可滚动父元素 |
+| [useToggle](#/zh-CN/use-toggle) | 用于在布尔值之间进行切换 |
+| [useWindowSize](#/zh-CN/use-window-size) | 获取浏览器窗口的视口宽度和高度 |
@@ -0,0 +1,79 @@
+import Locale from '../../src/locale';
+import enUS from '../../src/locale/lang/en-US';
+
+export function initDemoLocale() {
+  Locale.add({
+    'en-US': enUS,
+  });
+
+  // switch lang after routing
+  if (window.vueRouter) {
+    window.vueRouter.afterEach((to) => {
+      const { lang } = to.meta || {};
+
+      if (lang) {
+        Locale.use(lang);
+      }
+    });
+  }
+
+  // add some basic locale messages
+  Locale.add({
+    'zh-CN': {
+      add: '增加',
+      decrease: '减少',
+      red: '红色',
+      orange: '橙色',
+      yellow: '黄色',
+      purple: '紫色',
+      tab: '标签',
+      tag: '标签',
+      desc: '描述信息',
+      back: '返回',
+      title: '标题',
+      status: '状态',
+      button: '按钮',
+      option: '选项',
+      search: '搜索',
+      content: '内容',
+      custom: '自定义',
+      username: '用户名',
+      password: '密码',
+      disabled: '禁用状态',
+      uneditable: '不可编辑',
+      basicUsage: '基础用法',
+      advancedUsage: '高级用法',
+      loadingStatus: '加载状态',
+      usernamePlaceholder: '请输入用户名',
+      passwordPlaceholder: '请输入密码',
+    },
+    'en-US': {
+      add: 'Add',
+      decrease: 'Decrease',
+      red: 'Red',
+      orange: 'Orange',
+      yellow: 'Yellow',
+      purple: 'Purple',
+      tab: 'Tab',
+      tag: 'Tag',
+      desc: 'Description',
+      back: 'Back',
+      title: 'Title',
+      status: 'Status',
+      button: 'Button',
+      option: 'Option',
+      search: 'Search',
+      content: 'Content',
+      custom: 'Custom',
+      username: 'Username',
+      password: 'Password',
+      loadingStatus: 'Loading',
+      disabled: 'Disabled',
+      uneditable: 'Uneditable',
+      basicUsage: 'Basic Usage',
+      advancedUsage: 'Advanced Usage',
+      usernamePlaceholder: 'Username',
+      passwordPlaceholder: 'Password',
+    },
+  });
+}
@@ -0,0 +1,11 @@
+import { initDemoLocale } from './demo-locale';
+import Lazyload from '../../src/lazyload';
+
+initDemoLocale();
+
+const { app } = window;
+if (app) {
+  app.use(Lazyload, {
+    lazyComponent: true,
+  });
+}
@@ -0,0 +1,22 @@
+import Locale from '../../src/locale';
+import { camelize } from '../../src/utils/format/string';
+import { createTranslate } from '../../src/utils/create/translate';
+
+let demoUid = 0;
+
+export function useTranslate(i18n: Record<string, any>) {
+  const demoName = `demo-i18n-${demoUid++}`;
+
+  if (i18n) {
+    const locales: Record<string, any> = {};
+    const camelizedName = camelize(demoName);
+
+    Object.keys(i18n).forEach((key) => {
+      locales[key] = { [camelizedName]: i18n[key] };
+    });
+
+    Locale.add(locales);
+  }
+
+  return createTranslate(demoName);
+}