xrk-components 0.3.0 → 0.3.3

package/packages/base/dialog/dialog.vue

@@ -1,214 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-07-05 10:11:16
--->
-<template>
-  <el-dialog
-    :custom-class="customClass"
-    :modelValue="show"
-    :closeOnClickModal="closeOnClickModal"
-    :closeOnPressEscape="closeOnPressEscape"
-    :appendToBody="appendToBody"
-    :destroyOnClose="destroyOnClose"
-    :center="center"
-    :width="width"
-    :showClose="showClose"
-    :before-close="hanldeBeforeClose"
-    @closed="handleClosed"
-  >
-    <template v-slot:header>
-      <base-dialog-render
-        v-if="titleRender"
-        :render="titleRender"
-      ></base-dialog-render>
-      <span v-else-if="title">{{ title }}</span>
-      <template v-else>
-        <slot name="header"></slot>
-      </template>
-    </template>
-
-    <base-dialog-render
-      v-if="contentRender"
-      :render="contentRender"
-    ></base-dialog-render>
-    <template v-else>
-      <slot></slot>
-    </template>
-
-    <template v-slot:footer>
-      <base-dialog-render
-        v-if="footerRender"
-        :render="footerRender"
-      ></base-dialog-render>
-      <div v-else>
-        <base-button
-          v-if="cancelBtnConfig.show"
-          v-bind="cancelBtnConfig"
-          :click="handleCancelClick"
-        >
-          {{ cancelBtnConfig.content }}
-        </base-button>
-        <base-button
-          v-if="confirmBtnConfig.show"
-          v-bind="confirmBtnConfig"
-          :click="handleConfirmClick"
-        >
-          {{ confirmBtnConfig.content }}
-        </base-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-dialog'
-};
-</script>
-<script lang="tsx" setup>
-import { ElDialog } from 'element-plus';
-import { BaseButton } from '../button';
-import { Component, computed, defineComponent, ref, watch } from 'vue';
-import { check } from 'xrk-tools';
-import { BaseDialogProps } from './index';
-import { isFunction } from '../../../tools/check';
-const _props = withDefaults(
-  defineProps<{
-    modelValue?: boolean;
-    closeOnClickModal?: boolean;
-    closeOnPressEscape?: boolean;
-    appendToBody?: boolean;
-    destroyOnClose?: boolean;
-    center?: boolean;
-    showClose?: boolean;
-    beforeClose?: (done: Function) => Promise<void> | void;
-    beforeCancel?: (done: Function) => Promise<void> | void;
-    beforeConfirm?: (done: Function) => Promise<void> | void;
-
-    customClass?: string;
-    width?: string | number;
-    title?: string;
-    content?: string;
-    titleRender?: () => Component;
-    contentRender?: () => Component;
-    footerRender?: () => Component;
-
-    confirmBtnConfig?: any;
-    cancelBtnConfig?: any;
-  }>(),
-  {
-    title: '提示',
-    width: '50%',
-    customClass: '_base-dialog',
-    modelValue: true,
-    closeOnClickModal: false,
-    closeOnPressEscape: false,
-    destroyOnClose: true,
-    appendToBody: true,
-    showClose: false,
-    center: true,
-    cancelBtnConfig: () => ({ show: true, content: '取消', plain: true }),
-    confirmBtnConfig: () => ({ show: true, content: '确定' })
-  }
-);
-
-const props = _props as Readonly<BaseDialogProps>;
-
-const emits = defineEmits<{
-  (event: 'update:modelValue', activeValue: any): void;
-  (event: 'close'): void;
-}>();
-
-const show = ref<boolean>(props.modelValue || false);
-watch(
-  () => props.modelValue,
-  newV => {
-    show.value = newV || false;
-  }
-);
-
-const BaseDialogRender = defineComponent({
-  name: 'dialog-render',
-  props: {
-    render: Function
-  },
-  render: (ctx: { render: Function }) => {
-    return ctx.render ? ctx.render() : '';
-  }
-});
-
-const hanldeBeforeClose = async (done: Function) => {
-  if (isFunction(props.beforeClose)) {
-    await props.beforeClose(done);
-  } else {
-    done();
-  }
-  emits('close');
-};
-
-const handleClosed = () => {
-  emits('update:modelValue', !props.modelValue);
-};
-
-const handleCancelClick = async () => {
-  if (isFunction(props.beforeCancel)) {
-    await props.beforeCancel(() => {
-      show.value = false;
-    });
-  } else {
-    show.value = false;
-  }
-  emits('close');
-};
-
-const handleConfirmClick = async () => {
-  if (isFunction(props.beforeConfirm)) {
-    await props.beforeConfirm(() => {
-      show.value = false;
-    });
-  } else {
-    show.value = false;
-  }
-  emits('close');
-};
-</script>
-
-<style lang="scss">
-.el-popup-parent--hidden {
-  overflow: hidden;
-}
-._base-dialog {
-  --xrk-dialog-border-radius: 4px !important;
-  max-height: 80vh;
-  overflow: hidden;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  flex-direction: column;
-  .xrk-dialog__header {
-    font-size: 18px;
-    font-weight: 500;
-    color: #303133;
-    line-height: 1.4;
-    margin-right: 0;
-  }
-  .xrk-dialog__body {
-    height: 100%;
-    overflow-y: auto;
-    padding: 25px var(--xrk-dialog-padding-primary) !important;
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: #0003;
-      border-radius: 10px;
-      transition: all 0.2s ease-in-out;
-    }
-    &::-webkit-scrollbar-track {
-      border-radius: 10px;
-    }
-  }
-}
-</style>

package/packages/base/dialog/index.ts

@@ -1,57 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-05 10:17:03
- */
-import { Component, DefineComponent, h, render } from 'vue';
-import { BaseButtonProps } from '../button';
-import _BaseDialog from './dialog.vue';
-
-export type BaseDialogProps = {
-  modelValue?: boolean;
-  closeOnClickModal?: boolean;
-  closeOnPressEscape?: boolean;
-  appendToBody?: boolean;
-  destroyOnClose?: boolean;
-  center?: boolean;
-  showClose?: boolean;
-  beforeClose?: (done: Function) => Promise<void> | void;
-  beforeCancel?: (done: Function) => Promise<void> | void;
-  beforeConfirm?: (done: Function) => Promise<void> | void;
-
-  customClass?: string;
-  width?: string | number;
-  title?: string;
-  content?: string;
-  titleRender?: () => Component;
-  contentRender?: () => Component;
-  footerRender?: () => Component;
-
-  confirmBtnConfig?: DialogBtnConfigProps;
-  cancelBtnConfig?: DialogBtnConfigProps;
-
-  onClose?: () => Promise<void> | void;
-};
-
-export interface DialogBtnConfigProps extends BaseButtonProps {
-  show?: boolean;
-  content?: string;
-}
-
-export const BaseDialog = _BaseDialog as DefineComponent<BaseDialogProps>;
-
-export const createDialog = (config?: BaseDialogProps) => {
-  const container = document.createElement('div');
-  render(
-    h(_BaseDialog, {
-      modelValue: true,
-      ...(config || {}),
-      appendToBody: false,
-      onClose: async () => {
-        await config?.onClose?.();
-        document.querySelector('body')?.removeChild(container);
-      }
-    }),
-    container
-  );
-  document.querySelector('body')?.appendChild(container);
-};

package/packages/base/form/form-item.vue

@@ -1,57 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-29 14:51:11
--->
-<template>
-  <el-form-item
-    ref="BaseFormItem"
-    :prop="prop"
-    :label="label"
-    :labelWidth="labelWidth"
-    :required="required"
-    :rules="rules"
-    :error="error"
-    :showMessage="showMessage"
-    :inlineMessage="inlineMessage"
-    :size="size"
-  >
-    <slot></slot>
-  </el-form-item>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-form-item'
-};
-</script>
-<script lang="tsx" setup>
-import { ElFormItem, FormItemRule } from 'element-plus';
-import { withDefaults, ref } from 'vue';
-
-withDefaults(
-  defineProps<{
-    prop: any; // model 的键名。 它可以是一个路径数组(例如 ['a', 'b', 0])。
-    label?: string; // 标签文本
-    labelWidth?: string | number | 'auto'; // 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto
-    required?: boolean; // 是否为必填项，如不设置，则会根据校验规则确认
-    rules?: any; // 表单验证规则
-    error?: string; // 表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息。
-    showMessage?: boolean; // 是否显示校验错误信息
-    inlineMessage?: boolean; // 是否以行内形式展示校验信息
-    size?: 'large' | 'default' | 'small'; // 用于控制该表单内组件的尺寸
-  }>(),
-  {
-    labelWidth: 'auto',
-    showMessage: true
-  }
-);
-
-const BaseFormItem = ref<any>(null);
-
-defineExpose({
-  resetField: BaseFormItem.value?.resetField,
-  clearValidate: BaseFormItem.value?.clearValidate
-});
-</script>
-
-<style lang="scss" scoped></style>

package/packages/base/form/form.vue

@@ -1,70 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-29 14:51:11
--->
-<template>
-  <el-form
-    ref="BaseForm"
-    :model="model"
-    :rules="rules"
-    :inline="inline"
-    :labelPosition="labelPosition"
-    :labelWidth="labelWidth"
-    :labelSuffix="labelSuffix"
-    :hideRequiredAsterisk="hideRequiredAsterisk"
-    :showMessage="showMessage"
-    :inlineMessage="inlineMessage"
-    :statusIcon="statusIcon"
-    :validateOnRuleChange="validateOnRuleChange"
-    :size="size"
-    :disabled="disabled"
-  >
-    <slot></slot>
-  </el-form>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-form'
-};
-</script>
-<script lang="tsx" setup>
-import { ElForm, FormRules } from 'element-plus';
-import { withDefaults, ref } from 'vue';
-
-withDefaults(
-  defineProps<{
-    model: any; // 表单数据对象
-    rules?: any; // 表单验证规则
-    inline?: boolean; // 	行内表单模式
-    labelPosition?: 'left' | 'right' | 'top'; // 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性
-    labelWidth?: string | number | 'auto'; // 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto
-    labelSuffix?: string; // 表单域标签的后缀
-    hideRequiredAsterisk?: boolean; // 是否显示必填字段的标签旁边的红色星号
-    showMessage?: boolean; // 是否显示校验错误信息
-    inlineMessage?: boolean; // 是否以行内形式展示校验信息
-    statusIcon?: boolean; // 是否在输入框中显示校验结果反馈图标
-    validateOnRuleChange?: boolean; // 是否在 rules 属性改变后立即触发一次验证
-    size?: 'large' | 'default' | 'small'; // 用于控制该表单内组件的尺寸
-    disabled?: boolean; // 是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性
-  }>(),
-  {
-    labelPosition: 'left',
-    labelWidth: 'auto',
-    showMessage: true,
-    validateOnRuleChange: true
-  }
-);
-
-const BaseForm = ref<any>(null);
-
-defineExpose({
-  validate: BaseForm.value?.validate,
-  validateField: BaseForm.value?.validateField,
-  resetFields: BaseForm.value?.resetFields,
-  scrollToField: BaseForm.value?.scrollToField,
-  clearValidate: BaseForm.value?.clearValidate
-});
-</script>
-
-<style lang="scss" scoped></style>

package/packages/base/form/index.ts

@@ -1,39 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-01 11:09:32
- */
-import { FormItemRule, FormRules } from 'element-plus';
-
-import _BaseForm from './form.vue';
-import _BaseFormItem from './form-item.vue';
-import { DefineComponent } from 'vue';
-
-export type BaseFormProps = {
-  model: Record<string, any>; // 表单数据对象
-  rules?: FormRules; // 表单验证规则
-  inline?: boolean; // 	行内表单模式
-  labelPosition?: 'left' | 'right' | 'top'; // 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性
-  labelWidth?: string | number | 'auto'; // 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto
-  labelSuffix?: string; // 表单域标签的后缀
-  hideRequiredAsterisk?: boolean; // 是否显示必填字段的标签旁边的红色星号
-  showMessage?: boolean; // 是否显示校验错误信息
-  inlineMessage?: boolean; // 是否以行内形式展示校验信息
-  statusIcon?: boolean; // 是否在输入框中显示校验结果反馈图标
-  validateOnRuleChange?: boolean; // 是否在 rules 属性改变后立即触发一次验证
-  size?: 'large' | 'default' | 'small'; // 用于控制该表单内组件的尺寸
-  disabled?: boolean; // 是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性
-};
-export type BaseFormItemProps = {
-  prop: string | Array<string>; // model 的键名。 它可以是一个路径数组(例如 ['a', 'b', 0])。
-  label?: string; // 标签文本
-  labelWidth?: string | number | 'auto'; // 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto
-  required?: boolean; // 是否为必填项，如不设置，则会根据校验规则确认
-  rules?: FormItemRule | Array<FormItemRule>; // 表单验证规则
-  error?: string; // 表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息。
-  showMessage?: boolean; // 是否显示校验错误信息
-  inlineMessage?: boolean; // 是否以行内形式展示校验信息
-  size?: 'large' | 'default' | 'small'; // 用于控制该表单内组件的尺寸
-};
-
-export const BaseFormItem = _BaseFormItem as DefineComponent<BaseFormItemProps>;
-export const BaseForm = _BaseForm as DefineComponent<BaseFormProps>;

package/packages/base/input/index.ts

@@ -1,50 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-06-30 22:57:42
- */
-import { Component, CSSProperties, DefineComponent } from 'vue';
-import _BaseInput from './input.vue';
-
-export interface BaseInputProps {
-  modelValue?: string | number; // 选中项绑定值
-  type?: 'text' | 'textarea' | 'password' | 'number'; // 类型
-  maxlength?: string | number; // 最大输入长度
-  minlength?: string | number; // 原生属性，最小输入长度
-  showWordLimit?: boolean; // 是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效
-  placeholder?: string; // 输入框占位文本
-  clearable?: boolean; // 是否可清空
-  formatter?: (value: string | number) => string; // 指定输入值的格式。(只有当 type 是"text"时才能工作)
-  parser?: (value: string) => string; // 指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用)
-  showPassword?: boolean; // 是否显示切换密码图标
-  disabled?: boolean; // 是否禁用
-  size?: 'large' | 'default' | 'small'; // 输入框尺寸，只在 type 不为 'textarea' 时有效
-  prefixIcon?: string | Component; // 自定义前缀图标
-  suffixIcon?: string | Component; // 自定义后缀图标
-  rows?: number; // 输入框行数，仅 type 为 'textarea' 时有效
-  autosize?: boolean | { minRows?: number; maxRows?: number }; // textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }
-  autocomplete?: string; // 原生 autocomplete 属性
-  name?: string; // 等价于原生 input name 属性
-  readonly?: boolean; // 原生  readonly 属性，是否只读
-  max?: number; // 原生 max 属性，设置最大值
-  min?: number; // 原生属性，设置最小值
-  step?: number; // 原生属性，设置输入字段的合法数字间隔
-  resize?: 'none' | 'both' | 'horizontal' | 'vertical'; // 控制是否能被用户缩放
-  autofocus?: boolean; // 原生属性，自动获取焦点
-  form?: string; // 原生属性
-  label?: string; // 标签文本
-  tabindex?: string | number; // 输入框的 tabindex
-  validateEvent?: boolean; // 输入时是否触发表单的校验
-  inputStyle?: CSSProperties; // input 元素或 textarea 元素的 style
-
-  inputRewrite?: (value: string | number) => string | Promise<string>; // 输入时处理输入值
-  changeRewrite?: (value: string | number) => string | Promise<string>; // 发生改变时处理输入值
-
-  onBlur?: (events: Event) => void;
-  onFocus?: (events: Event) => void;
-  onKeyup?: (events: Event) => void;
-  onChange?: (value?: string | number | KeyboardEvent) => void;
-  onInput?: (value?: string | number | KeyboardEvent) => void;
-  onClear?: () => void;
-}
-
-export const BaseInput = _BaseInput as DefineComponent<BaseInputProps>;

package/packages/base/input/input.vue

@@ -1,175 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:16:15
--->
-<template>
-  <el-input
-    class="base-input"
-    :type="type"
-    :model-value="modelValue"
-    :minlength="minlength"
-    :maxlength="maxlength"
-    :show-word-limit="showWordLimit"
-    :placeholder="placeholder"
-    :clearable="clearable"
-    :formatter="formatter"
-    :parser="parser"
-    :show-password="showPassword"
-    :disabled="disabled"
-    :size="size"
-    :prefix-icon="prefixIcon"
-    :suffix-icon="suffixIcon"
-    :rows="rows"
-    :autosize="autosize"
-    :autocomplete="autocomplete"
-    :name="name"
-    :readonly="readonly"
-    :max="max"
-    :min="min"
-    :step="step"
-    :resize="resize"
-    :autofocus="autofocus"
-    :form="form"
-    :label="label"
-    :tabindex="tabindex"
-    :validate-event="validateEvent"
-    :input-style="inputStyle"
-    ref="BaseInputRef"
-    @blur="handleBlur"
-    @focus="handleFocus"
-    @input="handleInput"
-    @change="handleChange"
-    @clear="handleClear"
-    @keyup.enter="handleKeyupEnter"
-  ></el-input>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-input'
-};
-</script>
-
-<script lang="tsx" setup>
-import { withDefaults, ref, Component, CSSProperties } from 'vue';
-import { ElInput } from 'element-plus';
-import { isFunction } from '../../../tools/check';
-import { BaseInputProps } from './index';
-
-const _props = withDefaults(
-  defineProps<{
-    modelValue?: string | number; // 选中项绑定值
-    type?: 'text' | 'textarea' | 'password' | 'number'; // 类型
-    maxlength?: string | number; // 最大输入长度
-    minlength?: string | number; // 原生属性，最小输入长度
-    showWordLimit?: boolean; // 是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效
-    placeholder?: string; // 输入框占位文本
-    clearable?: boolean; // 是否可清空
-    formatter?: (value: string | number) => string; // 指定输入值的格式。(只有当 type 是"text"时才能工作)
-    parser?: (value: string) => string; // 指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用)
-    showPassword?: boolean; // 是否显示切换密码图标
-    disabled?: boolean; // 是否禁用
-    size?: 'large' | 'default' | 'small'; // 输入框尺寸，只在 type 不为 'textarea' 时有效
-    prefixIcon?: any; // 自定义前缀图标
-    suffixIcon?: any; // 自定义后缀图标
-    rows?: number; // 输入框行数，仅 type 为 'textarea' 时有效
-    autosize?: any; // textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }
-    autocomplete?: string; // 原生 autocomplete 属性
-    name?: string; // 等价于原生 input name 属性
-    readonly?: boolean; // 原生  readonly 属性，是否只读
-    max?: number; // 原生 max 属性，设置最大值
-    min?: number; // 原生属性，设置最小值
-    step?: number; // 原生属性，设置输入字段的合法数字间隔
-    resize?: 'none' | 'both' | 'horizontal' | 'vertical'; // 控制是否能被用户缩放
-    autofocus?: boolean; // 原生属性，自动获取焦点
-    form?: string; // 原生属性
-    label?: string; // 标签文本
-    tabindex?: string | number; // 输入框的 tabindex
-    validateEvent?: boolean; // 输入时是否触发表单的校验
-    inputStyle?: any; // input 元素或 textarea 元素的 style
-
-    inputRewrite?: any; // 输入时处理输入值
-    changeRewrite?: any; // 发生改变时处理输入值
-  }>(),
-  {
-    type: 'text',
-    rows: 2,
-    autocomplete: 'off',
-    placeholder: '请输入',
-    validateEvent: true
-  }
-);
-
-const props = _props as Readonly<BaseInputProps>;
-
-const emits = defineEmits<{
-  (event: 'update:modelValue', value: string | number): void;
-  (event: 'blur', events: Event): void;
-  (event: 'focus', events: Event): void;
-  (event: 'keyup', events: KeyboardEvent): void;
-  (event: 'change', value?: string | number | KeyboardEvent): void;
-  (event: 'input', value?: string | number | KeyboardEvent): void;
-  (event: 'clear'): void;
-}>();
-
-const updateValue = (value: string | number) => {
-  emits('update:modelValue', value); // 更新父级v-model绑定变量的值;
-};
-
-const handleBlur = (event: Event) => {
-  emits('blur', event);
-};
-const handleFocus = (event: Event) => {
-  emits('focus', event);
-};
-const handleChange = async (value: string | number) => {
-  const _value = (
-    isFunction(props.changeRewrite) ? await props.changeRewrite?.(value) : value
-  ) as string | number;
-  updateValue(_value);
-  emits('change', _value);
-};
-const handleInput = async (value: string | number) => {
-  const _value = (
-    isFunction(props.inputRewrite) ? await props.inputRewrite?.(value) : value
-  ) as string | number;
-  updateValue(_value);
-  emits('input', _value);
-};
-const handleClear = () => {
-  emits('clear');
-};
-const handleKeyupEnter = (event: KeyboardEvent) => {
-  emits('keyup', event);
-};
-
-const BaseInputRef = ref<{
-  focus: Function;
-  blur: Function;
-  select: Function;
-} | null>(null);
-
-defineExpose({
-  focus: () => {
-    BaseInputRef.value?.focus?.();
-  },
-  blur: () => {
-    BaseInputRef.value?.blur?.();
-  },
-  select: () => {
-    BaseInputRef.value?.select?.();
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.base-input {
-  ::v-deep input::-webkit-outer-spin-button,
-  ::v-deep input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-  }
-  ::v-deep input[type='‘number’'] {
-    -moz-appearance: textfield !important;
-  }
-}
-</style>

package/packages/base/pagination/index.ts

@@ -1,30 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-01 11:12:14
- */
-import { DefineComponent } from 'vue';
-import _BasePagination from './pagination.vue';
-
-export type PaginationInfoType = {
-  pageSize: number;
-  currentPage: number;
-};
-
-export type BasePaginationProps = {
-  small?: boolean;
-  currentPage?: number; // 当前页数
-  pageSize?: number; // 每页显示条目个数
-  total?: number; // 总条目数
-  pagerCount?: number; // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
-  pageSizes?: Array<number>; // 每页显示个数选择器的选项设置
-  hideOnSinglePage?: boolean; // 只有一页时是否隐藏
-  layout?: Array<
-    'sizes' | 'prev' | 'pager' | 'next' | 'jumper' | '->' | 'total' | 'slot'
-  >; // 组件布局，子组件名
-
-  onSizeChange?: (paginationInfo: PaginationInfoType) => void;
-  onCurrentChange?: (paginationInfo: PaginationInfoType) => void;
-};
-
-export const BasePagination =
-  _BasePagination as DefineComponent<BasePaginationProps>;