meixioacomponent 0.2.43 → 0.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.2.43",
+  "version": "0.2.44",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",

package/packages/components/base/baseUpload/baseUploadItem.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="base-upload-item-wrap" :class="[`${shape}`]">
+  <div
+    class="base-upload-item-wrap"
+    :class="[`${shape}`]"
+    v-on:paste="onPasteFile"
+  >
     <div class="type-upload" v-if="type == 'upload'">
       <input
         type="file"
@@ -14,12 +18,31 @@
         :color="`s`"
         :event="true"
         :size="`l`"
-        :name="`meixicomponenticon-plus`"
         class="upload-icon"
+        v-if="!isUploadProImg"
         @iconClick="clickFile"
+        :name="`meixicomponenticon-plus`"
       ></base-icon>
+
+      <div class="is-upload-pro-img" v-if="isUploadProImg && !imgSrc">
+        <base-icon
+          class="upload-icon"
+          :iconClass="`element`"
+          :name="`el-icon-upload`"
+        ></base-icon>
+        <div class="upload-notic-wrap">
+          <span @click="clickFile">点击上传<br /></span
+          ><span class="primary-color"
+            >或点击该处后Ctrl+V 黏贴QQ或微信截图</span
+          >
+        </div>
+      </div>
     </div>
-    <div v-else-if="type == 'img'" class="type-pre-views">
+
+    <div
+      v-if="(isUploadProImg || type == 'img') && imgSrc"
+      class="type-pre-views"
+    >
       <div class="handleUploadItem">
         <base-icon
           :size="`l`"
@@ -36,12 +59,15 @@
 
 <script>
 import baseImgVue from "../baseImg/baseImg.vue";
-// 
+
 import { baseUploadMixins } from "./mixins";
 export default {
   name: "baseUploadItem",
   data() {
     return {};
+  },
+  created() {
+
   },
   mixins: [baseUploadMixins],
   components: {
@@ -80,18 +106,27 @@ export default {
     },
   },
   computed: {
+    
     module: {
       get() {
         return this.$props.value;
       },
-      set(val) {},
+      set(val) {
+        this.$emit("input", val);
+      },
     },
+
     imgSrc() {
-      if (!this.uploadItem.url) {
-        return "";
+      if (this.isGroup) {
+        if (!this.uploadItem?.url) {
+          return "";
+        }
+        return this.uploadItem.url;
+      } else {
+        return this.module[0]?.url;
       }
-      return this.uploadItem.url;
     },
+
     accept() {
       let accept = "";
       let fileType = this.$props.fileType;
@@ -107,11 +142,25 @@ export default {
       }
       return accept;
     },
+
+    isUploadProImg() {
+      let props = this.$props;
+      return (
+        props.shape == "pro" &&
+        props.fileType == "img" &&
+        props.uploadType == "single"
+      );
+    },
+
+    isGroup() {
+      return this.$parent.$options.name == "baseUpload";
+    },
   },
   methods: {
     clickFile() {
       this.$refs.inputFile.click();
     },
+
     async returnFiles(files) {
       let list = [];
       for (let i = 0; i < files.length; i++) {
@@ -124,18 +173,48 @@ export default {
       }
       return list;
     },
+
     async valueChange(e) {
       let files = e.target.files;
       let list = await this.returnFiles(files);
-      if (this.$parent.$options.name == "baseUpload") {
+      this.emitEvent(list);
+      this.$refs.inputFile.value = "";
+    },
+
+    emitEvent(list) {
+      if (this.isGroup) {
         this.$emit("inputChange", list);
       } else {
         this.inputChange(list);
       }
-      this.$refs.inputFile.value = "";
     },
+
     handleDeleteUploadItem() {
-      this.$emit("handleDeleteUploadItem");
+      if (this.isGroup) {
+        this.$emit("handleDeleteUploadItem");
+      } else {
+        this.module = [];
+      }
+    },
+
+    async onPasteFile() {
+      const items = (event.clipboardData || window.clipboardData).items;
+      const rowList = [];
+      if (this.fileType == "img") {
+        for (var i = 0; i < items.length; i++) {
+          if (items[i].type.indexOf("image") !== -1) {
+            let file = items[i].getAsFile(); // getAsFile 如果拖拽项的对象是一个文件, 则返回 File 对象; 否则返回 null
+            rowList.push(file);
+          }
+        }
+      } else {
+        for (var i = 0; i < items.length; i++) {
+          let file = items[i].getAsFile(); // getAsFile 如果拖拽项的对象是一个文件, 则返回 File 对象; 否则返回 null
+          rowList.push(file);
+        }
+      }
+      let list = await this.returnFiles(rowList);
+      this.emitEvent(list);
     },
   },
 };
@@ -143,8 +222,9 @@ export default {
 
 <style lang="less" scoped>
 .base-upload-item-wrap {
-  margin: var(--margin-4);
   margin-left: 0px;
+  position: relative;
+  margin: var(--margin-4);
   border-radius: calc(var(--radius) * 2);
   border: 1px dashed var(--color-border-d);
   .type-upload {
@@ -155,6 +235,33 @@ export default {
     align-items: center;
     flex-flow: row nowrap;
     justify-content: center;
+
+    .is-upload-pro-img {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      cursor: default;
+      align-items: center;
+      flex-flow: column nowrap;
+      justify-content: center;
+
+      .upload-notic-wrap {
+        text-align: center;
+        span {
+          display: block;
+          cursor: pointer;
+          color: var(--font-color-s);
+          font-size: var(--font-size-s);
+          &:hover {
+            color: var(--color-primary);
+          }
+        }
+        .primary-color {
+          margin-top: var(--margin-4);
+          color: var(--color-primary);
+        }
+      }
+    }
     .upload-icon {
       width: 60px;
       height: 60px;
@@ -164,9 +271,11 @@ export default {
     }
   }
   .type-pre-views {
+    top: 0px;
+    left: 0px;
     width: 100%;
     height: 100%;
-    position: relative;
+    position: absolute;
     &:hover {
       .handleUploadItem {
         display: block;
@@ -202,4 +311,12 @@ export default {
   width: 100px;
   height: 100px;
 }
+.pro {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: center;
+}
 </style>