xs-common-plugins 1.2.3 → 1.2.5

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

@@ -1,80 +1,80 @@
-import {
-  uploadImgToBase64
-} from "@/common/uploadImgToBase64";
-
-export default {
-  // ------------------------------------------------------------------
-  // pragma mark - inti(初始化行为)
-  // ------------------------------------------------------------------
-  createdInit() {
-
-  },
-  mountedInit() {},
-
-  // ------------------------------------------------------------------
-  // 基于 element-ui 上传组件的内置事件集合
-  // ------------------------------------------------------------------
-
-  /**
-   * 
-   * @param {当前上传文件的信息} file 
-   * @param {已选中上传文件的列表信息} fileList 
-   * file = {
-   *    status: "ready"
-   *    name: "hl12-@2x.png"
-   *    size: 9891
-   *    percentage: 0
-   *    uid: 1584674864088
-   *    raw:{
-   *        name: "hl12-@2x.png"
-   *        lastModified: 1569395230070
-   *        lastModifiedDate: Wed Sep 25 2019 15:07:10 GMT+0800 (中国标准时间) {}
-   *        webkitRelativePath: ""
-   *        size: 9891
-   *        type: "image/png"
-   *        uid: 1584674864088
-   *    }
-   * }
-   */
-  uploadImageStatusChange(file, fileList) {
-    this.upData(fileList);
-  },
-
-  // 点击已上传图片的列表
-  handlePictureCardPreview(file) {
-    this.dialogImageUrl = file.url;
-    this.dialogVisible = true;
-  },
-
-  handleRemove(file, fileList) {
-    this.upData(fileList);
-  },
-
-  upData(fileList) {
-    this.uploadFileList = fileList;
-    this.submitDialogData(fileList);
-  },
-
-  async submitDialogData() {
-    const imgBroadcastListBase64 = []
-    // 图片转base64开始...
-    const filePromises = this.uploadFileList.map(async file => {
-      const response = await uploadImgToBase64(file.raw)
-      return response.result;
-    })
-    // 按次序输出 base64图片
-    for (const textPromise of filePromises) {
-      imgBroadcastListBase64.push(await textPromise)
-    }
-    this.$emit('selectedImageList', imgBroadcastListBase64)
-  },
-
-  // TODO: 无效代码
-  // ------------------------------------------------------------------
-  // pragma mark - Private Methods(私有方法: ) 
-  // 命名规范: 前缀 __ + name
-  // ------------------------------------------------------------------
-  __demoFunction() {
-
-  }
-}
+import {
+  uploadImgToBase64
+} from "@/common/uploadImgToBase64";
+
+export default {
+  // ------------------------------------------------------------------
+  // pragma mark - inti(初始化行为)
+  // ------------------------------------------------------------------
+  createdInit() {
+
+  },
+  mountedInit() {},
+
+  // ------------------------------------------------------------------
+  // 基于 element-ui 上传组件的内置事件集合
+  // ------------------------------------------------------------------
+
+  /**
+   * 
+   * @param {当前上传文件的信息} file 
+   * @param {已选中上传文件的列表信息} fileList 
+   * file = {
+   *    status: "ready"
+   *    name: "hl12-@2x.png"
+   *    size: 9891
+   *    percentage: 0
+   *    uid: 1584674864088
+   *    raw:{
+   *        name: "hl12-@2x.png"
+   *        lastModified: 1569395230070
+   *        lastModifiedDate: Wed Sep 25 2019 15:07:10 GMT+0800 (中国标准时间) {}
+   *        webkitRelativePath: ""
+   *        size: 9891
+   *        type: "image/png"
+   *        uid: 1584674864088
+   *    }
+   * }
+   */
+  uploadImageStatusChange(file, fileList) {
+    this.upData(fileList);
+  },
+
+  // 点击已上传图片的列表
+  handlePictureCardPreview(file) {
+    this.dialogImageUrl = file.url;
+    this.dialogVisible = true;
+  },
+
+  handleRemove(file, fileList) {
+    this.upData(fileList);
+  },
+
+  upData(fileList) {
+    this.uploadFileList = fileList;
+    this.submitDialogData(fileList);
+  },
+
+  async submitDialogData() {
+    const imgBroadcastListBase64 = []
+    // 图片转base64开始...
+    const filePromises = this.uploadFileList.map(async file => {
+      const response = await uploadImgToBase64(file.raw)
+      return response.result;
+    })
+    // 按次序输出 base64图片
+    for (const textPromise of filePromises) {
+      imgBroadcastListBase64.push(await textPromise)
+    }
+    this.$emit('selectedImageList', imgBroadcastListBase64)
+  },
+
+  // TODO: 无效代码
+  // ------------------------------------------------------------------
+  // pragma mark - Private Methods(私有方法: ) 
+  // 命名规范: 前缀 __ + name
+  // ------------------------------------------------------------------
+  __demoFunction() {
+
+  }
+}

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>