docs: add vant composition api intro

2025-04-05 05:42:44 +08:00 · 2021-06-04 17:51:15 +08:00 · 2021-06-04 17:51:15 +08:00 · 952aa70433
commit 952aa70433
parent 1000724826
10 changed files with 38 additions and 239 deletions
--- 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 |
--- 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 图标库 |
--- 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 |
--- 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 图标库 |
--- a/docs/markdown/vant-use-intro.zh-CN.md
+++ 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) | 获取浏览器窗口的视口宽度和高度 |
--- a/packages/vant-use/.vuepress/config.js
+++ b/packages/vant-use/.vuepress/config.js
@ -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/'],
-      },
-    ],
-  },
-};
--- a/packages/vant-use/.vuepress/styles/font.styl
+++ b/packages/vant-use/.vuepress/styles/font.styl
@ -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;
-}
--- a/packages/vant-use/.vuepress/styles/index.styl
+++ b/packages/vant-use/.vuepress/styles/index.styl
@ -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;
-}
--- a/packages/vant-use/.vuepress/styles/palette.styl
+++ b/packages/vant-use/.vuepress/styles/palette.styl
@ -1,2 +0,0 @@
-$accentColor = #4fc08d;
-
--- 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',