taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

docs: improve docs and update api

Browse Source
This commit is contained in:
Justineo
2021-11-24 12:05:27 +08:00
parent a790f0d8a9
commit 5226ec968c
19 changed files with 297 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
one/docs/components/anchor.md
View File

@@ -31,8 +31,8 @@
| ``items`` | `Array<{value, label, children}>` | `[]` | [^items] |
| ``sticky`` | `boolean=` | `false` | 是否有吸附效果。 |
| ``container`` | `string | HTMLElement | Window=` | - | `Anchor` 吸附与判断锚点激活所参考的容器。 |
| ``target-offset`` | `string | number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置，那么对应的锚点链接处于激活状态。 |
| ``sticky-offset`` | `string | number=` | `0` | 对于 sticky `Anchor` 而言，当容器滚动到 `sticky-offset` 位置，那么该 `Anchor` 开始吸附。 |
| ``target-offset`` | `string | number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置，那么对应的锚点链接处于激活状态。数值类型值为 `px` 值，也可以传入如 `'10%'` 的百分比字符串，将基于 `container` 对应容器的高度比例进行计算。 |
| ``sticky-offset`` | `string | number=` | `0` | 对于 sticky `Anchor` 而言，当容器滚动到 `sticky-offset` 位置，那么该 `Anchor` 开始吸附。不同值类型含义同 [`target-offset`](#props-target-offset) 属性。 |
^^^items
数据源数组，每个项目类型为 `{label, value, children, ...}`。

36
one/docs/components/autocomplete.md
View File

@@ -32,17 +32,21 @@
| -- | -- | -- | -- |
| ``datasource`` | `Array<string | Object>=` | `[]` | [^datasource] |
| ``value`` | `*` | - | [^prop-value] |
| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑，默认进行大小写不敏感的子串匹配。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑。 |
| ``strict`` | `boolean=` | `false` | 建议下拉面板关闭时，若输入值没有完全匹配建议值，那么会清空输入值。 |
| ``suggest-trigger`` | `string | Array<string>=` | `'input'` | 触发建议下拉面板的时机，可用值有：`'input'`、`'focus'`。 |
| ``placeholder`` | `string=` | | 输入占位符。 |
| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑，默认进行大小写不敏感的子串匹配。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑。 |
| ``suggest-trigger`` | `string | Array<string>=` | `'input'` | 触发建议下拉面板的时机，可用值有：`'input'`、`'focus'`。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``placeholder`` | `string=` | - | 输入占位符。 |
| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
| ``maxlength`` | `number=` | - | 输入字符串的长度限制。 |
| ``strict`` | `boolean=` | `false` | 输入字符串到达长度限制以后是否禁止继续输入。 |
| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
| ``autofocus`` | `boolean=` | `false` | 是否自动获取焦点。 |
^^^datasource
数据源数组，项目为 `Object` 时字段为 `{label, value, children, ...}`。
@@ -72,6 +76,18 @@
建议面板是否展开（如果 `suggestions` 中没有待选项，则即使为 `true` 时面板也会关闭）。
^^^
^^^trim
是否移除前后空格。当为 `true` 时，会移除前后空格，当为 `false` 时，不移除前后空格。设置为字符串时，按指定方式进行移除。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `both` | 移除两端空格。等同于 `true` 时的行为。 |
| `start` | 移除开始空格。 |
| `end` | 移除末尾空格。 |
+++
^^^
### 插槽
| 名称 | 描述 |
@@ -109,7 +125,7 @@
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
| ``suggest`` | 采纳建议时触发，参数是当前值。 |
| ``select`` | 采纳建议时触发，参数是当前值。 |
| ``toggle`` | 提示面板展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 |
| ``clear`` | 清除当前值时触发。 |

1
one/docs/components/column.md
View File

@@ -26,6 +26,7 @@
| ``filter-options`` | `Array<Object>` | - | 筛选选项列表，项目的类型为 `{label, value, options, disabled, ...}`，可参考 [`Select`](./select) 组件的 [`options`](./select#props-options) 属性。 |
| ``filter-title`` | `string=` | - | 筛选下拉的标题。 |
| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
| ``tooltip`` | `boolean | ((item: Object) => string)` | - | 是否当内容溢出时自动显示悬浮提示。默认显示所属 `Table` 组件 [`data`](./table#props-data) 属性数据项中 [`field`](#props-field) 属性对应的字段值。传入函数时，`item` 参数为整个 data 数据项，返回的字符串将作为提示内容展示。 |
^^^sortable
本列是否支持排序。

23
one/docs/components/pagination.md
View File

@@ -6,13 +6,6 @@
[[ demo src="/demo/pagination/size.vue" ]]
### 跳转到指定页
使用 [`goto`](#props-goto) 属性开启跳转到指定页的功能。
[[ demo src="/demo/pagination/goto.vue" ]]
### 每页个数
使用 [`page-size`](#props-page-size) 属性来指定当前每页的个数。
@@ -21,6 +14,12 @@
[[ demo src="/demo/pagination/pages.vue" ]]
### 可选部分
使用 [`show-total`](#props-show-total) / [`show-page-size`](#props-show-page-size) / [`show-goto`](#props-show-goto) 属性来分别控制是否显示项目总数/每页项目数选择器/跳转到指定页。
[[ demo src="/demo/pagination/parts.vue" ]]
## API
### 属性
@@ -29,12 +28,14 @@
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``page`` | `number` | `1` | 当前页码（从 `1` 开始）。 |
| ``total`` | `number` | - | 总页数。 |
| ``total`` | `number` | - | 项目总数。 |
| ``to`` | `string | Object` | `''` | [^to] |
| ``native`` | `boolean` | `false` | 原生链接跳转。 |
| ``page-size`` | `number` | `pagination.pageSize` | [^page-size] |
| ``page-sizes`` | `Array` | `pagination.pageSizes` | 每页个数候选项。 |
| ``goto`` | `boolean` | `false` | 是否显示直接跳转到页码。 |
| ``page-sizes`` | `Array<number>` | `pagination.pageSizes` | 每页个数候选项。 |
| ``show-goto`` | `boolean=` | `false` | 是否显示直接跳转到页码。 |
| ``show-total`` | `boolean=` | `false` | 是否显示项目总数。 |
| ``show-page-size`` | `boolean=` | `false` | 是否显示每页项目数选择器。 |
^^^ui
预设样式。
@@ -64,7 +65,7 @@
| 名称 | 描述 |
| -- | -- |
| ``pagesizechange`` | `page-size` 改变时触发，回调参数为 `(size: number)`。`size` 为新的 `page-size` 值。 |
| ``pagesizechange`` | 每页显示项目被切换时触发，回调参数为 `(size: number)`。`size` 为新的每页显示项目数。 |
| ``redirect`` | 链接跳转时触发，回调参数为 `(page: number, event: Object)`。`page` 为要跳转的目标页码。`event` 为原生的事件对象，在 `native` 为 `true` 时，调用 `event.preventDefault` 可阻止跳转。 |
### 全局配置

12
one/docs/components/table.md
View File

@@ -12,7 +12,7 @@
[[ demo src="/demo/table/basic.vue" ]]
### 高级
### 选择模式与排序
允许自定义唯一键、设定选择模式以及进行排序。
@@ -24,7 +24,7 @@
[[ demo src="/demo/table/filter.vue" ]]
### 内部滚动模式
### 内部滚动
允许启用内部滚动模式，以达到固定表头表底的效果。
@@ -44,7 +44,7 @@
### 表头描述
使用 [`desc`](./column#props-desc) 属性或 [`desc`](./column#slots-desc) 插槽来为表头增加描述信息。
使用 `Column` 组件的 [`desc`](./column#props-desc) 属性或 [`desc`](./column#slots-desc) 插槽来为表头增加描述信息。
[[ demo src="/demo/table/desc.vue" ]]
@@ -64,6 +64,12 @@
[[ demo src="/demo/table/loading.vue" ]]
### 截断提示
使用 `Column` 组件的 [`tooltip`](./column#props-tooltip) 属性来指定在内容截断时显示悬浮提示。
[[ demo src="/demo/table/tooltip.vue" ]]
## API
### 属性