xrk-components 0.3.0 → 0.3.1

package/packages/base/date-picker/date-picker.vue

@@ -1,144 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:17:01
--->
-<template>
-  <el-date-picker
-    v-model="dateValue"
-    :readonly="readonly"
-    :disabled="disabled"
-    :size="size"
-    :editable="editable"
-    :clearable="clearable"
-    :placeholder="placeholder"
-    :start-placeholder="startPlaceholder"
-    :end-placeholder="endPlaceholder"
-    :type="type"
-    :format="format"
-    :popper-class="popperClass"
-    :range-separator="rangeSeparator"
-    :default-value="defaultValue"
-    :default-time="defaultTime"
-    :value-format="valueFormat"
-    :unlink-panels="unlinkPanels"
-    :prefix-icon="prefixIcon"
-    :clear-icon="clearIcon"
-    :validate-event="validateEvent"
-    :disabled-date="_disabledDate"
-    :shortcuts="shortcuts"
-    :cell-class-name="cellClassName"
-    :teleported="teleported"
-    @change="handleChange"
-    @visible-change="handleVisibleChange"
-    @calendar-change="handleCalendarChange"
-  ></el-date-picker>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-date-picker'
-};
-</script>
-<script lang="tsx" setup>
-import { withDefaults, ref, Component, computed, watch } from 'vue';
-import { ElDatePicker } from 'element-plus';
-import { isFunction } from '../../../tools/check';
-import { BaseDatePickerProps } from './index';
-
-const _props = withDefaults(
-  defineProps<{
-    modelValue?: any; // 选中项绑定值
-    readonly?: boolean; // 只读
-    disabled?: boolean; // 禁用
-    size?: 'large' | 'default' | 'small'; // 输入框尺寸
-    editable?: boolean; // 文本框可输入
-    clearable?: boolean; // 是否显示清除按钮
-    placeholder?: string; // 非范围选择时的占位内容
-    startPlaceholder?: string; // 范围选择时开始日期的占位内容
-    endPlaceholder?: string; // 范围选择时结束日期的占位内容
-    type?:
-      | 'year'
-      | 'month'
-      | 'date'
-      | 'dates'
-      | 'datetime'
-      | 'week'
-      | 'datetimerange'
-      | 'daterange'
-      | 'monthrange'; // 显示类型
-    format?: string; // 显示在输入框中的格式
-    popperClass?: string; // DatePicker 下拉框的类名
-    rangeSeparator?: string; // 选择范围时的分隔符
-    defaultValue?: any; // 可选，选择器打开时默认显示的时间
-    defaultTime?: any; // 范围选择时选中日期所使用的当日内具体时刻
-    valueFormat?: string; // 可选，绑定值的格式。 不指定则绑定值为 Date 对象
-    unlinkPanels?: boolean; // 在范围选择器里取消两个日期面板之间的联动
-    prefixIcon?: any; // 自定义前缀图标
-    clearIcon?: any; // 自定义清除图标
-    validateEvent?: boolean; // 输入时是否触发表单的校验
-    disabledDate?: (date: Date, startDt: Date | null) => boolean; // 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。
-    shortcuts?: any; // 设置快捷选项，需要传入数组对象
-    cellClassName?: (date: Date) => string; // 设置自定义类名
-    teleported?: boolean; // 是否将 date-picker 的下拉列表插入至 body 元素
-  }>(),
-  {
-    type: 'date',
-    placeholder: '请选择日期',
-    startPlaceholder: '请选择开始日期',
-    endPlaceholder: '请选择结束日期',
-    teleported: true,
-    clearable: true
-  }
-);
-
-const props = _props as Readonly<BaseDatePickerProps>;
-
-const emits = defineEmits<{
-  (event: 'change', activeValue: any): void;
-  (event: 'visibleChange', visibility: boolean): void;
-  (event: 'calendarChange', val: [Date, Date | null]): void;
-  (event: 'update:modelValue', activeValue: any): void;
-}>();
-
-// 越过类型不匹配导致的ts报错
-const defaultTime = computed(() => props.defaultTime) as any;
-
-const valueFormat = computed(
-  () =>
-    props.valueFormat ||
-    (props.type &&
-      (['datetime', 'datetimerange'].includes(props.type)
-        ? 'YYYY-MM-DD HH:mm:ss'
-        : 'YYYY-MM-DD'))
-);
-
-const startDt = ref<Date | null>(null);
-const dateValue = ref<any>(props.modelValue);
-// 父组件值发生改变时，同步dateValue
-watch(
-  () => props.modelValue,
-  newV => {
-    dateValue.value = newV;
-  }
-);
-
-const _disabledDate = (date: Date) => {
-  if (isFunction(props?.disabledDate)) {
-    return props?.disabledDate?.(date, startDt.value);
-  }
-};
-
-const handleChange: any = (val: typeof props.modelValue) => {
-  emits('update:modelValue', val);
-  emits('change', val);
-};
-const handleVisibleChange: any = (visibility: boolean) => {
-  emits('visibleChange', visibility);
-};
-const handleCalendarChange: any = (val: [Date, Date | null]) => {
-  startDt.value = val[0];
-  emits('calendarChange', val);
-};
-</script>
-
-<style lang="scss" scoped></style>

package/packages/base/date-picker/index.ts

@@ -1,52 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-06-29 19:10:13
- */
-import { Component, DefineComponent } from 'vue';
-import _BaseDatePicker from './date-picker.vue';
-
-export type BaseDatePickerProps = {
-  modelValue?: string | Date | Array<Date | string>; // 选中项绑定值
-  readonly?: boolean; // 只读
-  disabled?: boolean; // 禁用
-  size?: 'large' | 'default' | 'small'; // 输入框尺寸
-  editable?: boolean; // 文本框可输入
-  clearable?: boolean; // 是否显示清除按钮
-  placeholder?: string; // 非范围选择时的占位内容
-  startPlaceholder?: string; // 范围选择时开始日期的占位内容
-  endPlaceholder?: string; // 范围选择时结束日期的占位内容
-  type?:
-    | 'year'
-    | 'month'
-    | 'date'
-    | 'dates'
-    | 'datetime'
-    | 'week'
-    | 'datetimerange'
-    | 'daterange'
-    | 'monthrange'; // 显示类型
-  format?: string; // 显示在输入框中的格式
-  popperClass?: string; // DatePicker 下拉框的类名
-  rangeSeparator?: string; // 选择范围时的分隔符
-  defaultValue?: Date; // 可选，选择器打开时默认显示的时间
-  defaultTime?: Array<Date>; // 范围选择时选中日期所使用的当日内具体时刻
-  valueFormat?: string; // 可选，绑定值的格式。 不指定则绑定值为 Date 对象
-  unlinkPanels?: boolean; // 在范围选择器里取消两个日期面板之间的联动
-  prefixIcon?: string | Component; // 自定义前缀图标
-  clearIcon?: string | Component; // 自定义清除图标
-  validateEvent?: boolean; // 输入时是否触发表单的校验
-  disabledDate?: (date: Date, startDt: Date | null) => boolean; // 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。
-  shortcuts?: Array<{
-    text: string;
-    value: Date | (() => void);
-  }>; // 设置快捷选项，需要传入数组对象
-  cellClassName?: (date: Date) => string; // 设置自定义类名
-  teleported?: boolean; // 是否将 date-picker 的下拉列表插入至 body 元素
-
-  onChange?: (activeValue: any) => void;
-  onVisibleChange?: (visibility: boolean) => void;
-  onCalendarChange?: (val: [Date, Date | null]) => void;
-};
-
-export const BaseDatePicker =
-  _BaseDatePicker as DefineComponent<BaseDatePickerProps>;

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