diff --git a/devui/loading/src/loading.scss b/devui/loading/src/loading.scss index 2e9fbef5101c3d6df424b8f95e2dbcac79357de1..025dc9e6569013bb2d6fbf6364f80ba99d2f7614 100644 --- a/devui/loading/src/loading.scss +++ b/devui/loading/src/loading.scss @@ -48,7 +48,6 @@ } .devui-loading-text { - vertical-align: super; margin-left: 10px; } diff --git a/devui/pagination/src/components/jump-page.tsx b/devui/pagination/src/components/jump-page.tsx index 096a56c2cea758573acafd05431c0051641a4bf7..a4e7e2f8bf85c806f0085a3551d168a61a81a99e 100644 --- a/devui/pagination/src/components/jump-page.tsx +++ b/devui/pagination/src/components/jump-page.tsx @@ -1,22 +1,69 @@ -import { defineComponent, PropType } from 'vue'; +import { defineComponent, PropType, ref, watch, toRefs, ExtractPropTypes } from 'vue'; + +const jumpPageProps = { + goToText: String, + size: { + type: String as PropType<'lg' | '' | 'sm'>, + default: '' + }, + pageIndex: Number, + showJumpButton: Boolean, + totalPages: Number, + cursor: Number, + onChangeCursorEmit: Function as PropType<(v: number) => void> +} + +type JumpPageProps = ExtractPropTypes export default defineComponent({ - props: { - goToText: String, - size: { - type: String as PropType<'lg' | '' | 'sm'>, - default: '' - }, - inputPageNum: Number, - jump: Function, - jumpPageChange: Function, - showJumpButton: Boolean - } as const, + props: jumpPageProps, + emits: ['changeCursorEmit'], + setup(props: JumpPageProps, { emit }) { + const { + pageIndex, + totalPages, + cursor + } = toRefs(props) + + // 输入跳转页码 + const inputNum = ref(pageIndex.value) + watch( + () => pageIndex.value, + (val: number) => { + inputNum.value = val + } + ) + let curPage = pageIndex.value + const jumpPageChange = (currentPage: number) => { + curPage = +currentPage + inputNum.value = currentPage + if (isNaN(currentPage)) { + setTimeout(() => { + inputNum.value = pageIndex.value + }, 300) + } + } + // 跳转指定页码 + const jump = (e: KeyboardEvent | 'btn') => { + if (curPage > totalPages.value) { + return + } + if ((e === 'btn' || e.key === 'Enter') && cursor.value !== curPage) { + emit('changeCursorEmit', curPage) + } + } + + return { + inputNum, + jumpPageChange, + jump + } + }, render() { const { goToText, size, - inputPageNum, + inputNum, jumpPageChange, jump, showJumpButton @@ -24,14 +71,15 @@ export default defineComponent({ return (
- {goToText} + {goToText} + /> { // TODO 加入国际化后，替换为当前语言为中文的时候加上 '页' @@ -42,7 +90,7 @@ export default defineComponent({
diff --git a/devui/pagination/src/components/page-nums.tsx b/devui/pagination/src/components/page-nums.tsx index 8ebb51d1121d2c7ab2683756b27ab058c61da6c6..eaccee591e463c646433af9d79c8d9f3d8fd30d9 100644 --- a/devui/pagination/src/components/page-nums.tsx +++ b/devui/pagination/src/components/page-nums.tsx @@ -12,7 +12,7 @@ const pageNumBtnProps = { cursor: Number, maxItems: Number, totalPages: Number, - onChangeCursorEmit: Function, + onChangeCursorEmit: Function as PropType<(v: number) => void>, showTruePageIndex: Boolean } as const diff --git a/devui/pagination/src/pagination.scss b/devui/pagination/src/pagination.scss index fa28bfe66b7422528df77cd18e214ea120fd3648..c950daef8cf0c4e0bbe9c26f569fb3d6ac4eed35 100644 --- a/devui/pagination/src/pagination.scss +++ b/devui/pagination/src/pagination.scss @@ -25,11 +25,11 @@ max-width: 100px; .devui-select-input { - height: 44px; + height: 46px; } .devui-select-item { - height: 44px; + height: 46px; } } } @@ -124,25 +124,15 @@ vertical-align: middle; align-items: center; - .devui-input { + .devui-pagination-input { display: inline-block; width: 42px; - height: 28px; vertical-align: middle; margin: 0 3px; + } - &.devui-input-sm { - height: 24px; - padding: 4px 4px; - font-size: $devui-font-size; - line-height: 1.5; - border-radius: $devui-border-radius; - } - - &.devui-input-lg { - width: 56px; - height: 46px; - } + .devui-pagination-input-lg { + width: 56px; } } diff --git a/devui/pagination/src/pagination.tsx b/devui/pagination/src/pagination.tsx index 6e7fd2e83fe6586a284934b854cae55e261ee266..a27c319bc5db3d4101f368119f9a7608d99b2b35 100644 --- a/devui/pagination/src/pagination.tsx +++ b/devui/pagination/src/pagination.tsx @@ -1,9 +1,7 @@ -import { defineComponent, computed, ref, nextTick } from 'vue' +import { defineComponent, computed, nextTick } from 'vue' import { ComponentProps, componentProps } from './use-pagination' import { liteSelectOptions } from './utils' -import clickoutsideDirective from '../../shared/devui-directive/clickoutside' - import ConfigMenu from './components/config-menu' import JumpPage from './components/jump-page' import PageNumBtn from './components/page-nums' @@ -12,9 +10,6 @@ import './pagination.scss' export default defineComponent({ name: 'DPagination', - directives: { - clickoutside: clickoutsideDirective - }, components: { ConfigMenu, JumpPage, @@ -41,16 +36,6 @@ export default defineComponent({ emit('update:pageIndex', val) } }) - const changePageNo = ref(props.pageIndex) - // 输入框显示的页码 - const inputPageNum = computed({ - get() { - return props.pageIndex - }, - set(val: number) { - changePageNo.value = val - } - }) // 每页显示最大条目数量 const currentPageSize = computed({ get() { @@ -65,27 +50,12 @@ export default defineComponent({ const changeCursorEmit = (val: number) => { cursor.value = val - changePageNo.value = val emit('pageIndexChange', val) } - // 输入跳转页码 - const jumpPageChange = (currentPage: string) => { - const curPage = +currentPage - if (isNaN(curPage) || curPage < 1 || curPage > totalPages.value) { - inputPageNum.value = props.pageIndex - return - } - inputPageNum.value = curPage - } - // 跳转指定页码 - const jump = (e: KeyboardEvent | 'btn') => { - if ((e === 'btn' || e.key === 'Enter') && cursor.value !== changePageNo.value) { - cursor.value = changePageNo.value - } - } + // 每页条数改变 - const pageSizeChange = (value: number) => { - currentPageSize.value = value + const pageSizeChange = (val: Record) => { + currentPageSize.value = val.value as number // 页数改变后，如果当前页码超出最大页码时修正 if (props.autoFixPageIndex) { nextTick(() => { @@ -94,7 +64,7 @@ export default defineComponent({ } }) } - emit('pageSizeChange', value) + emit('pageSizeChange', val.value as number) } // 极简模式下的跳转页码 const litePageIndexChange = (page: {name: string; value: number;}) => { @@ -104,10 +74,7 @@ export default defineComponent({ return { cursor, totalPages, - jump, changeCursorEmit, - inputPageNum, - jumpPageChange, currentPageSize, pageSizeChange, litePageOptions, @@ -118,6 +85,7 @@ export default defineComponent({ const { total, + pageIndex, pageSizeOptions, pageSizeDirection, preLink, @@ -139,9 +107,6 @@ export default defineComponent({ cursor, totalPages, - jump, - inputPageNum, - jumpPageChange, currentPageSize, pageSizeChange, changeCursorEmit, @@ -206,11 +171,12 @@ export default defineComponent({ {...{ goToText, size, - inputPageNum, - jumpPageChange, - jump, + pageIndex, + totalPages, + cursor, showJumpButton }} + onChangeCursorEmit={changeCursorEmit} /> } { diff --git a/sites/components/loading/customStyle.scss b/sites/components/loading/customStyle.scss deleted file mode 100644 index 5f89cd60d57fd6073dd21b39d204dce4dbb3d192..0000000000000000000000000000000000000000 --- a/sites/components/loading/customStyle.scss +++ /dev/null @@ -1,20 +0,0 @@ -.devui-infinity-loading { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} - -.devui-circle-loading-container-2 { - position: absolute; - left: 5px; - top: 50%; - transform: translateY(-50%); -} - -.devui-circle-loading-container-3 { - position: absolute; - right: -20px; - top: 50%; - transform: translateY(-50%); -} \ No newline at end of file diff --git a/sites/components/loading/index.md b/sites/components/loading/index.md index 69e75b83bfe632ebef6a9336e821f65e9dafe692..2a8521d152bed88eaa9ca1bff29a442e17fde25c 100644 --- a/sites/components/loading/index.md +++ b/sites/components/loading/index.md @@ -7,32 +7,11 @@ 当执行指令时间较长（需要数秒以上）时，向用户展示正在执行的状态。 - ### 基本用法 展示加载表格数据的场景中的基本使用方法。 +:::demo -click me! - - - - - - - - - - - -
序号姓名队伍操作
{{index}}张家齐跳水跳水队
- -```html +```vue - ``` +::: + ### 多promise 支持多个promise。 +:::demo -click me! - -
loading will show here2
- -```html +```vue - ``` +::: ### 自定义样式 通过 templateRef 自定义loading样式。 +:::demo -Loading Style 1 - -Loading Style 2 - -Loading Style 3 - -
loading will show here1
- -```html +```vue - -``` -```scss -// ./customStyle.scss + + ``` +::: ### 服务方式调用 使用服务的方式全屏加载loading组件或者在指定宿主上加载loading组件。 +:::demo -click me show full screen loading! - -click me show loading in target! - -click me close loading in target! - -
loading will show here3
- -```html +```vue - ``` +::: ### 参数 +dLoading 参数 | **参数** | **类型** | **默认** | **说明** | **跳转 Demo** | | ------------------ | ------------------------------------------------------------ | ------------------------- | ------------------------------------------------------------ | ---------------------------- | -| v-dLoading | Promise\ / Array\\> / Boolean / undefined | -- | 可选，指令方式，控制 loading 状态 | [基本用法](#基本用法) | -| target | Element | document.body | 可选，服务方式，Loading 需要覆盖的 DOM 节点 | [服务方式调用](#服务方式调用) | -| message | String | -- | 可选，loading 时的提示信息 | [多promise](#多promise) | -| loadingTemplateRef | VNode | -- | 可选，自定义 loading 模板 | [自定义样式](#自定义样式) | -| backdrop | Boolean | true | 可选，loading 时是否显示遮罩 | [基本用法](#基本用法) | -| positionType | String | relative | 可选，指定`dLoading`宿主元素的定位类型,取值与 css position 属性一致。 | [基本用法](#基本用法) | -| view | {top?:string,left?:string} | {top: '50%', left: '50%'} | 可选，调整 loading 的显示位置，相对于宿主元素的顶部距离与左侧距离 | [基本用法](#基本用法) | -| zIndex | Number | -- | 可选，loading加载提示的 z-index 值 | [基本用法](#基本用法) | - - - \ No newline at end of file diff --git a/sites/components/pagination/index.md b/sites/components/pagination/index.md index b21a10e54af279e5c7e04d13d42697304fc5adf4..dad91b8a72be43a9b2158af8a8de15e14752e51a 100644 --- a/sites/components/pagination/index.md +++ b/sites/components/pagination/index.md @@ -9,214 +9,158 @@ ### 基本用法 -**size = 'sm'** - - - - -**size = 'md'** - - - - -**size = 'lg'** - - - - -**Custom Style** - - - -```html -size = 'sm' - - -size = 'md' - - -size = 'lg' - - -Custom Style - +:::demo + +```vue + + ``` +::: ### 极简模式 极简模式适用于一些有大量信息的页面，可以简化页面的复杂度。 - -**Simple Mode** - - - - -**Super Simple Mode** - - - - -**haveConfigMenu = "true"** - - -
-
show field
-
setting
-
-
-
display method
-
- - +:::demo + + +```vue + + + + ``` - +::: ### 多种配置 支持设置输入跳转、显示跳转按钮；设置pageSize等功能。 - -
- - - -
- - - -
- - - -```html - - - - - -``` - - -### 特殊情况 -特殊场景下分页器的显示。 - -
-When the value of pageIndex exceeds the maximum page number, enable showTruePageIndex to display the value of pageIndex -
- - - - -
-When the value of pageIndex exceeds the maximum page number, the showTruePageIndex function is disabled and only the maximum page number is displayed. -
- - - - -
Default Mode
- - - - -
- total = 0 - total = 5 - total = 15 -
- -
Simple Mode
- - - -
- total = 0 - total = 20 - total = 30000 - total = 100000 - index = 2 - index = 3 -
- -```html -
-When the value of pageIndex exceeds the maximum page number, enable showTruePageIndex to display the value of pageIndex -
- - -
-When the value of pageIndex exceeds the maximum page number, the showTruePageIndex function is disabled and only the maximum page number is displayed. -
- - -
Default Mode
- -
- total = 0 - total = 5 - total = 15 -
- -
Simple Mode
- -
- total = 0 - total = 20 - total = 30000 - total = 100000 - index = 2 - index = 3 -
-``` - - +``` +::: + +### 特殊情况 +特殊场景下分页器的显示。 +:::demo + + +```vue + + \ No newline at end of file + +``` +::: + +### 参数 + +d-pagination 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| ----------------- | ------------------------------------------------------------ | -------------------------- | ------------------------------------------------------------ | --------------------- | +| pageSize | `number` | 10 | 可选，每页显示最大条目数量 | [基本用法](#基本用法) | +| total | `number` | 0 | 可选，显示的总条目数 | [基本用法](#基本用法) | +| pageSizeOptions | `number[] ` | 10 | 可选，分页每页最大条目数量的下拉框的数据源，默认有四种选择 5, 10, 20, 50 | [多种配置](#多种配置) | +| pageSizeDirection | `Array<`[`AppendToBodyDirection`](#appendtobodydirection) `\|` [`ConnectedPosition`](#connectedposition)`>` | ['centerDown', 'centerUp'] | 可选，设置分页每页条目的下拉框展示的方向 | [多种配置](#多种配置) | +| pageIndex | `number` | 1 | 可选，初始化页码 | [基本用法](#基本用法) | +| maxItems | `number` | 10 | 可选，分页最多显示几个按钮 | [基本用法](#基本用法) | +| preLink | `string` | -- | 可选，上一页按钮显示图标,默认设置为左箭头图标 | [基本用法](#基本用法) | +| nextLink | `string` | -- | 可选， 下一页按钮显示图标,默认设置为右箭头图标 | [基本用法](#基本用法) | +| size | `number` | '' | 可选，分页组件尺寸，有三种选择 lg,``,sm,分别代表大，中，小 | [基本用法](#基本用法) | +| canJumpPage | `boolean` | false | 可选，是否显示分页输入跳转 | [基本用法](#基本用法) | +| canChangePageSize | `boolean` | false | 可选，是否显示用于选择更改分页每页最大条目数量的下拉框 | [基本用法](#基本用法) | +| canViewTotal | `boolean` | false | 可选，是否显示总条目 | [基本用法](#基本用法) | +| totalItemText | `string` | '所有条目' | 可选，总条目文本 | [极简模式](#极简模式) | +| goToText | `string` | '跳至' | 可选，总条目文本 | [基本用法](#基本用法) | +| showJumpButton | `boolean` | false | 可选，是否显示跳转按钮 | [多种配置](#多种配置) | +| showTruePageIndex | `boolean` | false | 可选，页码超出分页范围时候也显示当前页码的开关 | [多种配置](#多种配置) | +| lite | `boolean` | false | 可选，是否切换为极简模式 | [极简模式](#极简模式) | +| showPageSelector | `boolean` | true | 可选，`极简模式`下是否显示页码下拉 | [极简模式](#极简模式) | +| haveConfigMenu | `boolean` | false | 可选，`极简模式`下是否显示配置 | [极简模式](#极简模式) | +| autoFixPageIndex | `boolean` | true | 可选，改变 pageSize 时是否自动修正页码，若`pageSizeChange`事件中会对`pageIndex`做处理，建议设置为`false` | [极简模式](#极简模式) | +| autoHide | `boolean` | false | 可选，是否自动隐藏, autoHide为 true 并且 pageSizeOptions最小值 > total 不展示分页 | [极简模式](#极简模式) | + +d-pagination 事件 + +| 参数 | 类型 | 说明 | 跳转 Demo | +| --------------- | -------------------- | ---------------------------------------------------------- | --------------------- | +| pageIndexChange | `EventEmitter` | 可选，页码变化的回调,返回当前页码值 | [多种配置](#多种配置) | +| pageSizeChange | `EventEmitter` | 可选，每页最大条目数量变更时的回调，返回当前每页显示条目数 | [多种配置](#多种配置) | + +**接口 & 类型定义** + +##### AppendToBodyDirection + +```ts +export type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp'; +``` + +##### ConnectedPosition + +```ts +export interface ConnectedPosition { + originX: 'start' | 'center' | 'end'; + originY: 'top' | 'center' | 'bottom'; + + overlayX: 'start' | 'center' | 'end'; + overlayY: 'top' | 'center' | 'bottom'; + + weight?: number; + offsetX?: number; + offsetY?: number; + panelClass?: string | string[]; +} +``` +