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',