meixioacomponent 0.3.54 → 0.3.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.3.54",
+  "version": "0.3.55",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",
@@ -18,6 +18,7 @@
     "gulp": "^4.0.0",
     "register-service-worker": "^1.7.1",
     "vue": "^2.7.0",
+    "vue-cropper": "^0.5.8",
     "vue-router": "^3.2.0",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.4.0"

package/packages/components/base/baseCropper/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <base-dialog
+    ref="baseDialog"
+    :width="`800px`"
+    :title="`截图`"
+    :hasCloseIcon="true"
+    :destroy="closeCropper"
+    :contentHeight="`400px`"
+  >
+    <div class="base-dialog-wrap" slot="dialog-content">
+      <vueCropper
+        :img="imgUrl"
+        ref="cropper"
+        :autoCrop="true"
+        :class="[croppetShape]"
+        :fixed="fixedOutline"
+        :fixedBox="fixedOutline"
+        :autoCropWidth="cropperOutline[0]"
+        :autoCropHeight="cropperOutline[1]"
+      ></vueCropper>
+    </div>
+    <div slot="dialog-footer" class="dialog-footer">
+      <base-button-handle
+        size="mini"
+        :align="`end`"
+        :config="buttonConfig"
+      ></base-button-handle>
+    </div>
+  </base-dialog>
+</template>
+
+<script>
+import BaseButtonHandle from '../baseButtonHandle/baseButtonHandle.vue'
+export default {
+  data() {
+    return {
+      buttonConfig: [],
+    }
+  },
+  created() {
+    this.buttonConfig = [
+      {
+        text: '取消',
+        type: 'info',
+        click: () => {
+          this.cancel()
+        },
+      },
+      {
+        text: '截图',
+        type: 'primary',
+        click: async () => {
+          this.complated().then((res) => {
+            this.$emit('cropperComplated', res)
+            this.closeCropper()
+          })
+        },
+      },
+    ]
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.baseDialog.showDialog()
+
+      this.$nextTick(() => {
+        this.start()
+      })
+    })
+  },
+  computed: {
+    imgUrl() {
+      return window.URL.createObjectURL(this.img)
+    },
+    fixedOutline() {
+      const { croppetShape } = this.$props
+      if (croppetShape == 'circ') {
+        return true
+      }
+      return false
+    },
+
+    closeCropper() {
+      this.$destroy()
+    },
+  },
+  components: {
+    BaseButtonHandle,
+  },
+  props: {
+    img: {},
+    croppetShape: {
+      type: String,
+      default: 'rect',
+    },
+    cropperOutline: {
+      type: Array,
+      default: () => [100, 100],
+    },
+  },
+  methods: {
+    start() {
+      this.$refs.cropper.startCrop()
+    },
+    cancel() {
+      this.$refs.cropper.stopCrop()
+      this.$refs.cropper.clearCrop()
+    },
+    complated() {
+      return new Promise((resolve, reject) => {
+        this.$refs.cropper.getCropBlob((data) => {
+          resolve(data)
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.base-dialog-wrap {
+  width: 100%;
+  height: 100%;
+
+  .circ {
+    /deep/ .cropper-crop-box {
+      border-radius: 50%;
+      overflow: hidden;
+    }
+  }
+}
+</style>

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

@@ -10,7 +10,7 @@
         type="file"
         ref="inputFile"
         :accept="accept"
-        @change="valueChange"
+        @change="inputFileChange"
         style="display: none;"
         v-if="type == 'upload'"
         :multiple="uploadType == 'single' ? false : true"
@@ -124,6 +124,20 @@ export default {
     fileSize: {
       default: 99,
     },
+    cropper: {
+      type: Boolean,
+      default: false,
+    },
+
+    cropperConfig: {
+      type: Object,
+      default: () => {
+        return {
+          croppetShape: 'rect',
+          cropperOutline: [100, 100],
+        }
+      },
+    },
   },
   computed: {
     module: {
@@ -226,14 +240,36 @@ export default {
       return list
     },
 
-    async valueChange(e) {
+    inputFileChange(e) {
+      const { cropper, isGroup, fileType, uploadType } = this.$props
       let files = e.target.files
+      if (cropper && !isGroup && fileType == 'img' && uploadType == 'single') {
+        this.userCropper(files[0])
+        return
+      } else {
+        this.fileComplated(files)
+      }
+
+      // this.$refs.inputFile.value = ''
+    },
+
+    async fileComplated(files) {
       let list = await this.returnFiles(files)
       if (list.length > 0) {
         this.emitEvent(list)
       }
+    },
 
-      this.$refs.inputFile.value = ''
+    userCropper(file) {
+      const { cropperConfig } = this.$props
+      const module = require('../../../config/use/useCropper').default
+      module.startCropper({
+        img: file,
+        config: cropperConfig,
+        complatedCb: (res) => {
+          this.fileComplated(res)
+        },
+      })
     },
 
     emitEvent(list) {

package/packages/components/base/baseUpload/mixins.js

@@ -1,32 +1,28 @@
-import componentConfig from "../../../config/componentConfig";
-import useUpload from "../../../config/use/UseUpload";
+import componentConfig from '../../../config/componentConfig'
+import useUpload from '../../../config/use/UseUpload'
 export const baseUploadMixins = {
   data() {
     return {
       dynamicmount: null,
-    };
+    }
   },
-  created() {
-  },
-  mounted() {
-
-  },
-  beforeDestroy() { },
+  created() {},
+  mounted() {},
+  beforeDestroy() {},
 
   props: {
     uploadPath: {
       default: () => {
-        return [0, 1];
+        return [0, 1]
       },
     },
-
   },
   computed: {
     isMax() {
       if (this.module.length >= this.$props.max) {
-        return true;
+        return true
       }
-      return false;
+      return false
     },
   },
 
@@ -35,33 +31,30 @@ export const baseUploadMixins = {
       if (this.module) {
         for (let i = 0; i < list.length; i++) {
           if (this.isMax) {
-            this.$message.error("超出文件上传限制");
-            break;
+            this.$message.error('超出文件上传限制')
+            break
           }
-          list[i].cb = this.uploadEd;
-          this.module.push(list[i]);
+          list[i].cb = this.uploadEd
+          this.module.push(list[i])
         }
       }
-      const { uploadPath } = this.$props;
+      const { uploadPath } = this.$props
 
-      componentConfig.setUploadUrl(uploadPath[0], uploadPath[1]);
+      componentConfig.setUploadUrl(uploadPath[0], uploadPath[1])
 
       if (!this.uploadLoading) {
-        useUpload.toUpload(
-          this.module ? this.module : list,
-          this.isGroup ? this.uploadEd : null
-        );
+        useUpload.toUpload(this.module ? this.module : list, this.uploadEd)
       }
 
-      this.uploadLoading = true;
+      this.uploadLoading = true
     },
 
     uploadEd(list) {
       if (!this.isGroup) {
-        this.module = list;
+        this.module = list
       }
-      this.uploadLoading = false;
-      this.$emit("uploadEd", list);
+      this.uploadLoading = false
+      this.$emit('uploadEd', list)
     },
   },
-};
+}

package/packages/components/index.js

@@ -1,50 +1,51 @@
-import baseAnchor from "./base/baseAnchor";
-import baseAppendix from "./base/baseAppendix";
-import baseArea from "./base/baseArea";
-import baseAvatar from "./base/baseAvatar";
-import baseButtonHandle from "./base/baseButtonHandle";
-import baseDefaultSvg from "./base/baseDefaultSvg";
-import baseDialog from "./base/baseDialog";
-import baseDialogTable from "./base/baseDialogTable";
-import baseDrawer from "./base/baseDrawer";
-import baseEdito from "./base/baseEdito";
-import baseFixedHeader from "./base/baseFixedHeader";
-import baseIcon from "./base/baseIcon";
-import baseImageViewer from "./base/baseImageViewer";
-import baseImg from "./base/baseImg";
-import baseInforWrap from "./base/baseInforWrap";
-import baseLineInfoGroup from "./base/baseLineInfoGroup";
-import baseLineInfoItem from "./base/baseLineInfoItem";
-import basePageHeader from "./base/basePageHeader";
-import basePagination from "./base/basePagination";
-import basePlainTable from "./base/basePlainTable";
-import baseSection from "./base/baseSection";
-import baseSkeleton from "./base/baseSkeleton";
-import baseSvg from "./base/baseSvg";
-import baseTimeTypeSelect from "./base/baseTimeTypeSelect";
-import baseToggle from "./base/baseToggle";
-import baseUploadItem from "./base/baseUpload/baseUploadItem";
-import baseUpload from "./base/baseUpload/baseUpload";
-import upload from "./base/upload";
-import baseDialogForm from "./proForm/dialogForm/dialogFormIndex";
-import baseForm from "./proForm/proForm/index";
-import baseFormWrap from "./proForm/proFormWrap/index";
-import baseProTable from "./proPageTable/index";
-import baseMoverVerifiBar from "./base/baseMoverVerifiBar";
-import baseTimeLine from "./base/baseTimeLine";
-import basePopoverButton from "./base/basePopoverButton";
-import baseTreeSelect from "./base/baseTreeSelect";
+import baseAnchor from './base/baseAnchor'
+import baseAppendix from './base/baseAppendix'
+import baseArea from './base/baseArea'
+import baseAvatar from './base/baseAvatar'
+import baseButtonHandle from './base/baseButtonHandle'
+import baseDefaultSvg from './base/baseDefaultSvg'
+import baseDialog from './base/baseDialog'
+import baseDialogTable from './base/baseDialogTable'
+import baseDrawer from './base/baseDrawer'
+import baseEdito from './base/baseEdito'
+import baseFixedHeader from './base/baseFixedHeader'
+import baseIcon from './base/baseIcon'
+import baseImageViewer from './base/baseImageViewer'
+import baseImg from './base/baseImg'
+import baseInforWrap from './base/baseInforWrap'
+import baseLineInfoGroup from './base/baseLineInfoGroup'
+import baseLineInfoItem from './base/baseLineInfoItem'
+import basePageHeader from './base/basePageHeader'
+import basePagination from './base/basePagination'
+import basePlainTable from './base/basePlainTable'
+import baseSection from './base/baseSection'
+import baseSkeleton from './base/baseSkeleton'
+import baseSvg from './base/baseSvg'
+import baseTimeTypeSelect from './base/baseTimeTypeSelect'
+import baseToggle from './base/baseToggle'
+import baseUploadItem from './base/baseUpload/baseUploadItem'
+import baseUpload from './base/baseUpload/baseUpload'
+import upload from './base/upload'
+import baseDialogForm from './proForm/dialogForm/dialogFormIndex'
+import baseForm from './proForm/proForm/index'
+import baseFormWrap from './proForm/proFormWrap/index'
+import baseProTable from './proPageTable/index'
+import baseMoverVerifiBar from './base/baseMoverVerifiBar'
+import baseTimeLine from './base/baseTimeLine'
+import basePopoverButton from './base/basePopoverButton'
+import baseTreeSelect from './base/baseTreeSelect'
+import VueCropper from 'vue-cropper'
 // js 文件相关
-import Theme from "../config/theme/theme";
-import DynamicMount from "./dynamicmount/index.js";
-import componentConfig from "../config/componentConfig";
-import DynamicMountClass from "./dynamicmount/DynamicMount";
-import SelectStore from "../config/selectStore/SelectStore";
+import Theme from '../config/theme/theme'
+import DynamicMount from './dynamicmount/index.js'
+import componentConfig from '../config/componentConfig'
+import DynamicMountClass from './dynamicmount/DynamicMount'
+import SelectStore from '../config/selectStore/SelectStore'
 //
-import useImg from "../config/use/UseImg";
-import UseDrag from "../config/use/useDrag";
-import useUpload from "../config/use/UseUpload";
-import useFixedHeader from "../config/use/useFixedHeader";
+import useImg from '../config/use/UseImg'
+import UseDrag from '../config/use/useDrag'
+import useUpload from '../config/use/UseUpload'
+import useFixedHeader from '../config/use/useFixedHeader'
 
 const meixicomponents = [
   baseAnchor,
@@ -82,18 +83,19 @@ const meixicomponents = [
   baseMoverVerifiBar,
   baseTimeLine,
   basePopoverButton,
-  baseTreeSelect
-];
+  baseTreeSelect,
+]
 
 const install = (Vue) => {
   meixicomponents.forEach((component) => {
-    Vue.component(component.name, component);
-  });
-  Vue.use(DynamicMount);
-};
+    Vue.component(component.name, component)
+  })
+  Vue.use(DynamicMount)
+  Vue.use(VueCropper);
+}
 
-if (typeof window !== "undefined" && window.Vue) {
-  install(window.Vue);
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
 }
 
 export default {
@@ -143,4 +145,4 @@ export default {
   useUpload,
   useFixedHeader,
   DynamicMountClass,
-};
+}

package/packages/config/use/useCropper.js

@@ -0,0 +1,51 @@
+import baseCropper from '../../components/base/baseCropper/index.vue'
+import DynamicMount from '../../components/dynamicmount/DynamicMount'
+class UseCropper {
+  constructor() {
+    this.complatedCb = null
+    this.component = null
+  }
+  startCropper(params) {
+    this.complatedCb = params.complatedCb || null
+    const config = {
+      img: params.img,
+      croppetShape: params.config.croppetShape,
+      cropperOutline: params.config.cropperOutline,
+    }
+    this.next(config)
+  }
+  next(config) {
+    this.component = new DynamicMount({
+      componentProps: config,
+      vueComponent: baseCropper,
+    })
+
+    this.component.on('mounted', (component) => {
+      component.$on('cropperComplated', (res) => {
+        this.cropperComplated(res)
+      })
+    })
+
+    this.component.on('destroy', () => {
+      this.component = null
+      this.complatedCb = null
+    })
+
+    this.component.init()
+  }
+  cropperComplated = (res) => {
+    if (this.complatedCb) {
+      const time = Date.now()
+      this.complatedCb([
+        new File([res], `cropper-${time}`, {
+          type: res.type,
+          lastModified: time,
+        }),
+      ])
+    }
+  }
+}
+
+const useCropper = new UseCropper()
+
+export default useCropper

package/src/App.vue

@@ -1,13 +1,15 @@
 <template>
   <div id="app">
     <div style="height: 100vh;">
-      <test></test>
-      <!-- <base-upload v-model="test"></base-upload>
+      <!-- <test></test> -->
 
-      <base-popover-button
-        :buttonIcon="`meixicomponenticon-diqu`"
-        v-model="flag"
-      ></base-popover-button> -->
+      <!-- <base-upload-item
+        :fileType="`img`"
+        :cropper="true"
+        @uploadEd="uploadEd"
+        ref="baseUploadItem"
+      ></base-upload-item> -->
+      <base-upload v-model="test"></base-upload>
     </div>
   </div>
 </template>
@@ -18,8 +20,9 @@ import test from './component/test.vue'
 import BaseArea from '../packages/components/base/baseArea/baseArea.vue'
 import BaseTimeLine from '../packages/components/base/baseTimeLine/baseTimeLine.vue'
 import BaseUpload from '../packages/components/base/baseUpload/baseUpload.vue'
+import BaseUploadItem from '../packages/components/base/baseUpload/baseUploadItem.vue'
 export default {
-  components: { test, BaseArea, BaseTimeLine, BaseUpload },
+  components: { test, BaseArea, BaseTimeLine, BaseUpload, BaseUploadItem },
   data() {
     return {
       test: [],
@@ -54,8 +57,16 @@ export default {
       ],
     }
   },
-  mounted() {},
-  methods: {},
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.baseUploadItem.clickFile()
+    })
+  },
+  methods: {
+    uploadEd(res) {
+      console.log(res)
+    },
+  },
 }
 </script>