图片裁剪功能

package.json

@@ -27,6 +27,7 @@
     "vant": "^2.0.0",
     "vue": "^2.6.10",
     "vue-awesome-swiper": "^3.1.3",
+    "vue-cropper": "^0.4.9",
     "vue-router": "^3.0.3",
     "vuedraggable": "^2.23.0",
     "vuex": "^3.0.1"

src/views/tempaltes/editMenu.vue

@@ -107,6 +107,20 @@
       @changeSelcetData="changeSelcetData"
       v-if="selectData.show"
     ></selectDataCom>
+    <div class="cropper-container" v-show="VueCropperOption.img">
+      <vueCropper
+        ref="cropper"
+        :img="VueCropperOption.img"
+        :canMove="false"
+        :autoCrop="VueCropperOption.autoCrop"
+        :outputType="VueCropperOption.outputType"
+      ></vueCropper>
+      <img :src="VueCropperOption.preImg" alt />
+      <div class>
+        <van-button @click="VueCropperOption.img = ''">取消</van-button>
+        <van-button @click="saveCropper">保存</van-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -114,6 +128,8 @@
 import { upload } from "@/api/api";
 import { getHostUrl } from "@/utils/index";
 import selectDataCom from "./selectData";
+import { VueCropper } from "vue-cropper";
+
 export default {
   name: "editMenu",
   props: {
@@ -135,7 +151,8 @@ export default {
     }
   },
   components: {
-    selectDataCom
+    selectDataCom,
+    VueCropper
   },
   created() {
     console.log(this.schemaData);
@@ -148,6 +165,12 @@ export default {
       itemKey: "",
       selectData: {
         show: false
+      },
+      VueCropperOption: {
+        img: "",
+        outputType: "png",
+        autoCrop: true,
+        preImg: ""
       }
     };
   },
@@ -182,7 +205,7 @@ export default {
           obj[item] = "";
         });
         this.schemaData[item.dataKey].push(obj);
-        console.log(obj)
+        console.log(obj);
       } else {
         alert("选择类型添加，敬请期待！");
       }
@@ -192,6 +215,16 @@ export default {
       return getHostUrl(this.frameUrl, dataUrl);
     },
     uploadAfter(file) {
+      // console.log(file);
+      // this.VueCropperOption.img = file.content;
+      // setTimeout(() => {
+      //   this.$refs.cropper.getCropData(data => {
+      //     // do something
+      //     this.VueCropperOption.preImg = data;
+      //     console.log(data);
+      //   });
+      // }, 3000);
+
       this.$toast.loading({
         mask: true,
         duration: 0,
@@ -229,6 +262,13 @@ export default {
       arr.splice(index, 1);
       this.$emit("setList", this.schemaData);
     },
+    saveCropper() {
+      this.$refs.cropper.getCropData(data => {
+        // do something
+        this.VueCropperOption.preImg = data;
+        console.log(data);
+      });
+    },
     setSelectData(item, index) {
       const myItem = JSON.parse(JSON.stringify(item));
       this.selectData.show = true;
@@ -256,6 +296,19 @@ export default {
 .menu-container {
   height: calc(100vh - 570px);
   padding: 15px;
+
+  .cropper-container {
+    .vue-cropper {
+      height: 50vh;
+    }
+    overflow: auto;
+    top: 0;
+    left: 0;
+    width: 100%;
+    position: fixed;
+    height: 100%;
+    z-index: 100000;
+  }
   .image {
     height: 50px;
   }