Merge branch 'v1.7.0' of https://gitee.com/layui/layui-vue into v1.7.0

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

package/component/src/component/backTop/index.vue

@@ -174,7 +174,7 @@ const getScrollParent = (
     }
   }
   // @ts-ignore
-  return document.documentElement || document.body || window;
+  return window;
 };
 
 // 节流
@@ -189,18 +189,15 @@ const throttle = (func: Function, wait: number) => {
     }
   };
 };
-
+const callback = throttle(handleScroll, 300);
 onMounted(() => {
   if (!props.target) return;
   scrollTarget.value = getScrollTarget();
-  scrollTarget.value.addEventListener("scroll", throttle(handleScroll, 300));
+  scrollTarget.value.addEventListener("scroll", callback);
 });
 
 onBeforeUnmount(() => {
-  scrollTarget.value?.removeEventListener(
+  scrollTarget.value?.removeEventListener("scroll", callback);
-    "scroll",
-    throttle(handleScroll, 300)
-  );
 });
 </script>
 

package/component/src/component/checkbox/index.vue

@@ -13,12 +13,12 @@ import { CheckboxSize } from "./interface";
 export interface CheckboxProps {
   name?: string;
   skin?: string;
-  value: string | number | object;
   label?: string;
-  isIndeterminate?: boolean;
+  value: string | number | object;
   modelValue?: boolean | Array<string | number | object>;
-  disabled?: boolean;
+  isIndeterminate?: boolean;
   size?: CheckboxSize;
+  disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<CheckboxProps>(), {
@@ -113,6 +113,8 @@ const isDisabled = computed(() => {
   }
   return false;
 });
+
+defineExpose({ toggle: handleClick });
 </script>
 
 <template>

package/component/src/component/datePicker/components/MonthPanel.vue

@@ -103,7 +103,7 @@ watch(
 
 //关闭回调
 const footOnOk = () => {
-  emits("update:modelValue", Month.value?Month.value:-1);
+  emits("update:modelValue", Month.value ? Month.value : -1);
   if (datePicker.range) {
     //关闭菜单
     emits("ok");

package/component/src/component/datePicker/components/YearPanel.vue

@@ -119,7 +119,7 @@ const scrollTo = () => {
 
 //关闭回调
 const footOnOk = () => {
-  emits("update:modelValue", Year.value?Year.value:-1);
+  emits("update:modelValue", Year.value ? Year.value : -1);
   if (datePicker.range) {
     //关闭菜单
     emits("ok");

package/component/src/component/datePicker/index.vue

@@ -187,7 +187,7 @@ const endPlaceholder = computed(() => {
 });
 
 const dropdownRef = ref(null);
-const $emits = defineEmits(["update:modelValue",'change','blur','focus']);
+const $emits = defineEmits(["update:modelValue", "change", "blur", "focus"]);
 const hms = ref({
   hh: 0,
   mm: 0,
@@ -267,10 +267,10 @@ const getDateValue = () => {
   }
   if (props.timestamp) {
     $emits("update:modelValue", dayjs(dayjsVal).unix() * 1000);
-    $emits("change",dayjs(dayjsVal).unix() * 1000);
+    $emits("change", dayjs(dayjsVal).unix() * 1000);
   } else {
     $emits("update:modelValue", dayjsVal);
-    $emits("change",dayjsVal);
+    $emits("change", dayjsVal);
   }
   setTimeout(() => {
     unWatch = false;
@@ -281,7 +281,7 @@ const getDateValueByRange = () => {
   if (rangeValue.first === "" || rangeValue.last === "") {
     dateValue.value = ["", ""];
     $emits("update:modelValue", dateValue.value);
-    $emits("change",dateValue.value);
+    $emits("change", dateValue.value);
     return;
   }
   let format = "YYYY-MM-DD";
@@ -301,7 +301,7 @@ const getDateValueByRange = () => {
     dayjs(rangeValue.last).format(format),
   ];
   $emits("update:modelValue", dateValue.value);
-  $emits("change",dateValue.value);
+  $emits("change", dateValue.value);
   setTimeout(() => {
     unWatch = false;
   }, 0);

package/component/src/component/dropdown/index.vue

@@ -20,6 +20,7 @@ import {
   cloneVNode,
   useAttrs,
   StyleValue,
+  PropType,
 } from "vue";
 import {
   computed,
@@ -45,7 +46,7 @@ import {
 } from "./interface";
 import TeleportWrapper from "../_components/teleportWrapper.vue";
 import { useFirstElement, isScrollElement, getScrollElements } from "./util";
-import RenderFunction from "../_components/renderFunction";
+import RenderFunction, { RenderFunc } from "../_components/renderFunction";
 import { transformPlacement } from "./util";
 
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";

package/component/src/component/input/index.vue

@@ -109,7 +109,7 @@ const onBlur = (event: Event) => {
 
 const onNumberBlur = (event: Event) => {
   let value = (event.target as HTMLInputElement).value;
-  if(value === "") {
+  if (value === "") {
     value = props.min ? String(props.min) : "0";
   } else {
     if (props.max && props.max < Number(value)) value = props.max.toString();

package/component/src/component/inputNumber/index.vue

@@ -11,6 +11,7 @@ import { LayIcon } from "@layui/icons-vue";
 import layButton from "../button/index.vue";
 import { ref, watch, withDefaults, computed, Ref } from "vue";
 import { InputNumberSize } from "./interface";
+import { add, sub } from "./math";
 
 export interface InputNumberProps {
   modelValue?: number;
@@ -84,11 +85,11 @@ const maxControl = computed(() => {
 });
 
 const addition = function () {
-  num.value += Number(props.step);
+  num.value = add(num.value, props.step);
 };
 
 const subtraction = function () {
-  num.value -= Number(props.step);
+  num.value = sub(num.value, props.step);
 };
 
 const longDown = function (fn: Function) {

package/component/src/component/inputNumber/math.ts

@@ -0,0 +1,61 @@
+//加法
+function add(arg1: number, arg2: number) {
+  var r1, r2, m, c;
+  try {
+    r1 = arg1.toString().split(".")[1].length;
+  } catch (e) {
+    r1 = 0;
+  }
+  try {
+    r2 = arg2.toString().split(".")[1].length;
+  } catch (e) {
+    r2 = 0;
+  }
+  c = Math.abs(r1 - r2);
+  m = Math.pow(10, Math.max(r1, r2));
+  if (c > 0) {
+    var cm = Math.pow(10, c);
+    if (r1 > r2) {
+      arg1 = Number(arg1.toString().replace(".", ""));
+      arg2 = Number(arg2.toString().replace(".", "")) * cm;
+    } else {
+      arg1 = Number(arg1.toString().replace(".", "")) * cm;
+      arg2 = Number(arg2.toString().replace(".", ""));
+    }
+  } else {
+    arg1 = Number(arg1.toString().replace(".", ""));
+    arg2 = Number(arg2.toString().replace(".", ""));
+  }
+  return (arg1 + arg2) / m;
+}
+//减法
+function sub(arg1: number, arg2: number) {
+  var r1, r2, m, c;
+  try {
+    r1 = arg1.toString().split(".")[1].length;
+  } catch (e) {
+    r1 = 0;
+  }
+  try {
+    r2 = arg2.toString().split(".")[1].length;
+  } catch (e) {
+    r2 = 0;
+  }
+  c = Math.abs(r1 - r2);
+  m = Math.pow(10, Math.max(r1, r2));
+  if (c > 0) {
+    var cm = Math.pow(10, c);
+    if (r1 > r2) {
+      arg1 = Number(arg1.toString().replace(".", ""));
+      arg2 = Number(arg2.toString().replace(".", "")) * cm;
+    } else {
+      arg1 = Number(arg1.toString().replace(".", "")) * cm;
+      arg2 = Number(arg2.toString().replace(".", ""));
+    }
+  } else {
+    arg1 = Number(arg1.toString().replace(".", ""));
+    arg2 = Number(arg2.toString().replace(".", ""));
+  }
+  return (arg1 - arg2) / m;
+}
+export { add, sub };

package/component/src/component/pageHeader/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="lay-page-header">
     <div class="lay-page-header__left" @click="emits('back')">
-      <i class="layui-icon" :class="[backIcon]"></i>
+      <slot name="backIcon"
+        ><i class="layui-icon" :class="[backIcon]"></i
+      ></slot>
       <div class="lay-page-header__title">{{ backText }}</div>
     </div>
     <div class="lay-page-header__content">

package/component/src/component/popper/calcPosition.ts

@@ -14,6 +14,8 @@ const postionFns: any = {
     ) {
       innnerPosition.value = "bottom";
       top = bottom;
+    } else {
+      innnerPosition.value = "top";
     }
     return {
       top: `${top}px`,
@@ -30,6 +32,8 @@ const postionFns: any = {
     if (window.innerHeight - bottom < popper.offsetHeight + 6) {
       innnerPosition.value = "top";
       bottom = top - popper.offsetHeight - 6;
+    } else {
+      innnerPosition.value = "bottom";
     }
     return {
       top: `${bottom}px`,
@@ -47,6 +51,8 @@ const postionFns: any = {
     if (left < 0) {
       innnerPosition.value = "right";
       left = right;
+    } else {
+      innnerPosition.value = "left";
     }
     return {
       top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
@@ -63,6 +69,8 @@ const postionFns: any = {
     if (window.innerWidth < right + popper.offsetWidth + 6) {
       innnerPosition.value = "left";
       right = left - popper.offsetWidth - 6;
+    } else {
+      innnerPosition.value = "right";
     }
     return {
       top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,

package/component/src/component/popper/index.vue

@@ -9,7 +9,7 @@
         @mouseenter="handlerPopperMouseEnter"
         @mouseleave="handlerPopperMouseLeave"
       >
-        <slot>{{ content }}</slot>
+        <slot> {{ content }}</slot>
         <div class="layui-popper-arrow"></div>
       </div>
     </transition>

package/component/src/component/select/index.vue

@@ -68,6 +68,7 @@ const multipleValue = ref([]);
 const emits = defineEmits<SelectEmits>();
 const openState: Ref<boolean> = ref(false);
 const options = ref<any>([]);
+const composing = ref(false);
 var timer: any;
 
 const getOption = (nodes: VNode[], newOptions: any[]) => {
@@ -79,7 +80,12 @@ const getOption = (nodes: VNode[], newOptions: any[]) => {
       if (component.name == LaySelectOption.name) {
         if (item.children) {
           // @ts-ignore
-          item.props.label = item.children.default()[0].children;
+          const label = item.children.default()[0].children;
+
+          if (typeof label == "string") {
+            // @ts-ignore
+            item.props.label = label;
+          }
         }
         newOptions.push(item.props);
       }
@@ -104,6 +110,15 @@ const handleRemove = (value: any) => {
   }
 };
 
+const onCompositionstart = () => {
+  composing.value = true;
+};
+
+const onCompositionend = (event: Event) => {
+  composing.value = false;
+  handleSearch((event.target as HTMLInputElement).value);
+};
+
 onMounted(() => {
   intOption();
   timer = setInterval(intOption, 500);
@@ -150,6 +165,7 @@ const multiple = computed(() => {
 });
 
 const handleSearch = (value: string) => {
+  if (composing.value) return;
   emits("search", value);
   searchValue.value = value;
 };
@@ -204,13 +220,15 @@ provide("multiple", multiple);
       </lay-tag-input>
       <lay-input
         v-else
-        v-model="singleValue"
+        :modelValue="singleValue"
         :placeholder="placeholder"
         :allow-clear="allowClear"
         :readonly="!showSearch"
         :disabled="disabled"
         :class="{ 'layui-unselect': !showSearch }"
         :size="size"
+        @compositionstart="onCompositionstart"
+        @compositionend="onCompositionend"
         @Input="handleSearch"
         @clear="handleClear"
       >
@@ -225,9 +243,11 @@ provide("multiple", multiple);
         <dl class="layui-select-content">
           <div class="layui-select-search" v-if="multiple && showSearch">
             <lay-input
-              v-model="searchValue"
+              :modelValue="searchValue"
               :placeholder="searchPlaceholder"
               @Input="handleSearch"
+              @compositionstart="onCompositionstart"
+              @compositionend="onCompositionend"
               prefix-icon="layui-icon-search"
               size="sm"
             ></lay-input>

package/component/src/component/selectOption/index.vue

@@ -12,7 +12,7 @@ import {
   inject,
   WritableComputedRef,
   Ref,
-  onMounted,
+  ref,
 } from "vue";
 
 export interface SelectOptionProps {
@@ -34,13 +34,20 @@ const selectedValue: WritableComputedRef<any> = inject(
   "selectedValue"
 ) as WritableComputedRef<any>;
 const multiple: ComputedRef = inject("multiple") as ComputedRef;
+const checkboxRef = ref<HTMLElement>();
 
 const handleSelect = () => {
-  if (!multiple.value && !props.disabled) {
+  if (multiple.value) {
+    if (!props.disabled) {
+      // @ts-ignore
+      checkboxRef.value?.toggle();
+    }
+  } else {
+    if (!props.disabled) {
       // @ts-ignore
       selectRef.value.hide();
       selectedValue.value = props.value;
-    select();
+    }
   }
 };
 
@@ -52,18 +59,6 @@ const selected = computed(() => {
   }
 });
 
-const select = () => {
-  if (multiple.value) {
-    if (Array.isArray(selectedValue.value)) {
-      if (notChecked.value) selectedValue.value.push(props.value);
-    } else {
-      selectedValue.value = [props.value];
-    }
-  } else {
-    selectedValue.value = props.value;
-  }
-};
-
 const display = computed(() => {
   return (
     props.keyword?.toString().indexOf(searchValue.value) > -1 ||
@@ -71,34 +66,26 @@ const display = computed(() => {
   );
 });
 
-const notChecked = computed(() => {
+const classes = computed(() => {
-  return (
+  return [
-    selectedValue.value.find((item: any) => {
+    "layui-select-option",
-      return item === props.value;
+    {
-    }) === undefined
+      "layui-this": selected.value,
-  );
+      "layui-disabled": props.disabled,
-});
+    },
-
+  ];
-onMounted(() => {
-  selected.value && select();
 });
 </script>
 
 <template>
-  <dd
+  <dd v-show="display" :class="classes" @click="handleSelect">
-    v-show="display"
-    :class="[
-      'layui-select-option',
-      { 'layui-this': selected, 'layui-disabled': disabled },
-    ]"
-    @click="handleSelect"
-  >
     <template v-if="multiple">
       <lay-checkbox
+        skin="primary"
+        ref="checkboxRef"
         v-model="selectedValue"
         :disabled="disabled"
         :value="value"
-        skin="primary"
       ></lay-checkbox>
     </template>
     <slot>{{ label }}</slot>

package/component/src/component/table/index.less

@@ -366,10 +366,6 @@
   box-sizing: border-box;
 }
 
-.layui-table-cell .lay-tooltip-content {
-  display: inline;
-}
-
 .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
   top: -1px;
   padding: 0;

package/component/src/component/upload/index.vue

@@ -17,6 +17,7 @@ import {
   ref,
   useSlots,
   withDefaults,
+  watch
 } from "vue";
 import { templateRef } from "@vueuse/core";
 import { LayLayer } from "@layui/layer-vue";
@@ -68,6 +69,10 @@ export interface UploadProps {
   disabledPreview?: boolean;
   cut?: boolean;
   cutOptions?: CutOptions;
+  text?: string;
+  dragText?: string;
+  modelValue?: any;
+  auto?: boolean;
 }
 
 const getCutDownResult = () => {
@@ -81,6 +86,11 @@ const getCutDownResult = () => {
       Object.assign({ currentTimeStamp, cutResult: imgData, orginal: orgInfo })
     );
     let newFile = dataURLtoFile(imgData);
+    if (!props.auto) {
+      emit("update:modelValue", [newFile]);
+      clearLightCutEffect();
+      return;
+    }
     commonUploadTransaction([newFile]);
     nextTick(() => clearAllCutEffect());
   } else {
@@ -102,9 +112,20 @@ const clearAllCutEffect = () => {
   _cropper = null;
 };
 
+const clearLightCutEffect = () => {
+  activeUploadFiles.value = [];
+  activeUploadFilesImgs.value = [];
+  innerCutVisible.value = false;
+  _cropper = null;
+};
+
 const { t } = useI18n();
-const text = computed(() => t("upload.text"));
+const text = computed(() => {
-const dragText = computed(() => t("upload.dragText"));
+  return props.text ? props.text : t("upload.text");
+});
+const dragText = computed(() => {
+  return props.dragText ? props.dragText : t("upload.dragText");
+});
 const defaultErrorMsg = computed(() => t("upload.defaultErrorMsg"));
 const urlErrorMsg = computed(() => t("upload.urlErrorMsg"));
 const numberErrorMsg = computed(() => t("upload.numberErrorMsg"));
@@ -142,6 +163,8 @@ const props = withDefaults(defineProps<UploadProps>(), {
   disabledPreview: false,
   cut: false,
   cutOptions: void 0,
+  modelValue: null,
+  auto: true,
 });
 
 const slot = useSlots();
@@ -149,19 +172,30 @@ const slots = slot.default && slot.default();
 const context = getCurrentInstance();
 const emit = defineEmits([
   "choose",
+  "chooseAfter",
   "before",
   "done",
   "error",
   "cutdone",
   "cutcancel",
+  "update:modelValue",
 ]);
 
+watch(
+  () => props.modelValue,
+  () => {
+    if (!props.modelValue) {
+      clearAllCutEffect();
+    }
+  }
+);
+
 const isDragEnter = ref(false);
 const activeUploadFiles = ref<any[]>([]);
 const activeUploadFilesImgs = ref<any[]>([]);
 const orgFileInput = templateRef<HTMLElement>("orgFileInput");
-let _cropper: any = null;
 
+let _cropper: any = null;
 let computedCutLayerOption: ComputedRef<LayerModal>;
 
 if (props.cutOptions && props.cutOptions.layerOption) {
@@ -213,7 +247,7 @@ const localUploadTransaction = (option: localUploadTransaction) => {
 
 const dataURLtoFile = (dataurl: string) => {
   let arr: any[] = dataurl.split(",");
-  let mime: string = "";
+  let mime = "";
   if (arr.length > 0) {
     mime = arr[0].match(/:(.*?);/)[1];
   }
@@ -231,14 +265,13 @@ const errorF = (errorText: string) => {
   let errorMsg = errorText ? errorText : defaultErrorMsg;
   errorMsg = `layui-vue:${errorMsg}`;
   console.warn(errorMsg);
-  layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) {});
+  layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) { });
   emit("error", Object.assign({ currentTimeStamp, msg: errorMsg }));
 };
 
 const localUpload = (option: localUploadOption, callback: Function) => {
-  let xhr: XMLHttpRequest, url;
+  let xhr: XMLHttpRequest = new XMLHttpRequest();
-  xhr = new XMLHttpRequest();
+  let url = option.url;
-  url = option.url;
   let formData = option.formData;
   const cb = callback;
   xhr.onreadystatechange = function () {
@@ -319,10 +352,12 @@ const uploadChange = (e: any) => {
     props.cut &&
     props.acceptMime.indexOf("image") != -1 &&
     props.multiple == false;
+
   let arm2 =
     props.cut &&
     props.acceptMime.indexOf("image") != -1 &&
     props.multiple == true;
+
   if (arm1) {
     innerCutVisible.value = true;
     setTimeout(() => {
@@ -341,6 +376,10 @@ const uploadChange = (e: any) => {
     if (arm2) {
       console.warn(cannotSupportCutMsg.value);
     }
+    if (!props.auto) {
+      emit("update:modelValue", _files);
+      return;
+    }
     commonUploadTransaction(_files);
   }
 };
@@ -403,22 +442,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
+  <div class="layui-upload layui-upload-wrap" :class="disabledPreview ? 'layui-upload-file-disabled' : ''">
-    class="layui-upload layui-upload-wrap"
+    <input type="file" class="layui-upload-file" ref="orgFileInput" :name="field" :field="field" :multiple="multiple"
-    :class="disabledPreview ? 'layui-upload-file-disabled' : ''"
+      :accept="acceptMime" :disabled="disabled" @click="clickOrgInput" @change="uploadChange" />
-  >
-    <input
-      type="file"
-      class="layui-upload-file"
-      ref="orgFileInput"
-      :name="field"
-      :field="field"
-      :multiple="multiple"
-      :accept="acceptMime"
-      :disabled="disabled"
-      @click="clickOrgInput"
-      @change="uploadChange"
-    />
     <div v-if="!drag">
       <div class="layui-upload-btn-box" @click.stop="chooseFile">
         <template v-if="slot.default">
@@ -431,19 +457,13 @@ onUnmounted(() => {
         </template>
       </div>
     </div>
-    <div
+    <div v-else ref="dragRef" class="layui-upload-drag" :class="
-      v-else
-      ref="dragRef"
-      class="layui-upload-drag"
-      :class="
       disabled
         ? 'layui-upload-drag-disable'
         : isDragEnter
           ? 'layui-upload-drag-draging'
           : ''
-      "
+    " @click.stop="chooseFile">
-      @click.stop="chooseFile"
-    >
       <i class="layui-icon"></i>
       <p>{{ dragText }}</p>
       <div class="layui-hide" id="uploadDemoView">
@@ -451,38 +471,17 @@ onUnmounted(() => {
         <img src="" alt="上传成功后渲染" style="max-width: 196px" />
       </div>
     </div>
-    <lay-layer
+    <lay-layer v-model="innerCutVisible" :title="computedCutLayerOption.title" :move="computedCutLayerOption.move"
-      v-model="innerCutVisible"
+      :resize="computedCutLayerOption.resize" :shade="computedCutLayerOption.shade"
-      :title="computedCutLayerOption.title"
+      :shadeClose="computedCutLayerOption.shadeClose" :shadeOpacity="computedCutLayerOption.shadeOpacity"
-      :move="computedCutLayerOption.move"
+      :zIndex="computedCutLayerOption.zIndex" :btnAlign="computedCutLayerOption.btnAlign"
-      :resize="computedCutLayerOption.resize"
+      :area="computedCutLayerOption.area" :anim="computedCutLayerOption.anim"
-      :shade="computedCutLayerOption.shade"
+      :isOutAnim="computedCutLayerOption.isOutAnim" :btn="computedCutLayerOption.btn" @close="clearAllCutEffect">
-      :shadeClose="computedCutLayerOption.shadeClose"
+      <div class="copper-container" v-for="(base64str, index) in activeUploadFilesImgs" :key="`file${index}`">
-      :shadeOpacity="computedCutLayerOption.shadeOpacity"
+        <img :src="base64str" :id="`_lay_upload_img${index}`" class="_lay_upload_img" />
-      :zIndex="computedCutLayerOption.zIndex"
-      :btnAlign="computedCutLayerOption.btnAlign"
-      :area="computedCutLayerOption.area"
-      :anim="computedCutLayerOption.anim"
-      :isOutAnim="computedCutLayerOption.isOutAnim"
-      :btn="computedCutLayerOption.btn"
-      @close="clearAllCutEffect"
-    >
-      <div
-        class="copper-container"
-        v-for="(base64str, index) in activeUploadFilesImgs"
-        :key="`file${index}`"
-      >
-        <img
-          :src="base64str"
-          :id="`_lay_upload_img${index}`"
-          class="_lay_upload_img"
-        />
       </div>
     </lay-layer>
-    <div
+    <div class="layui-upload-list" :class="disabledPreview ? 'layui-upload-list-disabled' : ''">
-      class="layui-upload-list"
-      :class="disabledPreview ? 'layui-upload-list-disabled' : ''"
-    >
       <slot name="preview"></slot>
     </div>
   </div>

package/document-component/src/document/zh-CN/components/form.md

@@ -151,6 +151,7 @@ export default {
 ::: demo
 
 <template>
+{{ validateModel }}
   <lay-form :model="validateModel" ref="layFormRef" required>
     <lay-form-item label="账户" prop="username">
       <lay-input v-model="validateModel.username"></lay-input>
@@ -173,8 +174,11 @@ export default {
     <lay-form-item label="描述" prop="desc">
       <lay-textarea placeholder="请输入描述" v-model="validateModel.desc"></lay-textarea>
     </lay-form-item>
+    <lay-form-item label="文件" prop="file">
+      <lay-upload v-model="validateModel.file" acceptMime="image/*" :auto="false"/>
+    </lay-form-item>
     <lay-form-item>
-      <lay-button @click="validate">提交</lay-button>
+      <lay-button @click="validate3">提交</lay-button>
       <lay-button @click="clearValidate">清除校验</lay-button>
       <lay-button @click="reset">重置表单</lay-button>
     </lay-form-item>
@@ -192,13 +196,15 @@ export default {
         username: "",
         password: "",
         specialty: "1",
-        hobbys: ""
+        hobbys: "",
+        file: null,
     })
 
     const layFormRef = ref(null);
     // 校验
-    const validate = function() {
+    const validate3= function() {
       layFormRef.value.validate((isValidate, model, errors) => {
+          console.log(JSON.stringify(model.file))
          layer.open({
           type: 1,
           title:"表单提交结果", 
@@ -225,7 +231,7 @@ export default {
     return {
       validateModel,
       layFormRef,
-      validate,
+      validate3,
       clearValidate,
       reset
     }

package/document-component/src/document/zh-CN/components/inputNumber.md

@@ -13,8 +13,7 @@
 ::: demo 使用 `lay-input-number` 标签, 创建数字输入框
 
 <template>
-  {{data1}}
+  <lay-input-number v-model="data1" :step="0.11"></lay-input-number>
-  <lay-input-number v-model="data1"></lay-input-number>
   <lay-input-number v-model="data2"  position="right"></lay-input-number>
 </template>
 

package/document-component/src/document/zh-CN/components/pageHeader.md

@@ -24,6 +24,9 @@ const handleBack=()=>{
 
 :::
 
+::: title 设置标题
+:::
+
 ::: demo 使用 `backText` 属性  自定义返回文本
 
 <template>
@@ -38,8 +41,9 @@ const handleBack=()=>{
 
 :::
 
-::: title PageHeader 插槽
+::: title 使用插槽
 :::
+
 ::: demo 使用 默认插槽可以自定义右侧内容  同时content属性将失效
 
 <template>
@@ -71,7 +75,7 @@ const handleBack=()=>{
 | ------ | ---- | -------------- |
 | content| 标题,当前默认插槽不为空时失效 | --             |
 | backText| 返回文本 | 默认 "返回"            |
-
+| backIcon| 返回图标 | 内置图标集            |
 :::
 
 ::: title PageHeader 事件
@@ -85,6 +89,19 @@ const handleBack=()=>{
 
 :::
 
+::: title PageHeader 插槽
+:::
+
+::: table
+
+| 属性   | 描述 |
+| ------ | ---- | 
+| default | 标题内容 |
+| backIcon| 返回图标 |
+
+:::
+
+
 ::: contributor pageHeader
 :::  
 

package/document-component/src/document/zh-CN/components/select.md

@@ -16,7 +16,7 @@
   <lay-select v-model="value">
     <lay-select-option :value="1" label="学习"></lay-select-option>
     <lay-select-option :value="2" label="编码"></lay-select-option>
-    <lay-select-option :value="3" v-if="true">运动</lay-select-option>
+    <lay-select-option :value="3" label="运动"></lay-select-option>
   </lay-select>
 </template>
 
@@ -47,7 +47,7 @@ export default {
       <lay-select-option :value="2" label="编码"></lay-select-option>
       <lay-select-option :value="3" label="运动"></lay-select-option>
     </lay-select>
-    <lay-button @click="change2"> change ：{{value2}}</lay-button>
+    <lay-button @click="change2"> change ：{{value2}} </lay-button>
   </lay-space>
 </template>
 
@@ -117,15 +117,15 @@ export default {
 
 <template>
   <lay-space>
-    <lay-select v-model="value3" :show-search="true" @search="search">
+    <lay-select v-model="value3" :show-search="true">
     <lay-select-option value="1" label="学习"></lay-select-option>
     <lay-select-option value="2" label="编码"></lay-select-option>
-    <lay-select-option value="3" :label="null"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
   </lay-select>
-    <lay-select v-model="value4" :show-search="true" :multiple="true" @search="search">
+    <lay-select v-model="value4" :show-search="true" :multiple="true">
     <lay-select-option value="1" label="学习"></lay-select-option>
     <lay-select-option value="2" label="编码"></lay-select-option>
-    <lay-select-option value="3" :label="null"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
   </lay-select>
   </lay-space>
 </template>
@@ -139,13 +139,9 @@ export default {
     const value3 = ref('1')
     const value4 = ref(['1'])
  
-    const search = function() {
-      console.log("触发")
-    }
     return {
       value3,
       value4,
-      search
     }
   }
 }
@@ -290,6 +286,35 @@ export default {
 </script>
 :::
 
+::: title 定制选项
+:::
+
+::: demo 使用 `lay-select` 标签, 创建下拉选择框
+
+<template>
+  <lay-select v-model="value">
+    <lay-select-option :value="1" label="学习"></lay-select-option>
+    <lay-select-option :value="2" label="编码"></lay-select-option>
+    <lay-select-option :value="3" label="运动">运动</lay-select-option>
+  </lay-select>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const value = ref(null);
+    return {
+      value
+    }
+  }
+}
+</script>
+
+:::
+
+
 ::: title Select 属性
 :::
 

package/document-component/src/document/zh-CN/components/space.md

@@ -40,7 +40,7 @@ export default {
 
 <template>
   <lay-space direction="vertical" fill wrap>
-    <lay-button v-for="idx of 5" type="normal" fluid="true">按钮 {{idx}}</lay-button>
+    <lay-button v-for="idx of 5" type="normal" :fluid="true">按钮 {{idx}}</lay-button>
   </lay-space>
 </template>
 

package/document-component/src/document/zh-CN/components/table.md

@@ -1387,7 +1387,6 @@ export default {
 ::: demo 使用了绝大部分属性的 table 案例
 
 <template>
-  <lay-button @click="changeMaxHeight"></lay-button>
   <lay-table 
       id="id" 
       :max-height="maxHeight5"
@@ -1428,10 +1427,6 @@ export default {
     const defaultToolbar5 = ref(true)
     const maxHeight5 = ref('600px');
 
-    const changeMaxHeight = () => {
-      maxHeight5.value = '200px'
-    }
-
     const page5 = {
       total: 100,
       limit: 10,

package/document-component/src/document/zh-CN/components/tooltip.md

@@ -84,21 +84,21 @@ export default {
 <template>
   <div style="padding: 100px;max-width:400px;">
     <div style="text-align: center;">
-      <lay-tooltip content="假装这里有文字提示">
+      <lay-tooltip  trigger="click" content="假装这里有文字提示">
         <lay-button>上边</lay-button>
       </lay-tooltip>
     </div>
     <div>
-      <lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="left">
+      <lay-tooltip  trigger="click" content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="left">
         <lay-button style="float:left;">左边</lay-button>
       </lay-tooltip>
-      <lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="right">
+      <lay-tooltip  trigger="click" content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="right">
         <lay-button style="float:right;">右边</lay-button>
       </lay-tooltip>
       <div style="clear: both;"></div>
     </div>
     <div style="text-align: center;">
-      <lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="bottom">
+      <lay-tooltip  trigger="click" content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="bottom">
         <lay-button>下边</lay-button>
       </lay-tooltip>
     </div>

package/document-component/src/document/zh-CN/components/upload.md

@@ -13,11 +13,9 @@
 ::: demo 使用 `lay-upload` 标签, 创建一个上传按钮
 
 <template>
-  <lay-upload url="https://www.mocky.io/v2/5cc8019d300000980a055e76" @done="doneHandle" field="bigFile" @choose="beginChoose">
+  <lay-upload url="https://www.mocky.io/v2/5cc8019d300000980a055e76" field="file" @done="doneHandle">
     <template #preview>
-      <div v-for="(item,index) in picList" :key="`demo1-pic-'${index}`">
+      <img v-if="data" :src="data.url" style="width: 100px;"/>
-        <img :src="item"/>
-      </div>
     </template>
   </lay-upload>
 </template>
@@ -27,34 +25,47 @@ import { ref,reactive } from 'vue'
 
 export default {
   setup() {
-    const picList = ref([]);
+
-    const filetoDataURL=(file,fn)=>{
+    const data = ref();
-      const reader = new FileReader();
+
-      reader.onloadend = function(e){
+    const doneHandle = (result) => {
-        fn(e.target.result);
+      data.value = JSON.parse(result.data);
-      };
+      console.log(data.value.url)
-      reader.readAsDataURL(file);
-    };
-    const doneHandle=(files)=>{
-      console.log("触发")
-      if(Array.isArray(files)&&files.length>0){
-        files.forEach((file,index,array)=>{
-          filetoDataURL(file,(res)=>{
-            console.log(res);
-            picList.value.push(res);
-            console.log(picList.value);
-          });
-        });
-      }
-    };
-    const beginChoose =(e)=>{
-      console.log("beginChoose",e);
     };
+
     return {
       doneHandle,
-      filetoDataURL,
+      data
-      beginChoose,
+    }
-      picList
+  }
+}
+</script>
+
+:::
+
+::: title 手动上传
+:::
+
+::: demo 使用 `lay-upload` 标签, 创建一个上传按钮
+
+<template>
+  <lay-upload url="https://www.mocky.io/v2/5cc8019d300000980a055e76" v-model="file1" field="file" :auto="false">
+    <template #preview>
+      {{ file1 }}
+    </template>
+  </lay-upload>
+</template>
+
+<script>
+import { ref,reactive } from 'vue'
+
+export default {
+  setup() {
+
+    const file1 = ref();
+
+    return {
+      file1
     }
   }
 }
@@ -260,6 +271,9 @@ export default {
 | disabledPreview | 设置文件预览插槽区域为禁用状态 | boolean  | false  | -- |
 | cut | 是否开启选择图片后检测,设置true可开启 | boolean  | false  | -- |
 | cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object  | { layerOption,copperOption }  | -- |
+| text        | 普通上传描述     | string  | --        | -- |
+| dragText        | 拖拽上传描述     | string  | --        | -- |
+| auto        | 是否自动提交     | boolean  |  false       | -- |
 
 :::
 

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -11,19 +11,37 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="1.7.x">
+    <ul> 
+      <a name="1-7-7"></a> 
+      <li> 
+        <h3>1.7.7 <span class="layui-badge-rim">2022-11-11</span></h3> 
+        <ul>
+          <li>[新增] upload 组件 text 属性, 设置上传描述。</li>
+          <li>[新增] upload 组件 dragText 属性, 设置拖拽面板提示信息。</li>
+          <li>[修复] select-option 组件 default 插槽内容为多层元素时, 使用 label 属性值作为回显。</li>
+          <li>[修复] input-number 组件 step 设置为小数时精度丢失的问题。</li>
+          <li>[修复] tooltip 组件临近屏幕边界, 三角位置显示错误。</li>
+          <li>[优化] select-option 组件 多选 模式只能点击复选框的问题。</li>
+          <li>[优化] select 组件 search 事件在拼字时触发的问题。</li>
+          <li>[优化] select 组件 change 事件触发时机不恰当的问题。</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="1-7-6"></a> 
       <li> 
-        <h3>1.7.6 <span class="layui-badge-rim">2022-11-07</span></h3> 
+        <h3>1.7.6 <span class="layui-badge-rim">2022-11-09</span></h3> 
         <ul>
+          <li>[新增] page-header 组件 back-icon 插槽, 自定义返回图标。</li>
           <li>[新增] page-header 组件 back-icon 属性, 自定义返回图标。</li>
+          <li>[修复] input-number 组件 step 设置为小数时精度丢失的问题。</li>
+          <li>[修复] datePicker 组件 年选择器 清空后再点击确定回显错误。</li>
           <li>[修复] select 组件 单选模式 与 多选模式 清空操作样式不统一的问题。</li>
           <li>[修复] select 组件 单选模式 与 多选模式 下拉宽度不一致的问题。</li>
           <li>[修复] select 组件 多选模式 @search 事件不生效的问题。</li>
           <li>[优化] select 组件 label 属性不兼容 number 类型。</li>
           <li>[优化] select-option 组件 label 属性为 null 时, 单选不展示。</li>
           <li>[优化] select-option 组件 label 属性为 null 时, 搜索报错。</li>
-          <li>[修复] datePicker 组件 年选择器 清空后再点击确定回显错误。</li>
           <li>[优化] datePicker 组件 新增change,blur,foucs事件。</li>
         </ul> 
       </li>