fix: 优化分页子组件

Author: dong

devui/pagination/src/components/jump-page.tsx

@@ -1,37 +1,85 @@
-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<typeof jumpPageProps>
 
 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
  } = this
 
  return (
  <div class="devui-jump-container">
- {goToText}
+ {goToText} 
 
  <d-input
- class={['devui-input', size ? 'devui-input-' + size : '']}
- value={String(inputPageNum)}
+ class={['devui-pagination-input', size ? 'devui-pagination-input-' + size : '']}
+ size={size}
+ value={String(inputNum)}
  onUpdate:value={jumpPageChange}
  onKeydown={jump}
- />
+ /> 
 
  {
  // TODO 加入国际化后，替换为当前语言为中文的时候加上 '页'
@@ -42,7 +90,7 @@ export default defineComponent({
  <div
  class={['devui-jump-button', size ? 'devui-jump-size-' + size : 'devui-jump-size-default']}
  onClick={jump.bind(null, 'btn')}
- title="跳至"
+ title={goToText}
  >
  <div class="devui-pagination-go"></div>
  </div>

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
 

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;
  }
  }
 

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<string, string | number>) => {
+ 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}
  />
  }
  {