commit

package-lock.json

@@ -3781,9 +3781,9 @@
       }
     },
     "cropperjs": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.3.5.tgz",
-      "integrity": "sha512-tL3iQJ0rqGDp5Tdb83NVaudV7wKFu2IcLQVF48uty3zfz0vhLS9ifZHbR16L1DRVKtPvAZn1NvTRNuxliTdi5Q=="
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.2.2.tgz",
+      "integrity": "sha512-E+QGUV9zqtV5t7Q/zQD/9vMc2eTJn5hm4MpmHAf12U9LXT815Hy2DSmj0B4a3Gacm7/OJ1MUDTomKGXJBP0osw=="
     },
     "cross-spawn": {
       "version": "5.1.0",
@@ -14279,11 +14279,6 @@
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
       "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
     },
-    "tinymce": {
-      "version": "4.7.13",
-      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-4.7.13.tgz",
-      "integrity": "sha512-6QbNYGV4VExH+p7+o/5km6jOnVSD5mO7aw0s+eKByKnpyG8gZfajxXPhwBM57r7SIravrCI6LFj8DARNe31qPw=="
-    },
     "tmp": {
       "version": "0.0.31",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz",

package.json

@@ -15,7 +15,7 @@
     "clipboard": "^2.0.0",
     "codemirror": "^5.38.0",
     "countup": "^1.8.2",
-    "cropperjs": "^1.3.5",
+    "cropperjs": "^1.2.2",
     "echarts": "^4.0.4",
     "html2canvas": "^1.0.0-alpha.12",
     "iview": "^2.14.1",
@@ -23,7 +23,6 @@
     "js-cookie": "^2.2.0",
     "simplemde": "^1.11.2",
     "sortablejs": "^1.7.0",
-    "tinymce": "^4.7.11",
     "vue": "^2.5.10",
     "vue-i18n": "^7.8.0",
     "vue-router": "^3.0.1",

src/components/img-cropper/img-cropper.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="cropper-wrapper">
+    <img ref="cropperImg" :src="src" alt="">
+  </div>
+</template>
+
+<script>
+import Cropper from 'cropperjs/dist/cropper.esm.js'
+import 'cropperjs/dist/cropper.min.css'
+export default {
+  name: 'ImgCropper',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    },
+    dragMode: {
+      type: String,
+      default: 'move'
+    },
+    previewId: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      cropper: null
+    }
+  },
+  mounted () {
+    this.cropper = new Cropper(this.$refs.cropperImg, {
+      aspectRatio: 16 / 9,
+      dragMode: this.dragMode,
+      preview: this.previewId,
+      restore: false,
+      center: false,
+      highlight: false,
+      cropBoxMovable: false,
+      toggleDragModeOnDblclick: false
+    })
+  }
+}
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/components/img-cropper/index.js

@@ -0,0 +1,2 @@
+import ImgCropper from './img-cropper'
+export default ImgCropper

src/components/img-cropper/index.less

@@ -0,0 +1,9 @@
+.cropper-wrapper{
+  box-sizing: border-box;
+  border: 1px solid #c3c3c3;
+  width: 100%;
+  height: 100%;
+  img{
+      max-height: 100%;
+  }
+}

src/router/routers.js

@@ -86,6 +86,15 @@ export default [
         },
         component: () => import('@/view/components/editor/editor.vue')
       },
+      {
+        path: 'img_cropper_page',
+        name: 'img_cropper_page',
+        meta: {
+          icon: 'crop',
+          title: '图片编辑器'
+        },
+        component: () => import('@/view/components/img-cropper/img-cropper.vue')
+      },
       {
         path: 'icons_page',
         name: 'icons_page',

src/view/components/img-cropper/img-cropper.vue

@@ -0,0 +1,41 @@
+<template>
+  <Row :gutter="20">
+    <i-col span="12">
+      <div class="img-cropper-page">
+        <img-cropper :src="imgSrc" preview-id="preview_con"/>
+      </div>
+    </i-col>
+    <i-col span="12">
+      <div class="preview-con" id="preview_con"></div>
+    </i-col>
+  </Row>
+</template>
+
+<script>
+import ImgCropper from '_c/img-cropper'
+import img from '@/assets/images/talkingdata.png'
+export default {
+  name: 'img_cropper_page',
+  components: {
+    ImgCropper
+  },
+  data () {
+    return {
+      imgSrc: ''
+    }
+  },
+  mounted () {
+    this.imgSrc = img
+  }
+}
+</script>
+
+<style lang="less">
+.img-cropper-page{
+  height: 400px;
+}
+.preview-con{
+  height: 400px;
+  border: 1px solid #c3c3c3;
+}
+</style>

tests/e2e/plugins/index.js

@@ -5,5 +5,5 @@ module.exports = (on, config) => Object.assign({}, config, {
   integrationFolder: 'tests/e2e/specs',
   screenshotsFolder: 'tests/e2e/screenshots',
   videosFolder: 'tests/e2e/videos',
-  supportFile: 'tests/e2e/support/index.js',
-});
+  supportFile: 'tests/e2e/support/index.js'
+})

tests/e2e/specs/test.js

@@ -2,7 +2,7 @@
 
 describe('My First Test', () => {
   it('Visits the app root url', () => {
-    cy.visit('/');
-    cy.contains('h1', 'Welcome to Your Vue.js App');
-  });
-});
+    cy.visit('/')
+    cy.contains('h1', 'Welcome to Your Vue.js App')
+  })
+})

tests/e2e/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands';
+import './commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

tests/unit/HelloWorld.spec.js

@@ -1,13 +1,13 @@
-import { expect } from 'chai';
-import { shallow } from '@vue/test-utils';
-import HelloWorld from '@/components/HelloWorld.vue';
+import { expect } from 'chai'
+import { shallow } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
 
 describe('HelloWorld.vue', () => {
   it('renders props.msg when passed', () => {
-    const msg = 'new message';
+    const msg = 'new message'
     const wrapper = shallow(HelloWorld, {
-      propsData: { msg },
-    });
-    expect(wrapper.text()).to.include(msg);
-  });
-});
+      propsData: { msg }
+    })
+    expect(wrapper.text()).to.include(msg)
+  })
+})