From 952aa7043360022fd584a51ec9ba1048a4038bbd Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 4 Jun 2021 17:51:15 +0800
Subject: [PATCH] docs: add vant composition api intro
---
README.md | 1 -
README.zh-CN.md | 1 -
docs/markdown/home.en-US.md | 1 -
docs/markdown/home.zh-CN.md | 1 -
docs/markdown/vant-use-intro.zh-CN.md | 34 ++++
packages/vant-use/.vuepress/config.js | 45 -----
packages/vant-use/.vuepress/styles/font.styl | 163 ------------------
packages/vant-use/.vuepress/styles/index.styl | 25 ---
.../vant-use/.vuepress/styles/palette.styl | 2 -
vant.config.js | 4 +
10 files changed, 38 insertions(+), 239 deletions(-)
create mode 100644 docs/markdown/vant-use-intro.zh-CN.md
delete mode 100644 packages/vant-use/.vuepress/config.js
delete mode 100644 packages/vant-use/.vuepress/styles/font.styl
delete mode 100644 packages/vant-use/.vuepress/styles/index.styl
delete mode 100644 packages/vant-use/.vuepress/styles/palette.styl
diff --git a/README.md b/README.md
index 693fe7f1a..70025665b 100644
--- a/README.md
+++ b/README.md
@@ -76,7 +76,6 @@ Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
| Project | Description |
| --- | --- |
| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
-| [vant-use](https://youzan.github.io/vant/vant-use/) | Collection of Vant Composition APIs |
| [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 |
diff --git a/README.zh-CN.md b/README.zh-CN.md
index e4a6866ce..dde34f39c 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -84,7 +84,6 @@ Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致
| 项目 | 描述 |
| --- | --- |
| [vant-weapp](https://github.com/youzan/vant-weapp) | Vant 微信小程序版 |
-| [vant-use](https://youzan.github.io/vant/vant-use/) | Vant Composition API 合集 |
| [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 图标库 |
diff --git a/docs/markdown/home.en-US.md b/docs/markdown/home.en-US.md
index eced9fbc6..383c7d271 100644
--- a/docs/markdown/home.en-US.md
+++ b/docs/markdown/home.en-US.md
@@ -38,7 +38,6 @@ Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
| Project | Description |
| --- | --- |
| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
-| [vant-use](https://youzan.github.io/vant/vant-use/) | Collection of Vant Composition APIs |
| [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 |
diff --git a/docs/markdown/home.zh-CN.md b/docs/markdown/home.zh-CN.md
index e67952c4c..7359a4ecc 100644
--- a/docs/markdown/home.zh-CN.md
+++ b/docs/markdown/home.zh-CN.md
@@ -48,7 +48,6 @@ Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致
| 项目 | 描述 |
| --- | --- |
| [vant-weapp](https://github.com/youzan/vant-weapp) | Vant 微信小程序版 |
-| [vant-use](https://youzan.github.io/vant/vant-use/) | Vant Composition API 合集 |
| [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 图标库 |
diff --git a/docs/markdown/vant-use-intro.zh-CN.md b/docs/markdown/vant-use-intro.zh-CN.md
new file mode 100644
index 000000000..03a548a50
--- /dev/null
+++ b/docs/markdown/vant-use-intro.zh-CN.md
@@ -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) | 获取浏览器窗口的视口宽度和高度 |
diff --git a/packages/vant-use/.vuepress/config.js b/packages/vant-use/.vuepress/config.js
deleted file mode 100644
index a08f842c7..000000000
--- a/packages/vant-use/.vuepress/config.js
+++ /dev/null
@@ -1,45 +0,0 @@
-module.exports = {
- base: '/vant/vant-use/',
- title: 'Vant Use',
- dest: 'dist/site',
- head: [['link', { rel: 'icon', href: 'https://img.yzcdn.cn/vant/logo.png' }]],
- patterns: ['**/*.md', '!**/node_modules'],
- themeConfig: {
- nav: [
- {
- text: 'GitHub',
- link: 'https://github.com/youzan/vant/tree/dev/packages/vant-use',
- },
- ],
- sidebarDepth: 0,
- sidebar: [
- {
- title: '介绍',
- collapsable: false,
- children: ['/', 'changelog'],
- },
- {
- title: 'State',
- collapsable: false,
- children: ['/src/useToggle/', '/src/useCountDown/'],
- },
- {
- title: 'DOM',
- collapsable: false,
- children: [
- '/src/useRect/',
- '/src/useClickAway/',
- '/src/useEventListener/',
- '/src/usePageVisibility/',
- '/src/useScrollParent/',
- '/src/useWindowSize/',
- ],
- },
- {
- title: 'Enhanced',
- collapsable: false,
- children: ['/src/useRelation/'],
- },
- ],
- },
-};
diff --git a/packages/vant-use/.vuepress/styles/font.styl b/packages/vant-use/.vuepress/styles/font.styl
deleted file mode 100644
index 9e87d5d8b..000000000
--- a/packages/vant-use/.vuepress/styles/font.styl
+++ /dev/null
@@ -1,163 +0,0 @@
-/* cyrillic-ext */
-@font-face {
- font-weight: 400;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2)
- format('woff2');
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
- U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
- font-weight: 400;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2)
- format('woff2');
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
- font-weight: 400;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2)
- format('woff2');
- unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
- font-weight: 400;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2)
- format('woff2');
- unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
- font-weight: 400;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2)
- format('woff2');
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
- U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
- font-weight: 400;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2)
- format('woff2');
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
- U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
- font-weight: 400;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2)
- format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
- U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
- U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
- font-weight: 600;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
- url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2)
- format('woff2');
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
- U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
- font-weight: 600;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
- url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2)
- format('woff2');
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
- font-weight: 600;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
- url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2)
- format('woff2');
- unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
- font-weight: 600;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
- url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2)
- format('woff2');
- unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
- font-weight: 600;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
- url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2)
- format('woff2');
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
- U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
- font-weight: 600;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
- url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2)
- format('woff2');
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
- U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
- font-weight: 600;
- font-family: 'Open Sans';
- font-style: normal;
- src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
- url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2)
- format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
- U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
- U+FEFF, U+FFFD;
-}
diff --git a/packages/vant-use/.vuepress/styles/index.styl b/packages/vant-use/.vuepress/styles/index.styl
deleted file mode 100644
index a8b15a606..000000000
--- a/packages/vant-use/.vuepress/styles/index.styl
+++ /dev/null
@@ -1,25 +0,0 @@
-@import './font.styl'
-
-body {
- font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
- Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
- 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
- -webkit-font-smoothing: antialiased;
-}
-
-.theme-default-content pre code {
- font-size: 14px;
- font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
- line-height: 26px;
- white-space: pre-wrap;
- word-wrap: break-word;
- -webkit-font-smoothing: auto;
-}
-
-em {
- color: #4fc08d;
- font-size: 14px;
- font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
- font-style: normal;
- -webkit-font-smoothing: auto;
-}
diff --git a/packages/vant-use/.vuepress/styles/palette.styl b/packages/vant-use/.vuepress/styles/palette.styl
deleted file mode 100644
index e58d0df30..000000000
--- a/packages/vant-use/.vuepress/styles/palette.styl
+++ /dev/null
@@ -1,2 +0,0 @@
-$accentColor = #4fc08d;
-
diff --git a/vant.config.js b/vant.config.js
index 3f1ed5059..f512d63af 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -413,6 +413,10 @@ module.exports = {
{
title: '组合式 API',
items: [
+ {
+ path: 'vant-use-intro',
+ title: '介绍',
+ },
{
path: 'use-toggle',
title: 'useToggle',