📝(component): 暂存

2022-08-26 11:25:50 +08:00 · 2022-08-26 11:25:50 +08:00 · cbb0912a19
commit cbb0912a19
parent 03528f1f6d
6 changed files with 43 additions and 62 deletions
--- a/package/component/src/component/carousel/index.vue
+++ b/package/component/src/component/carousel/index.vue
@ -6,17 +6,7 @@ export default {

 <script setup lang="ts">
 import "./index.less";
-import {
-  withDefaults,
-  provide,
-  useSlots,
-  ref,
-  computed,
-  VNode,
-  Ref,
-  Component,
-  watch,
-} from "vue";
+import { withDefaults, provide, useSlots, ref, computed, VNode, Ref, Component, watch } from "vue";
 import CarouselItem from "../carouselItem/index.vue";

 const slot = useSlots() as any;
--- a/package/component/src/component/page/index.vue
+++ b/package/component/src/component/page/index.vue
@ -214,4 +214,4 @@ watch(
      </button>
    </span>
  </div>
-</template>
+</template>
--- a/package/component/src/component/upload/index.vue
+++ b/package/component/src/component/upload/index.vue
@ -21,12 +21,13 @@ import { templateRef } from "@vueuse/core";
 import { LayLayer } from "@layui/layer-vue";
 import LayButton from "../button/index.vue";
 import Cropper from "cropperjs";
-// 组件的参数字段类型
-//https://www.layuiweb.com/doc/modules/upload.html#options
+import { arrayExpression } from "@babel/types";
+
 export interface LayerButton {
  text: string;
  callback: Function;
 }
+
 export interface LayerModal {
  title?: string;
  resize?: boolean;
@ -113,8 +114,8 @@ let defaultCutLayerOption: LayerModal = {
 };

 const props = withDefaults(defineProps<LayUploadProps>(), {
-  acceptMime: "image/*",
  field: "file",
+  acceptMime: "MIME_type",
  size: 0,
  multiple: false,
  number: 0,
@ -137,11 +138,8 @@ const emit = defineEmits([
  "cutcancel",
 ]);

-// 内部变量
 const isDragEnter = ref(false);
-// 待处理的上传文件
 const activeUploadFiles = ref<any[]>([]);
-// 待处理的上传图片
 const activeUploadFilesImgs = ref<any[]>([]);
 const orgFileInput = templateRef<HTMLElement>("orgFileInput");
 let _cropper: any = null;
@ -154,24 +152,25 @@ if (props.cutOptions && props.cutOptions.layerOption) {
  computedCutLayerOption = computed(() => defaultCutLayerOption);
 }

-// 统一异常提示的常量
 const defaultErrorMsg = "上传失败";
 const urlErrorMsg = "上传地址格式不合法";
 const numberErrorMsg = "文件上传超过规定的个数";
 const sizeErrorMsg = "文件大小超过限制";
 const uploadRemoteErrorMsg = "请求上传接口出现异常";
 const cutInitErrorMsg = "剪裁插件初始化失败";
-// 统一成功提示
 const uploadSuccess = "上传成功";

-//内部方法 -> start
-//文件上传事务流程的方法参数类型
 interface localUploadTransaction {
  url: string;
  files: File[] | Blob[];
  [propMame: string]: any;
 }

+interface localUploadOption {
+  url: string;
+  [propMame: string]: any;
+}
+
 const innerCutVisible = ref<boolean>(false);

 const localUploadTransaction = (option: localUploadTransaction) => {
@ -181,19 +180,12 @@ const localUploadTransaction = (option: localUploadTransaction) => {
    errorF(urlErrorMsg);
    return;
  }
-  if (files.length > 0) {
-    if (props.multiple) {
-      // 多文件
+  if (Array.isArray(files) && files.length > 0) {
      for (let i = 0; i < files.length; i++) {
        let _file = files[i];
        formData.append(props.field + "[" + i + "]", _file);
      }
-    } else {
-      // 单文件
-      formData.append(props.field, files[0]);
-    }
  }
-  // 额外参数 
  if (props.data && props.data instanceof Object) {
    let _requestDate = props.data;
    for (const key in _requestDate) {
@ -207,11 +199,6 @@ const localUploadTransaction = (option: localUploadTransaction) => {
  }, 200);
 };

-//单文件上传的方法参数类型
-interface localUploadOption {
-  url: string;
-  [propMame: string]: any;
-}
 const dataURLtoFile = (dataurl: string) => {
  let arr: any[] = dataurl.split(",");
  let mime: string = "";
@ -242,10 +229,7 @@ const localUpload = (option: localUploadOption, callback: Function) => {
  url = option.url;
  let formData = option.formData;
  const cb = callback;
-  //事件回调
-  // event callbacks
  xhr.onreadystatechange = function () {
-    // 发起
    let currentTimeStamp = new Date().valueOf();
    if (xhr.readyState === 1) {
      if (
@ -260,20 +244,14 @@ const localUpload = (option: localUploadOption, callback: Function) => {
        );
      }
    } else if (xhr.readyState === 4) {
-      // 完成
      let successText = xhr.responseText ? xhr.responseText : uploadSuccess;
-      if (
-        (xhr.status >= 200 && xhr.status <= 300) ||
-        xhr.status === 304 ||
-        xhr.status == 0
-      ) {
+      if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304 || xhr.status == 0) {
        let data = xhr.responseText;
        emit("done", { currentTimeStamp, msg: successText, data: data });
      }
    }
  };
-  xhr.open("post", url, true); //不能是GET, get请求数据发送只能拼接在URL后面
-  // 对应Upload属性的headers字段,额外的上传参数
+  xhr.open("post", url, true);
  if (props.headers) {
    for (let key in props.headers) {
      xhr.setRequestHeader(key, props.headers[key]);
@ -281,7 +259,6 @@ const localUpload = (option: localUploadOption, callback: Function) => {
  } else {
    xhr.setRequestHeader("Accept", "application/json, text/javascript");
  }
-  // 上传事务开启前的回调
  let currentTimeStamp = new Date().valueOf();
  emit("before", Object.assign(option, currentTimeStamp));
  xhr.send(formData);
@ -289,6 +266,7 @@ const localUpload = (option: localUploadOption, callback: Function) => {
    cb();
  }
 };
+
 const filetoDataURL = (file: File, fn: Function) => {
  const reader = new FileReader();
  reader.onloadend = function (e: any) {
@ -296,15 +274,14 @@ const filetoDataURL = (file: File, fn: Function) => {
  };
  reader.readAsDataURL(file);
 };
+
 const getUploadChange = (e: any) => {
  const files = e.target.files;
  const _files = [...files];
-  // 对应Upload属性的number字段,控制单次上传个数
  if (props.multiple && props.number != 0 && props.number < _files.length) {
    errorF(numberErrorMsg);
    return;
  }
-  // 对应Upload属性的size字段,控制上传图片的大小
  if (props.size && props.size != 0) {
    let _cache = [];
    for (let i = 0; i < _files.length; i++) {
@ -331,14 +308,8 @@ const getUploadChange = (e: any) => {
      activeUploadFilesImgs.value.push(res);
    });
  }
-  let arm1 =
-    props.cut &&
-    props.acceptMime.indexOf("images") != -1 &&
-    props.multiple == false;
-  let arm2 =
-    props.cut &&
-    props.acceptMime.indexOf("images") != -1 &&
-    props.multiple == true;
+  let arm1 = 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(() => {
@ -352,12 +323,13 @@ const getUploadChange = (e: any) => {
  } else {
    if (arm2) {
      console.warn(
-        "layui-vue:当前版本暂不支持单次多文件剪裁,尝试设置 multiple 为false,通过@done获取返回文件对象"
+        "当前版本暂不支持单次多文件剪裁,尝试设置 multiple 为 false, 通过 @done 获取返回文件对象"
      );
    }
    commonUploadTransaction(_files);
  }
 };
+
 const commonUploadTransaction = (_files: any[]) => {
  let currentTimeStamp = new Date().valueOf();
  let successText = uploadSuccess;
@ -370,16 +342,19 @@ const commonUploadTransaction = (_files: any[]) => {
    emit("done", { currentTimeStamp, msg: successText, data: _files });
  }
 };
+
 const chooseFile = () => {
  let _target = orgFileInput.value;
  if (_target) {
    _target.click();
  }
 };
+
 const clickOrgInput = () => {
  let currentTimeStamp = new Date().valueOf();
  emit("choose", currentTimeStamp);
 };
+
 const cutTransaction = () => {};
 </script>

--- a/package/document-component/src/document/zh-CN/components/upload.md
+++ b/package/document-component/src/document/zh-CN/components/upload.md
@ -13,7 +13,7 @@
 ::: demo 使用 `lay-upload` 标签, 创建一个上传按钮

 <template>
-  <lay-upload @done="getUploadFile" field="bigFile" @choose="beginChoose" url="http://www.baidu.com">
+  <lay-upload @done="getUploadFile" field="bigFile" @choose="beginChoose">
    <template #preview>
      <div v-for="(item,index) in picList" :key="`demo1-pic-'${index}`">
        <img :src="item"/>
@ -249,7 +249,7 @@ export default {
 | url        | 服务端上传接口的地址     | string  | --        | -- |
 | data      | 请求上传接口的额外参数   | object | --   | --                  |
 | headers      | 接口的请求头     | object | -- | --                   |
-| acceptMime    | 文件选择框时的可选文件类型 | string | `images`   | `images` |
+| acceptMime    | 文件选择框时的可选文件类型 | string | `MIME_type`   | `MIME_type` |
 | field    | 设定文件域的字段名     | string | `file`   | -- |
 | size | 设置文件最大可允许上传的大小，单位 KB。不支持ie8/9 | number  | `0(不限制)`  | -- |
 | multiple | 是否允许多文件上传。设置 true即可开启。不支持ie8/9 | boolean  | false  | -- |
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@ -11,6 +11,22 @@
 <template>
 <lay-timeline>
  <lay-timeline-item title="1.4.x">
+    <ul> 
+      <a name="1-4-4"></a> 
+      <li> 
+        <h3>1.4.5 <span class="layui-badge-rim">2022-08-26</span></h3> 
+        <ul>     
+          <li>[修复] upload 组件 field 属性无效。</li>
+          <li>[修复] upload 组件 acceptMime 属性 默认值 无效。</li>
+          <li>[修复] menu 组件 changeOpenKeys 事件, 初始化时回调的问题。</li>
+          <li>[修复] dropdown 组件 popupContainer 不适用于 vue 自身渲染的元素的问题。</li>
+          <li>[优化] table 组件 page 属性, 与 page 组件属性对应, 并全部启用。 </li>
+          <li>[优化] input 组件 password 属性, 在 edge 的兼容问题。 </li>
+          <li>[优化] page 组件 total 属性为 0 时, 下一页仍可用的问题。</li>
+          <li>[优化] upload 组件 acceptMime 属性默认值为 MIME_type。</li>
+        </ul>
+      </li>
+    </ul>
    <ul> 
      <a name="1-4-4"></a> 
      <li> 
--- a/package/document-component/src/view/index.vue
+++ b/package/document-component/src/view/index.vue
@ -32,7 +32,7 @@
          >
          <span
            >{{ t("home.download") }}：<em class="site-showdowns"
-              >20,894</em
+              >24,177</em
            ></span
          >
        </div>
@ -43,7 +43,7 @@
            rel="nofollow"
            class="site-star"
          >
-            <i class="layui-icon"></i> Star <cite id="getStars">1398</cite>
+            <i class="layui-icon"></i> Star <cite id="getStars">1465</cite>
          </a>
          <a
            href="https://gitee.com/layui-vue"