From 2fa7b10b35a27bcdb59cea66ac97658924b2ead0 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Fri, 4 Jun 2021 17:18:17 +0800 Subject: [PATCH] docs: migrate vant-use document to vant --- .../markdown/use-click-away.zh-CN.md | 2 + .../markdown/use-count-down.zh-CN.md | 2 + .../markdown/use-event-listener.zh-CN.md | 4 +- .../markdown/use-page-visibility.zh-CN.md | 2 + .../markdown/use-rect.zh-CN.md | 2 + .../markdown/use-relation.zh-CN.md | 14 ++++--- .../markdown/use-scroll-parent.zh-CN.md | 2 + .../markdown/use-toggle.zh-CN.md | 2 + .../markdown/use-window-size.zh-CN.md | 2 + vant.config.js | 41 +++++++++++++++++++ 10 files changed, 67 insertions(+), 6 deletions(-) rename packages/vant-use/src/useClickAway/README.md => docs/markdown/use-click-away.zh-CN.md (99%) rename packages/vant-use/src/useCountDown/README.md => docs/markdown/use-count-down.zh-CN.md (99%) rename packages/vant-use/src/useEventListener/README.md => docs/markdown/use-event-listener.zh-CN.md (98%) rename packages/vant-use/src/usePageVisibility/README.md => docs/markdown/use-page-visibility.zh-CN.md (98%) rename packages/vant-use/src/useRect/README.md => docs/markdown/use-rect.zh-CN.md (98%) rename packages/vant-use/src/useRelation/README.md => docs/markdown/use-relation.zh-CN.md (89%) rename packages/vant-use/src/useScrollParent/README.md => docs/markdown/use-scroll-parent.zh-CN.md (98%) rename packages/vant-use/src/useToggle/README.md => docs/markdown/use-toggle.zh-CN.md (98%) rename packages/vant-use/src/useWindowSize/README.md => docs/markdown/use-window-size.zh-CN.md (98%) diff --git a/packages/vant-use/src/useClickAway/README.md b/docs/markdown/use-click-away.zh-CN.md similarity index 99% rename from packages/vant-use/src/useClickAway/README.md rename to docs/markdown/use-click-away.zh-CN.md index da40115ea..b13d76319 100644 --- a/packages/vant-use/src/useClickAway/README.md +++ b/docs/markdown/use-click-away.zh-CN.md @@ -1,5 +1,7 @@ # useClickAway +### 介绍 + 监听点击元素外部的事件。 ## 代码演示 diff --git a/packages/vant-use/src/useCountDown/README.md b/docs/markdown/use-count-down.zh-CN.md similarity index 99% rename from packages/vant-use/src/useCountDown/README.md rename to docs/markdown/use-count-down.zh-CN.md index fed6980ce..1e9e0c41e 100644 --- a/packages/vant-use/src/useCountDown/README.md +++ b/docs/markdown/use-count-down.zh-CN.md @@ -1,5 +1,7 @@ # useCountDown +### 介绍 + 提供倒计时管理能力。 ## 代码演示 diff --git a/packages/vant-use/src/useEventListener/README.md b/docs/markdown/use-event-listener.zh-CN.md similarity index 98% rename from packages/vant-use/src/useEventListener/README.md rename to docs/markdown/use-event-listener.zh-CN.md index d59536ba7..cb6b0e9ce 100644 --- a/packages/vant-use/src/useEventListener/README.md +++ b/docs/markdown/use-event-listener.zh-CN.md @@ -1,5 +1,7 @@ # useEventListener +### 介绍 + 方便地进行事件绑定，在组件 `mounted` 和 `activated` 时绑定事件，`unmounted` 和 `deactivated` 时解绑事件。 ## 代码演示 @@ -30,7 +32,7 @@ export default { }; ``` -## 类型定义 +### 类型定义 ```ts type Options = { diff --git a/packages/vant-use/src/usePageVisibility/README.md b/docs/markdown/use-page-visibility.zh-CN.md similarity index 98% rename from packages/vant-use/src/usePageVisibility/README.md rename to docs/markdown/use-page-visibility.zh-CN.md index e389c31e0..8f22cbff2 100644 --- a/packages/vant-use/src/usePageVisibility/README.md +++ b/docs/markdown/use-page-visibility.zh-CN.md @@ -1,5 +1,7 @@ # usePageVisibility +### 介绍 + 获取页面的可见状态。 ## 代码演示 diff --git a/packages/vant-use/src/useRect/README.md b/docs/markdown/use-rect.zh-CN.md similarity index 98% rename from packages/vant-use/src/useRect/README.md rename to docs/markdown/use-rect.zh-CN.md index 33dfa36df..87a3dab8e 100644 --- a/packages/vant-use/src/useRect/README.md +++ b/docs/markdown/use-rect.zh-CN.md @@ -1,5 +1,7 @@ # useRect +### 介绍 + 获取元素的大小及其相对于视口的位置，等价于 [Element.getBoundingClientRect](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)。 ## 代码演示 diff --git a/packages/vant-use/src/useRelation/README.md b/docs/markdown/use-relation.zh-CN.md similarity index 89% rename from packages/vant-use/src/useRelation/README.md rename to docs/markdown/use-relation.zh-CN.md index 8a1ddaed5..d320dbc1f 100644 --- a/packages/vant-use/src/useRelation/README.md +++ b/docs/markdown/use-relation.zh-CN.md @@ -1,17 +1,20 @@ # useRelation +### 介绍 + 建立父子组件之间的关联关系，进行数据通信和方法调用，基于 `provide` 和 `inject` 实现。 ## 代码演示 ### 基本用法 +在父组件中使用 `useChildren` 关联子组件: + ```js -// Parent.vue import { ref } from 'vue'; import { useChildren } from '@vant/use'; -const RELATION_KEY = 'my-relation'; +const RELATION_KEY = Symbol('my-relation'); export default { setup() { @@ -26,12 +29,13 @@ export default { linkChildren({ add, count }); }, }; +``` -// Child.vue +在子组件中使用 `useParent` 获取父组件提供的数据和方法: + +```js import { useParent } from '@vant/use'; -const RELATION_KEY = 'my-relation'; - export default { setup() { const { parent } = useParent(RELATION_KEY); diff --git a/packages/vant-use/src/useScrollParent/README.md b/docs/markdown/use-scroll-parent.zh-CN.md similarity index 98% rename from packages/vant-use/src/useScrollParent/README.md rename to docs/markdown/use-scroll-parent.zh-CN.md index 9d9994619..83486f05e 100644 --- a/packages/vant-use/src/useScrollParent/README.md +++ b/docs/markdown/use-scroll-parent.zh-CN.md @@ -1,5 +1,7 @@ # useScrollParent +### 介绍 + 获取元素最近的可滚动父元素。 ## 代码演示 diff --git a/packages/vant-use/src/useToggle/README.md b/docs/markdown/use-toggle.zh-CN.md similarity index 98% rename from packages/vant-use/src/useToggle/README.md rename to docs/markdown/use-toggle.zh-CN.md index 5a7ff423d..1ddbf1715 100644 --- a/packages/vant-use/src/useToggle/README.md +++ b/docs/markdown/use-toggle.zh-CN.md @@ -1,5 +1,7 @@ # useToggle +### 介绍 + 用于在 `true` 和 `false` 之间进行切换。 ## 代码演示 diff --git a/packages/vant-use/src/useWindowSize/README.md b/docs/markdown/use-window-size.zh-CN.md similarity index 98% rename from packages/vant-use/src/useWindowSize/README.md rename to docs/markdown/use-window-size.zh-CN.md index ac90fd72d..8ca329bdc 100644 --- a/packages/vant-use/src/useWindowSize/README.md +++ b/docs/markdown/use-window-size.zh-CN.md @@ -1,5 +1,7 @@ # useWindowSize +### 介绍 + 获取浏览器窗口的视口宽度和高度，并在窗口大小变化时自动更新。 ## 代码演示 diff --git a/vant.config.js b/vant.config.js index b507874c5..3f1ed5059 100644 --- a/vant.config.js +++ b/vant.config.js @@ -410,6 +410,47 @@ module.exports = { }, ], }, + { + title: '组合式 API', + items: [ + { + path: 'use-toggle', + title: 'useToggle', + }, + { + path: 'use-count-down', + title: 'useCountDown', + }, + { + path: 'use-rect', + title: 'useRect', + }, + { + path: 'use-event-listener', + title: 'useEventListener', + }, + { + path: 'use-page-visibility', + title: 'usePageVisibility', + }, + { + path: 'use-scroll-parent', + title: 'useScrollParent', + }, + { + path: 'use-window-size', + title: 'useWindowSize', + }, + { + path: 'use-relation', + title: 'useRelation', + }, + { + path: 'use-click-away', + title: 'useClickAway', + }, + ], + }, ], }, 'en-US': {