📝(component): 暂存

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;

package/component/src/component/page/index.vue

@@ -214,4 +214,4 @@ watch(
       </button>
     </span>
   </div>
-</template>
+</template>

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>