Skip to content

Commit a07d2a5

Browse files
author
xingyan
committed
feat(docs): 完善文档
1 parent 8e653c0 commit a07d2a5

3 files changed

Lines changed: 39 additions & 22 deletions

File tree

‎packages/devui-vue/docs/components/category-search/index.md‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -368,8 +368,10 @@ export default defineComponent({
368368
| before-tag-change | `(tag: ICategorySearchTagItem, searchKey: string, operation: string) => boolean \| Promise<boolean>` | -- | 可选，改变标签前调用的方法，返回 false 可以阻止分类值改变 | |
369369
| show-search-category | `boolean \| SearchConfig` | true | 可选，是否显示搜索关键字下拉菜单 | |
370370
| filter-name-rules | `Record<string, any>[]` | -- | 可选，配置保存过滤器标题的校验规则，详细规则参见 vue-devui 库的 form 组件 | [基本用法](#基本用法) |
371+
| text-config | [TextConfig] | -- | 可选，配置组件默认文案 | [自定义展示模板](#自定义展示模板) |
371372
| extend-config | [ExtendConfig](#extendconfig) | -- | 可选，配置右侧扩展按钮功能 | [自定义扩展按钮](#自定义扩展按钮) |
372373
| tag-max-width | `number` | -- | 可选，单个过滤条件的最大宽度，超过则显示省略号，不设置则不限制 | [自定义展示模板](#自定义展示模板) |
374+
| append-to-body | `boolean` | true | 可选，下拉菜单是否 append to body | |
373375

374376
### CategorySearch 事件
375377

@@ -395,13 +397,13 @@ export default defineComponent({
395397

396398
### CategorySearch 方法
397399

398-
| 方法名 | 说明 | 参数 |
399-
| :------------------ | :------------------------------------------------------------------------- | :------------------------------------------------------------ |
400-
| chooseItem | 调用组件方法处理选中数据，针对`radio`类型，参数为当前 tag 和选中项 | (tag: ICategorySearchTagItem, chooseItem: ITagOption) => void |
401-
| chooseItems | 调用组件方法处理选中数据，针对`checkbox \| label`类型，参数为当前 tag | (tag: ICategorySearchTagItem) => void |
402-
| getTextInputValue | 调用组件方法处理选中数据，针对`textInput`类型，参数为当前 tag 和输入内容 | (tag: ICategorySearchTagItem, inputValue: string) => void |
403-
| getNumberRangeValue | 调用组件方法处理选中数据，针对`numberRange`类型，参数为当前 tag 和输入内容 | (tag: ICategorySearchTagItem, rangeValue: number[]) => void |
404-
|toggleTagMenu|控制某个已选择tag所对应下拉框的展开收起状态，可通过`status`参数指定展开收起状态|`(field: string, status?: boolean) => void`|
400+
| 方法名 | 说明 | 参数 |
401+
| :------------------ | :-------------------------------------------------------------------------------- | :------------------------------------------------------------ |
402+
| chooseItem | 调用组件方法处理选中数据，针对`radio`类型，参数为当前 tag 和选中项 | (tag: ICategorySearchTagItem, chooseItem: ITagOption) => void |
403+
| chooseItems | 调用组件方法处理选中数据，针对`checkbox \| label`类型，参数为当前 tag | (tag: ICategorySearchTagItem) => void |
404+
| getTextInputValue | 调用组件方法处理选中数据，针对`textInput`类型，参数为当前 tag 和输入内容 | (tag: ICategorySearchTagItem, inputValue: string) => void |
405+
| getNumberRangeValue | 调用组件方法处理选中数据，针对`numberRange`类型，参数为当前 tag 和输入内容 | (tag: ICategorySearchTagItem, rangeValue: number[]) => void |
406+
| toggleTagMenu | 控制某个已选择 tag 所对应下拉框的展开收起状态，可通过`status`参数指定展开收起状态 | `(field: string, status?: boolean) => void` |
405407

406408
### 类型定义
407409

@@ -529,3 +531,16 @@ interface ExtendConfig {
529531
};
530532
}
531533
```
534+
535+
#### TextConfig
536+
537+
```ts
538+
interface TextConfig {
539+
keywordName?: string; // 关键字
540+
createFilter?: string; // 保存过滤器
541+
filterTitle?: string; // 过滤器标题
542+
labelConnector?: string; // 链接符，默认'|'
543+
noCategoriesAvailable?: string; // 没有筛选条件
544+
tagMenuEmpty?: string; // 分类下拉菜单无数据展示的内容，默认'暂无数据'
545+
}
546+
```

‎packages/devui-vue/docs/components/dropdown/index.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { defineComponent, ref } from 'vue';
3131
export default defineComponent({
3232
setup() {
3333
return {
34-
position: ref(['bottom-start', 'right','top-end']),
34+
position: ref(['bottom-start', 'right', 'top-end']),
3535
};
3636
},
3737
});
@@ -172,7 +172,7 @@ export default defineComponent({
172172
</li>
173173
<template #menu>
174174
<ul class="list-menu">
175-
<d-dropdown :position="position" :offset="0" >
175+
<d-dropdown :position="position" :offset="0">
176176
<li class="menu-item">
177177
Item 1-1
178178
<i class="icon icon-chevron-right"></i>
@@ -261,14 +261,15 @@ export default defineComponent({
261261
| visible | `boolean` | false | 可选，可以显式指定 dropdown 是否打开 | [触发方式](#触发方式) |
262262
| trigger | [TriggerType](#triggertype) | click | 可选，dropdown 触发方式, click 为点、hover 为悬停、manually 为完全手动控制 | [触发方式](#触发方式) |
263263
| close-scope | [CloseScopeArea](#closescopearea) | all | 可选，点击关闭区域，blank 点击非菜单空白关闭, all 点击菜单内外关闭，none 仅触发元素关闭 | [可关闭区域](#可关闭区域) |
264-
| position | [Placement[]](#placement) | ['bottom'] | 可选，展开位置，按照顺序自动选择位置 | [基本用法](#基本用法) |
264+
| position | [Placement[]](#placement) | ['bottom'] | 可选，展开位置，按照顺序自动选择位置 | [基本用法](#基本用法) |
265265
| offset | `number` \| [OffsetOptions](#offsetoptions) | 4 | 可选，指定与触发元素的间距 | [多级菜单](#多级菜单) |
266266
| shift-offset | `number` | -- | 可选，当设置该参数时，表示启用贴边功能，当指定的 position 放不下时，选择最近的视图边界对齐，此参数可设置相对视图边界的偏移量 |
267267
| close-on-mouse-leave-menu | `boolean` | false | 可选，是否进入菜单后离开菜单的时候关闭菜单 |
268268
| show-animation | `boolean` | true | 可选，控制是否显示动画 |
269269
| overlay-class | `string` | -- | 可选，自定义 overlay 的样式 |
270270
| destroy-on-hide | `boolean` | true | 可选，是否在关闭 dropdown 时将其销毁 |
271-
| teleport | `string \| HTMLElement` | 'body' | 可选，挂载节点，等同于 Teleport 组件的[to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) |
271+
| teleport | `string \| HTMLElement` | 'body' | 可选，挂载节点，等同于 Teleport 组件的[to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) |
272+
| append-to-body | `boolean` | true | 可选，下拉菜单是否 append to body |
272273

273274
### Dropdown 事件
274275

‎packages/devui-vue/docs/components/select/index.md‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ export default defineComponent({
198198
```vue
199199
<template>
200200
<div>
201-
<d-button @click.stop="toggleChange" @pointerup.stop="() => {}" class="mb-2">展开 / 隐藏</d-button>
201+
<d-button @click.stop="toggleChange" @pointerup.stop="() => {}" class="mb-2">展开 / 隐藏</d-button>
202202
<d-select ref="demoSelect" v-model="toggleValue" :options="options" @load-more="loadMore"></d-select>
203203
</div>
204204
</template>
@@ -219,7 +219,7 @@ export default defineComponent({
219219
demoSelect.value.toggleChange(visitable.value);
220220
};
221221
const loadMore = () => {
222-
if(options.length <= 20) {
222+
if (options.length <= 20) {
223223
options.push(...newItems);
224224
console.log('load more');
225225
}
@@ -531,22 +531,23 @@ export default defineComponent({
531531
| loading | `boolean` | false | 可选, 配置下拉选项是否远程加载，配合 loading-text 使用 | [远程加载数据](#远程加载数据) |
532532
| loading-text | `string` | '加载中' | 可选, 远程搜索时显示的文本 | [远程加载数据](#远程加载数据) |
533533
| multiple-limit | `number` | '0' | 可选, multiple 属性设置为 true 时生效，表示用户最多可以选择的项目数， 为 0 则不限制 | [多选](#多选) |
534-
|show-glow-style|`boolean`|true|可选，是否展示悬浮发光效果||
535-
|menu-class|`string`|''|可选，自定义下拉菜单的样式名||
536-
|max-length|`number`|--|可选，可筛选时输入框可输入的最大长度||
534+
| show-glow-style | `boolean` | true | 可选，是否展示悬浮发光效果 | |
535+
| menu-class | `string` | '' | 可选，自定义下拉菜单的样式名 | |
536+
| max-length | `number` | -- | 可选，可筛选时输入框可输入的最大长度 | |
537+
| append-to-body | `boolean` | true | 可选，下拉菜单是否 append to body | |
537538

538539
### Select 事件
539540

540-
| 事件名 | 类型 | 说明 | 跳转 Demo |
541-
| :------------ | :------------------------ | :------------------------------------------------------------- | :-------- |
542-
| value-change | `Function(data)` | 可选，当选中值发生变化时触发，参数为目前选中的值(多选时为数组) | |
543-
| toggle-change | `Function(boolean)` | 可选，下拉打开关闭 toggle 事件 | |
541+
| 事件名 | 类型 | 说明 | 跳转 Demo |
542+
| :------------ | :------------------------ | :------------------------------------------------------------- | :------------------------------------ |
543+
| value-change | `Function(data)` | 可选，当选中值发生变化时触发，参数为目前选中的值(多选时为数组) | |
544+
| toggle-change | `Function(boolean)` | 可选，下拉打开关闭 toggle 事件 | |
544545
| focus | `Function(e: FocusEvent)` | 可选，获取焦点时触发 |
545546
| blur | `Function(e: FocusEvent)` | 可选，失去焦点时触发 |
546547
| clear | `Function()` | 可选, 通过右侧删除图标清空所有选项时触发 |
547548
| remove-tag | `Function(value)` | 可选，多选时删除单个 tag 时触发，参数为当前 tag 的值 |
548-
| load-more | `Function()` | 可选，下拉框有滚动条时滚动到底部触发 |[下拉列表显隐方法](#下拉列表显隐方法)|
549-
| input-change | `Function(value)` | 可选，输入框输入内容时触发，参数为输入的值 |[筛选、搜索选项](#筛选、搜索选项)|
549+
| load-more | `Function()` | 可选，下拉框有滚动条时滚动到底部触发 | [下拉列表显隐方法](#下拉列表显隐方法) |
550+
| input-change | `Function(value)` | 可选，输入框输入内容时触发，参数为输入的值 | [筛选、搜索选项](#筛选、搜索选项) |
550551

551552
### Select 插槽
552553

0 commit comments

Comments
 (0)