plain-design 1.0.0-beta.11 → 1.0.0-beta.110

package/src/packages/components/ImagePreviewer/image-previewer.utils.tsx

@@ -0,0 +1,136 @@
+import {PartialFields} from "../../utils/type";
+import {anonymousEffects, createHooks} from "@peryl/react-compose";
+import {createCounter} from '@peryl/utils/createCounter';
+import {notNull} from "@peryl/utils/notNull";
+
+export const ImagePreviewerConstants = {
+  /*画廊高度，默认70px*/
+  DEFAULT_GALLERY_HEIGHT: 70,
+  /*画廊与大图之间的距离，默认24px*/
+  DEFAULT_SEPARATOR_HEIGHT: 0,
+};
+
+export interface iImagePreviewerOptionPartialFields {
+  imageElement?: null | HTMLImageElement,                 // 点击的图片原始dom对象，如果有传这个属性对象的话会有一个显示放大动画
+  galleryHeight: number,                                  // 底部画廊的高度
+  separatorHeight: number,                                // 底部画廊距离图片显示区域的距离
+  autoHeight: boolean,                                    // 自动高度，默认是true。这样设置之后图片会撑满宽度，高度自动；关闭的时候会设置高度100%，图片宽度自动
+  mask: boolean,                                          // 显示背部遮罩
+  button?: boolean | {                                    // 顶部按钮栏控制，button为false则禁用所有按钮；为对象则单独禁用某个按钮
+    zoomIn?: boolean,                                     // 放大按钮
+    zoomOut?: boolean,                                    // 缩小按钮
+    clockwise?: boolean,                                  // 顺时针旋转按钮
+    anticlockwise?: boolean,                              // 逆时针旋转按钮
+    reset?: boolean,                                      // 重置按钮
+    close?: boolean,                                      // 关闭按钮
+  },
+  swipeButton?: boolean                                   // 左右切换按钮控制，swipeButton为false则禁用前后按钮
+  gallery?: boolean,                                      // 底部画廊控制，为false则禁用底部画廊
+  globalKeyboardEvent?: boolean                           // 监听全局的键盘事件，默认不监听全局键盘按键事件，而是等鼠标移入的时候才监听
+  maskColor?: string,                                     // 遮罩颜色
+  disableZoomOnWheel?: boolean,                           // 禁用滚轮缩放
+  /*---------------------------------------以下为不可配置属性-------------------------------------------*/
+  id: string,                                             // option唯一标识
+  oldSourceImageOpacity?: string                          // 原始的img对象的opacity属性值
+}
+
+export interface iImagePreviewerOption extends iImagePreviewerOptionPartialFields {
+  current: number;                                        // 当前显示的元素索引
+  urls: { url: string, thumbUrl: string }[];              // 所有展示的图片，url为大图地址，thumbUrl为底部画廊图片预览地址
+}
+
+export type iImagePreviewerParamOption = string | string[] | iImagePreviewerOption['urls'] | Omit<PartialFields<iImagePreviewerOption, keyof iImagePreviewerOptionPartialFields>, 'urls'> & { urls: string[] | iImagePreviewerOption['urls'] }
+
+export const ImagePreviewerHooks = {
+  /*PreviewerComponent挂载完毕事件*/
+  onImagePreviewerReady: createHooks<(data: { option: iImagePreviewerOption }) => void>(anonymousEffects)
+};
+
+const nextOptionId = createCounter('image_previewer');
+
+export function createImagePreviewerOption(
+  param: iImagePreviewerParamOption,
+  imageElement?: HTMLImageElement,
+  defaultParam?: Partial<iImagePreviewerOption>
+): iImagePreviewerOption {
+  if (typeof param === "string") {
+    return {
+      id: nextOptionId(),
+      current: 0,
+      imageElement,
+      autoHeight: true,
+      mask: false,
+      urls: [{ url: param, thumbUrl: param }],
+      galleryHeight: ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT,
+      separatorHeight: ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT,
+      ...defaultParam,
+    };
+  }
+  if (Array.isArray(param)) {
+    return {
+      id: nextOptionId(),
+      current: 0,
+      imageElement,
+      autoHeight: true,
+      mask: false,
+      urls: param.map(p => typeof p === "string" ? { url: p, thumbUrl: p } : p),
+      galleryHeight: ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT,
+      separatorHeight: ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT,
+      ...defaultParam,
+    };
+  }
+  if (!!imageElement) {
+    param.imageElement = imageElement;
+  }
+  return {
+    autoHeight: true,
+    mask: false,
+    galleryHeight: notNull(param.galleryHeight, ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT),
+    separatorHeight: notNull(param.separatorHeight, ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT),
+    ...defaultParam,
+    ...param,
+    id: nextOptionId(),
+    urls: param.urls.map(p => typeof p === "string" ? { url: p, thumbUrl: p } : p),
+  };
+}
+
+/**
+ * 获取imageElement在containerElement容器中居中铺满的位置信息
+ * @author  韦胜健
+ * @date    2024/1/10 18:50
+ */
+export const getCenterRect = (
+  {
+    imageElement, containerElement
+  }: {
+    imageElement: HTMLDivElement,
+    containerElement: HTMLDivElement | { containerRatio: number, containerHeight: number, containerWidth: number },
+  }
+) => {
+  const imageRatio = Number((imageElement.offsetWidth / imageElement.offsetHeight).toFixed(2));
+  const { containerRatio, containerHeight, containerWidth } = 'tagName' in containerElement ? (() => {
+    const containerRatio = Number((containerElement.offsetWidth / containerElement.offsetHeight).toFixed(2));
+    return {
+      containerRatio,
+      containerHeight: containerElement.offsetHeight,
+      containerWidth: containerElement.offsetWidth,
+    };
+  })() : containerElement;
+
+
+  if (imageRatio > containerRatio) {
+    /*宽度更宽，固定宽度为屏幕宽度缩放*/
+    const left = 0;
+    const width = containerWidth;
+    const height = Number((imageElement.offsetHeight / imageElement.offsetWidth * width).toFixed(0));
+    const top = Number(((containerHeight - height) / 2).toFixed(0));
+    return { top, left, width, height };
+  } else {
+    /*高度更高，固定高度将宽度缩放*/
+    const top = 0;
+    const height = containerHeight;
+    const width = Number((imageElement.offsetWidth / imageElement.offsetHeight * height).toFixed(0));
+    const left = Number(((containerWidth - width) / 2).toFixed(0));
+    return { top, left, width, height };
+  }
+};

package/src/packages/components/ImagePreviewer/index.tsx

@@ -0,0 +1,5 @@
+import {ImagePreviewer} from "./ImagePreviewer";
+
+export default ImagePreviewer;
+
+export {ImagePreviewer};

package/src/packages/components/ImagePreviewer/previewer-loading.scss

@@ -0,0 +1,52 @@
+.previewer-loading {
+
+  $size: 1em;
+
+  height: $size;
+  width: $size;
+
+  .plain-loading-tag {
+    $centerRadius: (0.5*$size)/1.2;
+    $itemWidth: (0.35*$size)/1.2;
+    $itemHeight: (0.1*$size)/1.2;
+    $width: $centerRadius + $itemWidth * 2;
+    $height: $width;
+
+    width: $width;
+    height: $height;
+    position: relative;
+    display: block;
+
+    .plain-loading-inner {
+      background-color: currentColor;
+      display: inline-block;
+      width: $itemWidth;
+      height: $itemHeight;
+      margin-top: $itemHeight / 2 * -1;
+      margin-left: $centerRadius / 2;
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      transform-origin: ($centerRadius / 2 * -1) ($itemHeight / 2);
+      @for $i from 1 through 12 {
+        &:nth-child(#{$i}) {
+          transform: rotate(($i - 1) * 30deg);
+          animation: plain-loading-tag 1s linear infinite #{-1 + $i / 12}s;
+        }
+      }
+      @keyframes plain-loading-tag {
+        0% {
+          opacity: 1;
+        }
+        @for $i from 1 through 11 {
+          #{$i / 12 * 100}% {
+            opacity: 1 - $i / 12;
+          }
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

package/src/packages/components/ImageUploader/index.tsx

@@ -1,17 +1,18 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {defer} from "plain-utils/utils/defer";
+import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
+import {deepcopy} from "@peryl/utils/deepcopy";
+import {defer} from "@peryl/utils/defer";
 import {Image, ImagePropsOptions} from "../Image";
 import {$image} from "../$image";
 import {Icon} from "../Icon";
-import {PlainObject} from "plain-utils/utils/event";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {PlainObject} from "@peryl/utils/event";
+import {createEnum} from "@peryl/utils/createEnum";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {$file, FileServiceDefaultAccept, FileServiceUploadConfig} from "../$file";
 import $configuration from "../$configuration";
 import {iUploadService} from "../$upload/createUploadService";
 import i18n from "../i18n";
+import {iUploadServiceConfig} from "../$upload/upload.utils";
 
 /**
  * ImageUploader的状态
@@ -40,17 +41,21 @@ export const ImageUploader = designComponent({
     handleDelete: { type: Function as PropType<() => void | Promise<void>> },                 // 自定义删除图片逻辑
     handleUpload: { type: Function as PropType<(file: File) => void | Promise<void>> },       // 自定义上传图片逻辑
     handlePreview: { type: Function as PropType<(url?: string) => void> },                    // 自定义预览逻辑
-    urlPrefix: { type: String },
-    service: { type: Object as PropType<iUploadService> },
+    urlPrefix: { type: String },                                                              // 图片路径前缀
+    service: { type: Object as PropType<iUploadService> },                                    // 文件上传服务
+    emitBase64: { type: Boolean },                                                            // 当选择文件之后，是否将 base64 值更新到绑定值
+    getFilePathFromResponse: { type: Function as PropType<iUploadServiceConfig['getFilePathFromResponse']> },// 从上传结果中获取图片访问地址
   },
   inheritPropsType: HTMLDivElement,
   emits: {
     onUpdateModelValue: (val?: string) => true,
     onLoadSuccess: (url: string) => true,
     onLoadError: (e: string | Event) => true,
+    onLoadComplete: () => true,
     onUploadSuccess: (resp: PlainObject | string) => true,
     onUploadProgress: (percent: number, e: ProgressEvent) => true,
     onUploadFail: (e: any) => true,
+    onUploadComplete: () => true,
   },
   setup({ props, event: { emit } }) {
 
@@ -59,7 +64,8 @@ export const ImageUploader = designComponent({
     const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
 
     const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { autoWatch: false });
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
 
     const { editComputed } = useEdit();
 
@@ -70,7 +76,6 @@ export const ImageUploader = designComponent({
     });
 
     watch(() => props.modelValue, val => {
-      model.value = Image.formatImagePath(val, urlPrefix.value);
       state.chooseBase64 = undefined;
       if (!model.value) {
         return state.status = eImageUploaderStatus.empty;
@@ -80,12 +85,14 @@ export const ImageUploader = designComponent({
       image.onload = () => {
         state.status = eImageUploaderStatus.success;
         emit.onLoadSuccess(model.value!);
+        emit.onLoadComplete();
       };
       image.onerror = (e) => {
         state.status = eImageUploaderStatus.error;
         emit.onLoadError(e);
+        emit.onLoadComplete();
       };
-      image.src = model.value;
+      image.src = Image.formatImagePath(val, urlPrefix.value);
     }, { immediate: true });
 
     const classes = useClasses(() => [
@@ -125,10 +132,16 @@ export const ImageUploader = designComponent({
             onSuccess: (resp) => {
               if (!!config?.onSuccess) config.onSuccess(resp);
               console.log('upload success, resp:', resp);
-              model.value = String(state.chooseBase64);
+              // model.value = String(state.chooseBase64);
+              const getFilePathFromResponse: iUploadServiceConfig['getFilePathFromResponse'] | undefined =
+                props.getFilePathFromResponse ||
+                upload?.config.getFilePathFromResponse;
+
+              model.value = getFilePathFromResponse?.(resp);
               state.chooseBase64 = undefined;
               state.status = eImageUploaderStatus.success;
               emit.onUploadSuccess(resp);
+              emit.onUploadComplete();
               dfd.resolve(resp);
             },
             onError: (e) => {
@@ -136,6 +149,7 @@ export const ImageUploader = designComponent({
               console.log('upload fail, e:', e);
               state.status = eImageUploaderStatus.fail;
               emit.onUploadFail(e);
+              emit.onUploadComplete();
               dfd.reject(e);
             },
           };
@@ -180,6 +194,15 @@ export const ImageUploader = designComponent({
       },
     };
 
+    const imageAttrs = computed(() => {
+      const ret = Object.keys(ImagePropsOptions).reduce((prev, key) => {
+        prev[key] = (props as any)[key];
+        return prev;
+      }, {} as any);
+      ret.urlPrefix = urlPrefix.value;
+      return ret;
+    });
+
     return {
       refer: {
         refs,
@@ -189,23 +212,18 @@ export const ImageUploader = designComponent({
           {(!!model.value || !!state.chooseBase64) && (
             <Image
               src={model.value || state.chooseBase64}
-              fit={props.fit}
-              alt={props.alt}
-              position={props.position}
               previewOnClick={false}
-              height={props.height}
-              width={props.width}
-              urlPrefix={urlPrefix.value}
               onClick={handler.onClickImage}
+              {...imageAttrs.value}
             />
           )}
           {state.status === eImageUploaderStatus.empty && <div className="image-uploader-empty" onClick={handler.onClick}>
             <Icon icon="pi-image"/>
-            <span>{i18n('file.toBeUpload').d('待上传')}</span>
+            {!props.hideTips && <span>{i18n.$it('file.toBeUpload').d('待上传')}</span>}
           </div>}
           {state.status === eImageUploaderStatus.fail && <div className="image-uploader-fail" onClick={handler.onClick}>
             <Icon icon="pi-image-close"/>
-            <span>{i18n('file.uploadFailed').d('上传失败')}</span>
+            {!props.hideTips && <span>{i18n.$it('file.uploadFailed').d('上传失败')}</span>}
           </div>}
           <div className="image-uploader-button-group">
             <div className="image-uploader-button" onClick={handler.onClick}>

package/src/packages/components/Input/index.scss

@@ -41,7 +41,7 @@
     border: none;
     background-color: transparent;
     box-sizing: border-box;
-    line-height: 1.5715;
+    line-height: plv(line-height);
     padding-top: 3px;
     padding-bottom: 3px;
     color: plv(text-2);
@@ -52,25 +52,41 @@
     flex: 1;
   }
 
+  .input-text {
+    word-break: break-all;
+    border: none !important;
+  }
+
+  .input-mode-text-separate-icon {
+    align-self: center;
+    margin: 0 0.5em;
+  }
+
   /*所有的直接子节点，垂直居中，加上左右边距，除了第一个直接子节点之外，其他节点都加上左边框*/
   & > div, & > span, & > input, & > textarea {
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    padding-right: plv(input-padding-x);
-    padding-left: plv(input-padding-x);
 
     &:not(:first-child) {
       border-left: solid 1px plv(border-color);
     }
   }
 
+  &.input-mode-text {
+    & > div, & > span, & > input, & > textarea {
+      &:not(:first-child) {
+        border-left: none;
+      }
+    }
+  }
+
   /*prefix icon and suffix icon*/
 
   /*prefix icon右侧的input-box不需要左边框以及左边距*/
   .input-prefix-icon {
     & + .input-box {
-      padding-left: 0;
+      padding-left: 0 !important;
       border-left: none;
     }
   }
@@ -179,9 +195,13 @@
     /*prefix icon以及suffix icon的宽度与高度相同，显示为正方形*/
     .input-prefix-icon {
       width: $height;
+      color: plv(text-2);
+    }
+    .input-suffix-icon-wrapper, .input-icon-button {
+      color: plv(text-2);
     }
     .input-suffix-icon-wrapper {
-      width: 18px;
+      width: plv(input-clear-size-#{$name})
     }
 
     &.input-size-mini {
@@ -189,6 +209,16 @@
         line-height: 1.667;
       }
     }
+
+    /*所有的直接子节点，垂直居中，加上左右边距，除了第一个直接子节点之外，其他节点都加上左边框*/
+    &:not(.input-mode-text) {
+      & > div, & > span, & > input, & > textarea {
+        &:not(.input-suffix-icon-wrapper) {
+          padding-right: plv(input-padding-x-#{$name});
+          padding-left: plv(input-padding-x-#{$name});
+        }
+      }
+    }
   }
 
   /*input status*/
@@ -203,9 +233,11 @@
       background-color: plv(background-color);
       border-color: $color-3;
     }
-    @include hover(input) {
-      background-color: $color-light-3;
-      border-color: $color-light-4;
+    &:not(.input-mode-text) {
+      @include hover(input) {
+        background-color: $color-light-3;
+        border-color: $color-light-4;
+      }
     }
     @include focus(input) {
       border-color: $color-5;
@@ -215,7 +247,7 @@
       box-shadow: 0 0 0 2px $color-2;
       z-index: 2;
     }
-    .input-suffix-icon-wrapper {
+    .input-suffix-icon-wrapper, .input-icon-button {
       color: $color-6;
     }
   }
@@ -321,18 +353,32 @@
           align-items: center;
           justify-content: center;
         }
+
+        &.input-tag-container-wrap {
+          .input-tag {
+            height: auto;
+            min-height: calc(#{$height} - 8px);
+            white-space: normal;
+            word-break: break-all;
+            max-width: 100%;
+          }
+        }
       }
     }
 
-    &:not(.input-empty) {
+    &:not(.input-empty):not(.input-mode-text) {
       .input-box.input-tag-container {
         padding-left: 3px;
+        padding-right: 0;
+        @include comp(auto-width-input) {
+          padding: 0 3px;
+        }
       }
     }
 
     &.input-empty {
       .input-tag-container {
-        .custom-auto-width-input {
+        @include comp(auto-width-input) {
           flex: 1;
         }
       }
@@ -348,15 +394,15 @@
       padding: 0;
       height: auto;
 
-      span, textarea {
+      .input-textarea-shadow, textarea {
         display: inline-block;
         padding: 3px 12px;
         box-sizing: border-box;
-        line-height: 1.5715;
+        line-height: plv(line-height);
         word-break: break-all;
       }
 
-      span {
+      .input-textarea-shadow {
         opacity: 0;
         pointer-events: none;
         min-height: calc(30px + 2em);

package/src/packages/components/Input/index.tsx

@@ -1,8 +1,8 @@
-import {computed, designComponent, getComponentCls, iHTMLDivElement, mergeAttrs, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, Fragment, getComponentCls, iHTMLDivElement, mergeAttrs, onMounted, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import './index.scss';
 import {ThemeStatus, useStyle} from "../../uses/useStyle";
 import {useEdit} from "../../uses/useEdit";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {Icon} from "../Icon";
 import {useInputEnterHandler} from "./uses/useInputEnterHandler";
 import {useInputHooks} from "./uses/useInputHooks";
@@ -17,6 +17,7 @@ import {useFocusHandler} from "../../uses/useFocusHandler";
 import {useSuggestionInput} from "./useSuggestionInput";
 import {useMultipleModel} from "../../uses/useMultipleModel";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
+import {delay} from "@peryl/utils/delay";
 
 export const Input = designComponent({
   name: '-input',
@@ -29,7 +30,11 @@ export const Input = designComponent({
 
     const { refs, onRef } = useRefs(InputRefsOptions);
     const { styleComputed } = useStyle();
-    const { editComputed, editState } = useEdit();
+    const { editComputed, editState } = useEdit({
+      adjust: (ret) => {
+        if (styleComputed.value.inputMode === 'text') {ret.readonly = true;}
+      },
+    });
     const parentPopupId = useParentPopupId();
     const model = useMultipleModel(() => props.modelValue, emit.onUpdateModelValue, props);
     const hooks = useInputHooks();
@@ -76,7 +81,7 @@ export const Input = designComponent({
       attrs.className,
       `input-size-${styleComputed.value.size}`,
       `input-shape-${styleComputed.value.shape}`,
-      `input-mode-${props.mode || styleComputed.value.default.inputMode}`,
+      `input-mode-${styleComputed.value.inputMode}`,
       {
         [`input-status-${status.value}`]: !!status.value,
         [`input-align-${props.align}`]: !!props.align,
@@ -88,8 +93,12 @@ export const Input = designComponent({
     ]));
     const styles = useStyles((style) => {
       style.display = 'inline-flex';
-      if (!!props.width) {
-        style.width = unit(props.width);
+      if (styleComputed.value.inputMode === 'text') {
+        style.width = 'unset';
+      } else {
+        if (!!props.width) {
+          style.width = unit(props.width);
+        }
       }
       !!attrs.style && Object.assign(style, attrs.style);
     });
@@ -98,6 +107,13 @@ export const Input = designComponent({
     hooks.onInput.use(val => emit.onInput(val));
     hooks.onSuggestion.use(data => emit.onSuggestion(data));
 
+    onMounted(async () => {
+      await delay(78);
+      if (props.autoFocus) {
+        refs.input?.focus();
+      }
+    });
+
     return {
       refer: {
         model,
@@ -126,7 +142,7 @@ export const Input = designComponent({
             {content}
 
             {inputSuffixIcon.render()}
-            {hooks.onRenderSuffix.exec(slots.suffix())}
+            {hooks.onRenderSuffix.exec(<Fragment key="slot_suffix">{slots.suffix()}</Fragment>)}
           </span>
         );
       },

package/src/packages/components/Input/input.utils.ts

@@ -1,5 +1,5 @@
 import {tInputHooks} from "./uses/useInputHooks";
-import {ComponentEvent, ExtractPropTypes, iMouseEvent, PropType, SimpleFunction, tRefs, tSlotsType} from "plain-design-composition";
+import {ComponentEvent, ExtractPropTypes, iMouseEvent, PropType, SimpleFunction, tRefs, tSlotsType} from "@peryl/react-compose";
 import {createError} from "../../utils/createError";
 import {StyleProps, tStyleComputed} from "../../uses/useStyle";
 import {EditProps, tEditComputed} from "../../uses/useEdit";
@@ -11,7 +11,6 @@ export const InputPropsOption = {
 
   /*public*/
   type: { type: String },                                                       // input type
-  mode: { type: String as PropType<'flat' | 'stroke'> },                        // input的样式类型,flat填充，stroke线型
   modelValue: {},                                                               // 输入框双向绑定值
   placeValue: {},                                                               // 与modelValue一起判断当前是否有值
   isFocus: { type: Boolean },                                                   // 当前是否为获取焦点的状态
@@ -27,10 +26,12 @@ export const InputPropsOption = {
   multipleSeparator: { default: /[\s\n,，]/ },                                  // 多值输入的时候的分隔符。类型为字符串或者正则表达式；有这个分隔符的话，会自动按照这个分隔符对输入的文本分割
   fixedWidth: { type: Boolean },                                                // InputGroup下是否固定宽度
   bare: { type: Boolean },                                                      // 去掉包裹节点
+  loadingType: { type: String },                                                // loading类型
+  autoFocus: { type: Boolean },                                                 // 初始化时自动获取焦点
 
   /*clear*/
   noClear: { type: Boolean },                                                   // 去掉清空按钮
-  clearHandler: { type: Function as PropType<(e: iMouseEvent) => void> },     // 自定义处理清空逻辑
+  clearHandler: { type: Function as PropType<(e: iMouseEvent) => void> },       // 自定义处理清空逻辑
 
   /*textarea*/
   textarea: { type: Boolean },                                                  // 当前是否为文本域输入框