xs-common-plugins 1.1.2 → 1.1.6

package/src/components/multiple-image-upload/data.js

@@ -1,11 +1,11 @@
-
-export default () => {
-  return {
-    uploadFileList: [], // 文件上传列表
-    dialogImageUrl: [],
-    dialogVisible: false,
-    postImageArray: [],
-    postImage: {},
-    imgListBase64: [],
-  }
-};
+
+export default () => {
+  return {
+    uploadFileList: [], // 文件上传列表
+    dialogImageUrl: [],
+    dialogVisible: false,
+    postImageArray: [],
+    postImage: {},
+    imgListBase64: [],
+  }
+};

package/src/components/multiple-image-upload/index.scss

@@ -1,9 +1,9 @@
-.el-upload-list--picture-card .el-upload-list__item ,.el-upload--picture-card{
-    width: 100px;
-    height: 100px;
-    line-height: 100px;
-    img{
-        width: 100%;
-        height: 100%;
-    }
+.el-upload-list--picture-card .el-upload-list__item ,.el-upload--picture-card{
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    img{
+        width: 100%;
+        height: 100%;
+    }
 }

package/src/components/multiple-image-upload/index.vue

@@ -1,63 +1,63 @@
-<template>
-  <div class="image-upload-wrapper">
-    <el-upload
-      class="avatar-uploader"
-      :action="uploadAction"
-      list-type="picture-card"
-      :headers="myHeaders"
-      :file-list="prodDetailsList"
-      :on-success="uploadSuccess"
-      :on-remove="uploadRemove"
-      :before-upload="handleBeforeUpload"
-      :on-preview="handlePictureCardPreview"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-    <el-dialog :visible.sync="dialogVisible" append-to-body>
-      <img width="100%" :src="dialogImageUrl" alt />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import data from "./data";
-import methods from "./methods";
-import { MIX_Upload } from "@/mixin/upload";
-export default {
-  name: "multipleImage",
-  props: {
-    prodDetailsList: {
-      type: [Object, Array]
-    }
-  },
-  data,
-  methods,
-  mixins: [MIX_Upload],
-  components: {},
-  watch: {
-    value: {
-      handler(newValue) {
-        this.inputValue = newValue;
-      },
-      deep: true
-    },
-    inputValue: {
-      handler(newValue) {
-        this.$emit(EVENT_INPUT, newValue);
-      },
-      deep: true
-    }
-  },
-  computed: {},
-  // ------------------------------------------------------------------
-  // pragma mark - Life Cycle(生命周期)
-  // ------------------------------------------------------------------
-  created() {
-    this.createdInit();
-  },
-  mounted() {
-    this.mountedInit();
-  }
-};
-</script>
-<style lang="scss" src="./index.scss" scope></style>
+<template>
+  <div class="image-upload-wrapper">
+    <el-upload
+      class="avatar-uploader"
+      :action="uploadAction"
+      list-type="picture-card"
+      :headers="myHeaders"
+      :file-list="prodDetailsList"
+      :on-success="uploadSuccess"
+      :on-remove="uploadRemove"
+      :before-upload="handleBeforeUpload"
+      :on-preview="handlePictureCardPreview"
+    >
+      <i class="el-icon-plus"></i>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible" append-to-body>
+      <img width="100%" :src="dialogImageUrl" alt />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import data from "./data";
+import methods from "./methods";
+import { MIX_Upload } from "@/mixin/upload";
+export default {
+  name: "multipleImage",
+  props: {
+    prodDetailsList: {
+      type: [Object, Array]
+    }
+  },
+  data,
+  methods,
+  mixins: [MIX_Upload],
+  components: {},
+  watch: {
+    value: {
+      handler(newValue) {
+        this.inputValue = newValue;
+      },
+      deep: true
+    },
+    inputValue: {
+      handler(newValue) {
+        this.$emit(EVENT_INPUT, newValue);
+      },
+      deep: true
+    }
+  },
+  computed: {},
+  // ------------------------------------------------------------------
+  // pragma mark - Life Cycle(生命周期)
+  // ------------------------------------------------------------------
+  created() {
+    this.createdInit();
+  },
+  mounted() {
+    this.mountedInit();
+  }
+};
+</script>
+<style lang="scss" src="./index.scss" scope></style>

package/src/components/multiple-image-upload/methods.js

@@ -1,45 +1,45 @@
-// TODO: 无效代码
-
-import { uploadImgToBase64 } from "@/common/uploadImgToBase64";
-import { TimeoutError } from "@aspnet/signalr";
-
-export default {
-  // ------------------------------------------------------------------
-  // pragma mark - inti(初始化行为)
-  // ------------------------------------------------------------------
-  createdInit() {},
-  mountedInit() {},
-  handlePictureCardPreview(file) {
-    this.dialogImageUrl = file.url;
-    this.dialogVisible = true;
-  },
-  uploadRemove(val) {
-    console.log(val, "temp"); // TODO: 无效代码
-    var index = this.prodDetailsList.indexOf(val);
-    if (index > -1) {
-      this.prodDetailsList.splice(index, 1);
-    }
-    this.$emit("onSuccess", this.prodDetailsList);
-  },
-  handleBeforeUpload(file) {
-    const isFormat = /^image\/(jpeg|png|jpg|ico|gif)$/.test(file.type);
-    const isLt1M = file.size / 1024 / 1024 < 1;
-    if (!isFormat) {
-      this.$message.error("上传图片只能是 JPEG/PNG/JPG/ICO 格式!");
-    }
-    if (!isLt1M) {
-      this.$message.error("上传图片大小不能超过 1MB!");
-    }
-    return isFormat && isLt1M;
-  },
-  uploadSuccess(res) {
-    if (this.prodDetailsList === undefined) this.prodDetailsList = [];
-    console.log(this.prodDetailsList, "prodDetailsList"); // TODO: 无效代码
-    let temp = {
-      url: res.data
-    };
-    console.log(temp, "temp"); // TODO: 无效代码
-    this.prodDetailsList.push(temp);
-    this.$emit("onSuccess", this.prodDetailsList);
-  }
-};
+// TODO: 无效代码
+
+import { uploadImgToBase64 } from "@/common/uploadImgToBase64";
+import { TimeoutError } from "@aspnet/signalr";
+
+export default {
+  // ------------------------------------------------------------------
+  // pragma mark - inti(初始化行为)
+  // ------------------------------------------------------------------
+  createdInit() {},
+  mountedInit() {},
+  handlePictureCardPreview(file) {
+    this.dialogImageUrl = file.url;
+    this.dialogVisible = true;
+  },
+  uploadRemove(val) {
+    console.log(val, "temp"); // TODO: 无效代码
+    var index = this.prodDetailsList.indexOf(val);
+    if (index > -1) {
+      this.prodDetailsList.splice(index, 1);
+    }
+    this.$emit("onSuccess", this.prodDetailsList);
+  },
+  handleBeforeUpload(file) {
+    const isFormat = /^image\/(jpeg|png|jpg|ico|gif)$/.test(file.type);
+    const isLt1M = file.size / 1024 / 1024 < 1;
+    if (!isFormat) {
+      this.$message.error("上传图片只能是 JPEG/PNG/JPG/ICO 格式!");
+    }
+    if (!isLt1M) {
+      this.$message.error("上传图片大小不能超过 1MB!");
+    }
+    return isFormat && isLt1M;
+  },
+  uploadSuccess(res) {
+    if (this.prodDetailsList === undefined) this.prodDetailsList = [];
+    console.log(this.prodDetailsList, "prodDetailsList"); // TODO: 无效代码
+    let temp = {
+      url: res.data
+    };
+    console.log(temp, "temp"); // TODO: 无效代码
+    this.prodDetailsList.push(temp);
+    this.$emit("onSuccess", this.prodDetailsList);
+  }
+};

package/src/components/pro-upload/data.js

@@ -1,4 +1,4 @@
-export default () => {
-  return {
-  }
+export default () => {
+  return {
+  }
 };

package/src/components/pro-upload/index.scss

@@ -1,5 +1,5 @@
-.pro-upload-wrapper {
-    .el-upload--picture-card{
-        transform: scale(0.8)
-    }
+.pro-upload-wrapper {
+    .el-upload--picture-card{
+        transform: scale(0.8)
+    }
 }

package/src/components/pro-upload/index.vue

@@ -1,90 +1,90 @@
-
-<!--
-    action="#"
-    :http-request="httpRequest" 覆盖默认的上传行为，自定义上传的实现
-    list-type="picture-card"
-    :headers="myHeaders"
-    :file-list="prodDetailsList" ， 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
-    :on-success="uploadSuccess"
-    :on-remove="uploadRemove"
-    :before-upload="handleBeforeUpload"
-    :on-preview="handlePictureCardPreview"
-
-    图片上传组件属性说明
-    on-success : 文件上传成功时的钩子
-    on-remove :文件列表移除文件时的钩子
-    before-upload : 上传文件之前的钩子
-    on-preview : 点击文件列表中已上传的文件时的钩子
-    :on-change="uploadChange" 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
--->
-<template>
-  <div class="pro-upload-wrapper">
-    <el-upload
-      action="#"
-      multiple
-      :limit="limit"
-      :http-request="httpRequest"
-      list-type="picture-card"
-      :on-preview="handlePictureCardPreview"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :on-remove="handleRemove"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-
-    <el-dialog :visible.sync="dialogVisible" append-to-body>
-      <img width="100%" :src="dialogImageUrl" alt />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import data from "./data";
-import methods from "./methods";
-export default {
-  props: {
-    value: {
-      type: [Array],
-      default: function() {
-        return [];
-      }
-    },
-    limit: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      dialogImageUrl: "",
-      dialogVisible: false
-      // fileList: []
-    };
-  },
-  computed: {
-    fileList: {
-      get() {
-        return this.value;
-      },
-      set(value) {
-        this.$emit("input", value);
-      }
-    }
-  },
-  methods,
-  mixins: [],
-  components: {},
-  watch: {},
-
-  // ------------------------------------------------------------------
-  // pragma mark - Life Cycle(生命周期)
-  // ------------------------------------------------------------------
-  created() {
-    this.createdInit();
-  },
-  mounted() {
-    this.mountedInit();
-  }
-};
-</script>
+
+<!--
+    action="#"
+    :http-request="httpRequest" 覆盖默认的上传行为，自定义上传的实现
+    list-type="picture-card"
+    :headers="myHeaders"
+    :file-list="prodDetailsList" ， 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
+    :on-success="uploadSuccess"
+    :on-remove="uploadRemove"
+    :before-upload="handleBeforeUpload"
+    :on-preview="handlePictureCardPreview"
+
+    图片上传组件属性说明
+    on-success : 文件上传成功时的钩子
+    on-remove :文件列表移除文件时的钩子
+    before-upload : 上传文件之前的钩子
+    on-preview : 点击文件列表中已上传的文件时的钩子
+    :on-change="uploadChange" 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+-->
+<template>
+  <div class="pro-upload-wrapper">
+    <el-upload
+      action="#"
+      multiple
+      :limit="limit"
+      :http-request="httpRequest"
+      list-type="picture-card"
+      :on-preview="handlePictureCardPreview"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :on-remove="handleRemove"
+    >
+      <i class="el-icon-plus"></i>
+    </el-upload>
+
+    <el-dialog :visible.sync="dialogVisible" append-to-body>
+      <img width="100%" :src="dialogImageUrl" alt />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import data from "./data";
+import methods from "./methods";
+export default {
+  props: {
+    value: {
+      type: [Array],
+      default: function() {
+        return [];
+      }
+    },
+    limit: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false
+      // fileList: []
+    };
+  },
+  computed: {
+    fileList: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      }
+    }
+  },
+  methods,
+  mixins: [],
+  components: {},
+  watch: {},
+
+  // ------------------------------------------------------------------
+  // pragma mark - Life Cycle(生命周期)
+  // ------------------------------------------------------------------
+  created() {
+    this.createdInit();
+  },
+  mounted() {
+    this.mountedInit();
+  }
+};
+</script>
 <style lang="scss" src="./index.scss" ></style>

package/src/components/pro-upload/methods.js

@@ -1,86 +1,86 @@
-export default {
-  // ------------------------------------------------------------------
-  // pragma mark - inti(初始化行为)
-  // ------------------------------------------------------------------
-  createdInit() {},
-  mountedInit() {},
-
-  /**
-   * 图片预览
-   * @param {*} file
-   */
-  handlePictureCardPreview(file) {
-    this.dialogImageUrl = file.url;
-    this.dialogVisible = true;
-  },
-
-  /**
-   * 删除图片
-   * @param {*} file
-   * @param {*} fileList
-   */
-  handleRemove(file, fileList) {
-    this.fileList = fileList;
-  },
-
-  /**
-   * 覆盖默认的上传行为，自定义上传的实现
-   * @param {*} data
-   */
-  httpRequest(data) {
-    const that = this;
-    let fd = new FormData();
-    fd.append("files", data.file); //传文件
-    this.$http
-      .post("api.img.upload", fd, {
-        headers: {
-          "Content-Type": "multipart/form-data"
-        }
-      })
-      .then(function(res) {
-        if (res.code === 0) {
-          that.fileList.push({
-            url: res.data
-          });
-          that.$emit("input", that.fileList);
-        }
-      });
-  },
-
-  /**
-   * 图片上传之前
-   */
-  handleBeforeUpload(file) {
-    console.log(this.limit)
-    const isFormat = /^image\/(jpeg|png|jpg|ico|gif)$/.test(file.type);
-    const isLt4M = file.size / 1024 / 1024 < 4;
-    console.log("file.size", file.size);
-    console.log("isLt4M", isLt4M);
-    if (!isFormat) {
-      this.$message.error("上传图片只能是 JPEG/PNG/JPG/ICO/gif 格式!");
-    }
-    if (!isLt4M) {
-      this.$message.error("上传图片大小不能超过 4MB!");
-    }
-    return isFormat && isLt4M;
-  },
-
-  handleDownload(file) {
-    // console.log(file);
-  },
-
-  uploadSuccess() {}
-};
-
-// 说明
-
-// file 结构
-// file: {
-//   lastModified: 1595401711625,
-//   lastModifiedDate:'',//返回当前文件的最后修改日期,
-//   name: "WechatIMG71.png",
-//   size: 6164,
-//   type: "image/png",
-//   uid: 1604643922901,
-//   webkitRelativePath: ""
-// }
+export default {
+  // ------------------------------------------------------------------
+  // pragma mark - inti(初始化行为)
+  // ------------------------------------------------------------------
+  createdInit() {},
+  mountedInit() {},
+
+  /**
+   * 图片预览
+   * @param {*} file
+   */
+  handlePictureCardPreview(file) {
+    this.dialogImageUrl = file.url;
+    this.dialogVisible = true;
+  },
+
+  /**
+   * 删除图片
+   * @param {*} file
+   * @param {*} fileList
+   */
+  handleRemove(file, fileList) {
+    this.fileList = fileList;
+  },
+
+  /**
+   * 覆盖默认的上传行为，自定义上传的实现
+   * @param {*} data
+   */
+  httpRequest(data) {
+    const that = this;
+    let fd = new FormData();
+    fd.append("files", data.file); //传文件
+    this.$http
+      .post("api.img.upload", fd, {
+        headers: {
+          "Content-Type": "multipart/form-data"
+        }
+      })
+      .then(function(res) {
+        if (res.code === 0) {
+          that.fileList.push({
+            url: res.data
+          });
+          that.$emit("input", that.fileList);
+        }
+      });
+  },
+
+  /**
+   * 图片上传之前
+   */
+  handleBeforeUpload(file) {
+    console.log(this.limit)
+    const isFormat = /^image\/(jpeg|png|jpg|ico|gif)$/.test(file.type);
+    const isLt4M = file.size / 1024 / 1024 < 4;
+    console.log("file.size", file.size);
+    console.log("isLt4M", isLt4M);
+    if (!isFormat) {
+      this.$message.error("上传图片只能是 JPEG/PNG/JPG/ICO/gif 格式!");
+    }
+    if (!isLt4M) {
+      this.$message.error("上传图片大小不能超过 4MB!");
+    }
+    return isFormat && isLt4M;
+  },
+
+  handleDownload(file) {
+    // console.log(file);
+  },
+
+  uploadSuccess() {}
+};
+
+// 说明
+
+// file 结构
+// file: {
+//   lastModified: 1595401711625,
+//   lastModifiedDate:'',//返回当前文件的最后修改日期,
+//   name: "WechatIMG71.png",
+//   size: 6164,
+//   type: "image/png",
+//   uid: 1604643922901,
+//   webkitRelativePath: ""
+// }