docs(@vant/use): add useToggle doc

This commit is contained in:
chenjiahan 2020-10-05 08:53:13 +08:00
parent 0b05fa00aa
commit 90669560a4
4 changed files with 74 additions and 7 deletions

View File

@ -12,10 +12,15 @@ module.exports = {
],
sidebarDepth: 0,
sidebar: [
{
title: '介绍',
collapsable: false,
children: ['/'],
},
{
title: 'State',
collapsable: false,
// children: ['/src/useToggle/'],
children: ['/src/useToggle/'],
},
{
title: 'DOM',

View File

@ -33,6 +33,6 @@ type VisibilityState = 'visible' | 'hidden';
### 返回值
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| visibilityState | 页面当前的可见状态,`visible` 为可见,`hidden` 为隐藏 | _Ref\<VisibilityState>_ | - |
| 参数 | 说明 | 类型 |
| --- | --- | --- |
| visibilityState | 页面当前的可见状态,`visible` 为可见,`hidden` 为隐藏 | _Ref\<VisibilityState>_ |

View File

@ -48,6 +48,6 @@ function useScrollParent(element: Ref<Element>): Ref<Element>;
### 返回值
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ------------------ | --------------- | ------ |
| scrollParent | 最近的可滚动父元素 | _Ref\<Element>_ | - |
| 参数 | 说明 | 类型 |
| ------------ | ------------------ | --------------- |
| scrollParent | 最近的可滚动父元素 | _Ref\<Element>_ |

View File

@ -0,0 +1,62 @@
# 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_ |