Skip to content

Commit

Permalink
docs: doc optimize
Browse files Browse the repository at this point in the history
  • Loading branch information
@yanbingbin
yanbingbin committed Apr 28, 2020
1 parent 4106d94 commit e616f4d
Show file tree
Hide file tree
Showing 10 changed files with 449 additions and 371 deletions.
90 changes: 63 additions & 27 deletions src/notice/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,74 @@
## 通知提醒（Notice）
全局展示通知提醒信息。

### 何时使用
在界面右上角显示可关闭的全局通知，可设置描述信息
在界面右上角显示可关闭的全局通知，可设置描述信息。经常用于以下情况：
- 较为复杂的通知内容。
- 带有交互的通知，给出用户下一步的行动点。
- 系统主动推送。

### 基础用法
基本用法，默认在 4.5秒后关闭。如果 content 参数为空或不填，则自动应用仅标题模式下的样式。

:::RUNTIME
```html
<template>
<div>
<vc-button @click="handleClick(true)">
打开通知
</vc-button>
<vc-button @click="handleClick(false)">
仅标题模式
</vc-button>
</div>
</template>
<script>
import { Button, Notice } from '@wya/vc';
window.Notice = Notice;
export default {
name: "vc-tpl-basic",
components: {
'vc-button': Button
},
methods: {
handleClick(content) {
Notice.open({
title: '这是标题',
content: content ? '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述' : '',
onClose() {
console.log('回调');
}
});
}
}
};
</script>
```
:::

### 提醒类型
通知提醒框左侧有图标。

:::RUNTIME
```html
<template>
<div>
<div>
<vc-button :wait="0" @click="handleClick('info')">
<vc-button @click="handleClick('info')">
消息
</vc-button>
<vc-button :wait="0" @click="handleClick('success')">
<vc-button @click="handleClick('success')">
成功
</vc-button>
<vc-button :wait="0" @click="handleClick('error')">
<vc-button @click="handleClick('error')">
错误
</vc-button>
<vc-button :wait="0" @click="handleClick('warn')">
<vc-button @click="handleClick('warn')">
警告
</vc-button>
<vc-button :wait="0" @click="handleClick('open')">
<vc-button @click="handleClick('open')">
无图标
</vc-button>
</div>
Expand All @@ -37,13 +83,6 @@ export default {
name: "vc-tpl-basic",
components: {
'vc-button': Button
},
data() {
return {
};
},
computed: {
},
methods: {
handleClick(type) {
Expand Down Expand Up @@ -92,20 +131,19 @@ export default {
}
};
</script>

```
:::

### 自定义关闭时间
使用duration属性，为0则不自动关闭，默认为4.5，也可以设置closable，是否可以手动关闭提醒，默认为true。
使用duration属性，为0则不自动关闭，默认为4.5。

:::RUNTIME
```html
<template>
<div>
<div>
<vc-button :wait="0" @click="handleClick()">
手动关闭提醒
<vc-button @click="handleClick()">
自定义关闭时间
</vc-button>
</div>
</div>
Expand Down Expand Up @@ -134,17 +172,17 @@ export default {
}
};
</script>

```
:::

#### render函数渲染
你可以自定义 Render 函数来替代 content。

:::RUNTIME
```html
<template>
<div>
<vc-button :wait="0" @click="handleClickrender">
<vc-button @click="handleClickrender">
根据render函数渲染
</vc-button>
</div>
Expand Down Expand Up @@ -172,22 +210,20 @@ export default {
}
};
</script>

```
:::

### API

### config属性
## API

### 属性
属性 | 说明 | 类型 | 可选值 | 默认值
---|---|---|---|---
title | 通知的标题 | `String`,`() => String` | - | - |
content | 通知的内容 | `String`,`() => String ｜ jsx` | - | - |
title | 通知的标题 | `String`、`Function` | - | - |
content | 通知的内容 | `String`、`Function`、`jsx` | - | - |
duration | 自动关闭的延时，单位秒，不关闭可以写 0 | `Number` | - | 4.5|
closable | 手动关闭提示 | `Boolean` | - | `true`
mode | 通知的图标类型 | `String` | `info`,`success`,`error`,`warning` | - |
beforeClose | 关闭前的回调 | `() => Boolean` | - | - |
mode | 通知的图标类型 | `String` | `info`、`success`、`error`、`warning` | - |
beforeClose | 关闭前的回调 | `Function` | - | - |
onClose | 关闭后的回调 | - | - | - |

### 事件
Expand Down
89 changes: 74 additions & 15 deletions src/page/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,43 @@
- 可切换页码浏览数据。

### 基础用法
基本的分页，页数过多时会自动折叠。默认显示总共多少条数据，可以通过设置属性show-count=false来隐藏它。

:::RUNTIME
```html
<template>
<div class="v-page-basic">
<div>页数较少时效果</div>
<vc-page
class="page"
:count="100"
:count="50"
/>
<div>大于5页时效果</div>
<vc-page
class="page"
:count="60"
/>
<div>基本的分页，页数过多时会自动折叠。默认显示总共多少条数据，可以通过设置属性show-count=false来隐藏它；</div>
</div>
</template>

<script>
import { Page } from '@wya/vc';
export default {
components: {
"vc-page": Page
},
};
</script>
<style>
.v-page-basic .page {
.v-page-basic .page, .v-page-basic div {
margin-bottom: 10px;
}
</style>
```
:::

### 每页数量
可以切换每页显示的数量。

:::RUNTIME
```html
Expand Down Expand Up @@ -67,6 +74,7 @@ export default {
:::

### 电梯
快速跳转到某一页。

:::RUNTIME
```html
Expand All @@ -80,9 +88,9 @@ export default {
<div>快速跳转到某一页。</div>
</div>
</template>

<script>
import { Page } from '@wya/vc';
export default {
components: {
"vc-page": Page
Expand All @@ -96,10 +104,57 @@ export default {
</style>
```
:::
## API

#### Page props
### 调用方法翻页
调用组件方法实现翻页。

:::RUNTIME
```html
<template>
<div class="v-page-elevator">
<vc-page
ref="page"
class="page"
:count="100"
show-elevator
/>
<vc-button @click="handlePrev">上一页</vc-button>
<vc-button @click="handleNext">下一页</vc-button>
<vc-button @click="handlePage">跳转到第三页</vc-button>
</div>
</template>
<script>
import { Page, Button } from '@wya/vc';
export default {
components: {
"vc-page": Page,
"vc-button": Button
},
methods: {
handlePrev() {
this.$refs.page.prev();
},
handleNext() {
this.$refs.page.next();
},
handlePage() {
this.$refs.page.resetPage(3);
}
}
};
</script>
<style>
.v-page-elevator .page {
margin-bottom: 10px;
}
</style>
```
:::

## API

### 属性
属性 | 说明 | 类型 | 可选值 | 默认值
---|---|---|--- | ---
current | 当前页码，支持 .sync 修饰符 | `Number` | - | 1
Expand All @@ -110,17 +165,21 @@ placement | 条数切换弹窗的展开方向 | `String` | `bottom`、`top` | `b
show-count | 显示总数 | `Boolean` | - | `true`
show-elevator | 显示电梯，可以快速切换到某一页 | `Boolean` | - | `false`
show-sizer | 显示分页，用来改变`page-size` | `Boolean` | - | `false`
portal | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | `Boolean` | - | `true`

#### Prop events

事件名 | 说明 | 类型 | 参数 | 返回值
---|---|---|--- | ---
change | 页码改变的回调，参数是改变后的页码 | `Function(page)` | `page: Number`| -
page-size-change | 切换每页条数时的回调，参数是切换后的每页条数 | `Function(pageSiz)` | `pageSize: String`| -
### 事件
事件名 | 说明 | 回调参数 | 参数说明
---|---|---|---|---
change | 页码改变的回调 | `(page: Number) => void 0` | `page`：改变后的页码
page-size-change | 切换每页条数时的回调 | `(pageSiz: Number) => void 0` | `pageSize`：切换后的每页条数

#### Page Slot
### 方法
方法名 | 说明 | 参数
---|---|---
prev | 向上翻一页 | -
next | 向下翻一页 | -
resetPage | 跳转到指定页 | `page`：页码

### Slot
属性 | 说明
---|---
无 | 自定义显示总数的内容
Loading

0 comments on commit e616f4d

Please sign in to comment.