From 2584dcce1684a17620dd69468d9719bcc70778a4 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 27 May 2019 10:37:00 +0800
Subject: [PATCH 01/26] update github ISSUE_TEMPLATE

---
 .github/ISSUE_TEMPLATE/question.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
index 96be4532..76083546 100755
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.github/ISSUE_TEMPLATE/question.md
@@ -12,3 +12,24 @@ about: Asking questions about use
     Before asking a question, please make sure that you have tried your best to solve this problem.
     If it's a code-related issue, please don't just take screenshots. Please provide an online demo to save each other's time.
 -->
+
+#### Steps to reproduce（问题复现步骤）
+<!--
+1. [xxx]
+2. [xxx]
+3. [xxxx]
+-->
+
+#### Screenshot or Gif（截图或动态图）
+
+
+#### Link to minimal reproduction（最小可在线还原demo）
+
+<!--
+Please only use Codepen, JSFiddle, CodeSandbox or a github repo
+-->
+
+#### Other relevant information（格外信息）
+- Your OS:
+- Node.js version:
+- vue-element-admin version:

From 5b943d71e974a81d1b5fa7c770db65ba8ebb4b1c Mon Sep 17 00:00:00 2001
From: bpzhang <bpzhang@users.noreply.github.com>
Date: Mon, 27 May 2019 15:04:04 +0800
Subject: [PATCH 02/26] chore: add autoprefixer to devDependencies

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index cd1369b8..5ea4a26f 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "@vue/cli-plugin-unit-jest": "3.5.3",
     "@vue/cli-service": "3.5.3",
     "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",

From e28701cde4646f7224c3a8dd1a7999546bf5d20e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Mon, 27 May 2019 15:04:34 +0800
Subject: [PATCH 03/26] perf[Tinymce]: add language option (#2159)

---
 src/components/Tinymce/index.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index a46b37d6..0c6174c4 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -64,7 +64,9 @@ export default {
       fullscreen: false,
       languageTypeList: {
         'en': 'en',
-        'zh': 'zh_CN'
+        'zh': 'zh_CN',
+        'es': 'es_MX',
+        'ja': 'ja'
       }
     }
   },
@@ -114,6 +116,7 @@ export default {
       const _this = this
       window.tinymce.init({
         selector: `#${this.tinymceId}`,
+        language: this.languageTypeList['en'],
         height: this.height,
         body_class: 'panel-body ',
         object_resizing: false,

From f891202706e389e539fd15b24a9480bbb2794907 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Mon, 27 May 2019 15:35:07 +0800
Subject: [PATCH 04/26] fix[Tinymce]: fixed bug when init multiple tinymces at
 the same time (#2152)

---
 src/components/Tinymce/dynamicLoadScript.js | 34 ++++++++++++++++-----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/Tinymce/dynamicLoadScript.js b/src/components/Tinymce/dynamicLoadScript.js
index 46a93290..185f58dc 100644
--- a/src/components/Tinymce/dynamicLoadScript.js
+++ b/src/components/Tinymce/dynamicLoadScript.js
@@ -1,3 +1,11 @@
+let callbacks = []
+
+function loadedTinymce() {
+  // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
+  // check is successfully downloaded script
+  return window.tinymce
+}
+
 const dynamicLoadScript = (src, callback) => {
   const existingScript = document.getElementById(src)
   const cb = callback || function() {}
@@ -7,19 +15,28 @@ const dynamicLoadScript = (src, callback) => {
     script.src = src // src url for the third-party library being loaded.
     script.id = src
     document.body.appendChild(script)
-
+    callbacks.push(cb)
     const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
-    onEnd(script, cb)
+    onEnd(script)
   }
 
-  if (existingScript && cb) cb(null, existingScript)
+  if (existingScript && cb) {
+    if (loadedTinymce()) {
+      cb(null, existingScript)
+    } else {
+      callbacks.push(cb)
+    }
+  }
 
-  function stdOnEnd(script, cb) {
+  function stdOnEnd(script) {
     script.onload = function() {
       // this.onload = null here is necessary
       // because even IE9 works not like others
       this.onerror = this.onload = null
-      cb(null, script)
+      for (const cb of callbacks) {
+        cb(null, script)
+      }
+      callbacks = null
     }
     script.onerror = function() {
       this.onerror = this.onload = null
@@ -27,11 +44,14 @@ const dynamicLoadScript = (src, callback) => {
     }
   }
 
-  function ieOnEnd(script, cb) {
+  function ieOnEnd(script) {
     script.onreadystatechange = function() {
       if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
       this.onreadystatechange = null
-      cb(null, script) // there is no way to catch loading errors in IE8
+      for (const cb of callbacks) {
+        cb(null, script) // there is no way to catch loading errors in IE8
+      }
+      callbacks = null
     }
   }
 }

From e8837d161ee2a4793bdf5add1503d472857f6f42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Mon, 27 May 2019 15:48:45 +0800
Subject: [PATCH 05/26] feat: add tab url demo (#2114)

---
 src/layout/components/AppMain.vue |  2 +-
 src/views/tab/index.vue           | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 9e12c662..a8976380 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -16,7 +16,7 @@ export default {
       return this.$store.state.tagsView.cachedViews
     },
     key() {
-      return this.$route.fullPath
+      return this.$route.path
     }
   }
 }
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
index e5746580..6438a47a 100644
--- a/src/views/tab/index.vue
+++ b/src/views/tab/index.vue
@@ -30,6 +30,18 @@ export default {
       createdTimes: 0
     }
   },
+  watch: {
+    activeName(val) {
+      this.$router.push(`${this.$route.path}?tab=${val}`)
+    }
+  },
+  created() {
+    // init the default  selected tab
+    const tab = this.$route.query.tab
+    if (tab) {
+      this.activeName = tab
+    }
+  },
   methods: {
     showCreatedTimes() {
       this.createdTimes = this.createdTimes + 1

From ac8c12c82d1ceb15d78454fbdc0fc98458393304 Mon Sep 17 00:00:00 2001
From: Serge <gaosj1993@foxmail.com>
Date: Mon, 27 May 2019 16:24:47 +0800
Subject: [PATCH 06/26] perf[request.js]: refine error reject (#2160)

---
 src/utils/request.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/request.js b/src/utils/request.js
index bc346a8c..71d5ea4b 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -48,7 +48,7 @@ service.interceptors.response.use(
     // if the custom code is not 20000, it is judged as an error.
     if (res.code !== 20000) {
       Message({
-        message: res.message || 'error',
+        message: res.message || 'Error',
         type: 'error',
         duration: 5 * 1000
       })
@@ -66,7 +66,7 @@ service.interceptors.response.use(
           })
         })
       }
-      return Promise.reject(res.message || 'error')
+      return Promise.reject(new Error(res.message || 'Error'))
     } else {
       return res
     }

From 054ed40e076dc6fa6e707e7020698643b407b9f2 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 27 May 2019 16:25:37 +0800
Subject: [PATCH 07/26] [release] 4.2.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5ea4a26f..8fbbf88e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-element-admin",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",

From 9538d1b766ab897f0fb3cc38d05be6884be7e6e2 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 28 May 2019 11:09:00 +0800
Subject: [PATCH 08/26] perf: default not set withCredentials

---
 src/utils/request.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/request.js b/src/utils/request.js
index 71d5ea4b..2fb95ac0 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -6,7 +6,7 @@ import { getToken } from '@/utils/auth'
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
-  withCredentials: true, // send cookies when cross-domain requests
+  // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
 })
 

From a0793dbeab6eac29863ad9aef7de77710600bb37 Mon Sep 17 00:00:00 2001
From: MaYuanhai <414199639@qq.com>
Date: Tue, 28 May 2019 15:10:37 +0800
Subject: [PATCH 09/26] fix[ImageCropper]: removeEventListener when
 destroyed(#2169)

---
 src/components/ImageCropper/index.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index c30c5b18..c2688e99 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -839,16 +839,20 @@ export default {
           that.$emit('crop-upload-fail', err, field, ki)
         }
       })
+    },
+    closeHandler(e) {
+      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
+        this.off()
+      }
     }
   },
   created() {
     // 绑定按键esc隐藏此插件事件
-    document.addEventListener('keyup', (e) => {
-      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
-        this.off()
-      }
-    })
-  }
+    document.addEventListener('keyup', this.closeHandler)
+  },
+  destroyed() {
+    document.removeEventListener('keyup', this.closeHandler)
+  },
 }
 </script>
 

From 8e9f2e14799a61a9baf0e346eb8038e57e3e3fcd Mon Sep 17 00:00:00 2001
From: Jessynt <xr5299@gmail.com>
Date: Tue, 28 May 2019 16:18:25 +0800
Subject: [PATCH 10/26] docs: fix typo (#2170)

---
 src/views/example/components/ArticleDetail.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue
index ae090738..ef0f1df9 100644
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -7,7 +7,7 @@
         <PlatformDropdown v-model="postForm.platforms" />
         <SourceUrlDropdown v-model="postForm.source_uri" />
         <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
-          Publush
+          Publish
         </el-button>
         <el-button v-loading="loading" type="warning" @click="draftForm">
           Draft
@@ -36,7 +36,7 @@
                 </el-col>
 
                 <el-col :span="10">
-                  <el-form-item label-width="120px" label="Publush Time:" class="postInfo-container-item">
+                  <el-form-item label-width="120px" label="Publish Time:" class="postInfo-container-item">
                     <el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
                   </el-form-item>
                 </el-col>

From 4bd8f7f670219db02e4c29781788f602c27ffa1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=82=96=E6=95=8F?= <392716797@qq.com>
Date: Sun, 2 Jun 2019 16:08:23 +0800
Subject: [PATCH 11/26] fix: input attribute autocomplete error (#2191)

---
 src/components/MDinput/index.vue | 12 ++++++------
 src/views/login/index.vue        |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/MDinput/index.vue b/src/components/MDinput/index.vue
index 013462fa..c59ea34a 100644
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@@ -9,7 +9,7 @@
         :placeholder="fillPlaceHolder"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :required="required"
         type="email"
         class="material-input"
@@ -24,7 +24,7 @@
         :placeholder="fillPlaceHolder"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :required="required"
         type="url"
         class="material-input"
@@ -40,7 +40,7 @@
         :step="step"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :max="max"
         :min="min"
         :minlength="minlength"
@@ -59,7 +59,7 @@
         :placeholder="fillPlaceHolder"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :max="max"
         :min="min"
         :required="required"
@@ -76,7 +76,7 @@
         :placeholder="fillPlaceHolder"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :required="required"
         type="tel"
         class="material-input"
@@ -91,7 +91,7 @@
         :placeholder="fillPlaceHolder"
         :readonly="readonly"
         :disabled="disabled"
-        :autoComplete="autoComplete"
+        :autocomplete="autoComplete"
         :minlength="minlength"
         :maxlength="maxlength"
         :required="required"
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index d991457c..5fb3f6e3 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
 
       <div class="title-container">
         <h3 class="title">Login Form</h3>
@@ -17,7 +17,7 @@
           name="username"
           type="text"
           tabindex="1"
-          auto-complete="on"
+          autocomplete="on"
         />
       </el-form-item>
 
@@ -34,7 +34,7 @@
             placeholder="Password"
             name="password"
             tabindex="2"
-            auto-complete="on"
+            autocomplete="on"
             @keyup.native="checkCapslock"
             @blur="capsTooltip = false"
             @keyup.enter.native="handleLogin"

From d3a2b6b34ed2f4ba69b78f2d07483747eb6ea7dd Mon Sep 17 00:00:00 2001
From: MaYuanhai <414199639@qq.com>
Date: Thu, 6 Jun 2019 17:46:00 +0800
Subject: [PATCH 12/26] perf[PanThumb]: Replace the image tag with
 background-image to prevent the stretching (#2202)

---
 src/components/PanThumb/index.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index de6940ad..1bcf4170 100644
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -5,7 +5,8 @@
         <slot />
       </div>
     </div>
-    <img :src="image" class="pan-thumb">
+    <!-- eslint-disable-next-line -->
+    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
   </div>
 </template>
 
@@ -52,7 +53,8 @@ export default {
 .pan-thumb {
   width: 100%;
   height: 100%;
-  background-size: 100%;
+  background-position: center center;
+  background-size: cover;
   border-radius: 50%;
   overflow: hidden;
   position: absolute;
@@ -60,7 +62,7 @@ export default {
   transition: all 0.3s ease-in-out;
 }
 
-.pan-thumb:after {
+/* .pan-thumb:after {
   content: '';
   width: 8px;
   height: 8px;
@@ -71,7 +73,7 @@ export default {
   margin: -4px 0 0 -4px;
   background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
   box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
-}
+} */
 
 .pan-info {
   position: absolute;

From 35adfcef3fd251a389ea0884b12eb3545e1d78c5 Mon Sep 17 00:00:00 2001
From: TinaryTree <mbdkhss@gmail.com>
Date: Thu, 27 Jun 2019 23:15:48 +0800
Subject: [PATCH 13/26] docs: fix typo README.zh-CN.md (#2283)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改错别字
---
 README.zh-CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.zh-CN.md b/README.zh-CN.md
index 31bbe351..82b8908c 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -164,7 +164,7 @@ cd vue-element-admin
 # 安装依赖
 npm install
 
-# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
+# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npm.taobao.org
 
 # 启动服务

From ef167ff064373ceff7002ae0f586b8d2730ea4b9 Mon Sep 17 00:00:00 2001
From: MaYuanhai <414199639@qq.com>
Date: Sun, 30 Jun 2019 11:09:19 +0800
Subject: [PATCH 14/26] perf[clipboard.js]: remove redundant code (#2307)

---
 src/utils/clipboard.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js
index e916a44d..cf5b07a1 100644
--- a/src/utils/clipboard.js
+++ b/src/utils/clipboard.js
@@ -22,14 +22,10 @@ export default function handleClipboard(text, event) {
   })
   clipboard.on('success', () => {
     clipboardSuccess()
-    clipboard.off('error')
-    clipboard.off('success')
     clipboard.destroy()
   })
   clipboard.on('error', () => {
     clipboardError()
-    clipboard.off('error')
-    clipboard.off('success')
     clipboard.destroy()
   })
   clipboard.onClick(event)

From 018c20a3f6f695be9de28aa651d2c1cc64c13cee Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Sun, 30 Jun 2019 16:07:54 +0800
Subject: [PATCH 15/26] bump:  update axios for security vulnerability

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8fbbf88e..a57d8c89 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
   },
   "dependencies": {
-    "axios": "0.18.0",
+    "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
     "driver.js": "0.9.5",

From 1909018dbdd57588a480b9d69753cbbd6a78093d Mon Sep 17 00:00:00 2001
From: itsccn <chen.sun@itsccn.com>
Date: Thu, 4 Jul 2019 14:38:31 +0800
Subject: [PATCH 16/26] bump: update @vue/cli-plugin-eslint version (#2327)

FIx  cannot find module '.../node_modules/eslint/lib/api.js/package.json' bug,see https://github.com/vuejs/vue-cli/issues/4231.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a57d8c89..9942fbac 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "@babel/core": "7.0.0",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.5.3",
-    "@vue/cli-plugin-eslint": "3.5.1",
+    "@vue/cli-plugin-eslint": "^3.9.1",
     "@vue/cli-plugin-unit-jest": "3.5.3",
     "@vue/cli-service": "3.5.3",
     "@vue/test-utils": "1.0.0-beta.29",

From c8039a5ce3d065eb7e1972d76cf9c57d487124bb Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 4 Jul 2019 16:41:44 +0800
Subject: [PATCH 17/26] chore: allow dynamic set port

---
 vue.config.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/vue.config.js b/vue.config.js
index 4a5cd438..7b8f3a5d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,10 +7,13 @@ function resolve(dir) {
 }
 
 const name = defaultSettings.title || 'vue Element Admin' // page title
+
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
 // For example, Mac: sudo npm run
-const port = 9527 // dev port
+// You can change the port by the following method:
+// port = 9527 npm run dev OR npm run dev --port = 9527
+const port = process.env.port || process.env.npm_config_port || 9527 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {

From 46cc375d0d91261a7962715dd48e66e10e8c5872 Mon Sep 17 00:00:00 2001
From: why <w.why@163.com>
Date: Tue, 16 Jul 2019 17:12:26 +0800
Subject: [PATCH 18/26] fix[complex-table]: form header sort icon is out of
 sync (#2382)

---
 src/views/table/complex-table.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/views/table/complex-table.vue b/src/views/table/complex-table.vue
index fe266465..3d61f6c6 100644
--- a/src/views/table/complex-table.vue
+++ b/src/views/table/complex-table.vue
@@ -35,7 +35,7 @@
       style="width: 100%;"
       @sort-change="sortChange"
     >
-      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
+      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
@@ -375,6 +375,14 @@ export default {
           return v[j]
         }
       }))
+    },
+    getSortClass: function(key) {
+      const sort = this.listQuery.sort
+      return sort === `+${key}`
+        ? 'ascending'
+        : sort === `-${key}`
+          ? 'descending'
+          : ''
     }
   }
 }

From 12c8d8587345e07bfc084cb2663d0822b9526a38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Tue, 27 Aug 2019 20:57:51 +0800
Subject: [PATCH 19/26] fix: fixed missing icons

---
 src/views/clipboard/index.vue               | 4 ++--
 src/views/components-demo/avatar-upload.vue | 2 +-
 src/views/components-demo/mixin.vue         | 2 +-
 src/views/error-page/401.vue                | 2 +-
 src/views/excel/export-excel.vue            | 2 +-
 src/views/excel/merge-header.vue            | 2 +-
 src/views/excel/select-excel.vue            | 2 +-
 src/views/tab/index.vue                     | 2 +-
 src/views/zip/index.vue                     | 2 +-
 9 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue
index e78c6359..4a6bdd1e 100644
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@@ -3,13 +3,13 @@
     <el-tabs v-model="activeName">
       <el-tab-pane label="use clipboard  directly" name="directly">
         <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">
+        <el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData,$event)">
           copy
         </el-button>
       </el-tab-pane>
       <el-tab-pane label="use clipboard by v-directive" name="v-directive">
         <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">
+        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">
           copy
         </el-button>
       </el-tab-pane>
diff --git a/src/views/components-demo/avatar-upload.vue b/src/views/components-demo/avatar-upload.vue
index 41bb9bc7..5cb20a56 100644
--- a/src/views/components-demo/avatar-upload.vue
+++ b/src/views/components-demo/avatar-upload.vue
@@ -7,7 +7,7 @@
 
     <pan-thumb :image="image" />
 
-    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
+    <el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
       Change Avatar
     </el-button>
 
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index c64a073a..425cf4fb 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -49,7 +49,7 @@
           <div style="height:100px;">
             <el-form :model="demo" :rules="demoRules">
               <el-form-item prop="title">
-                <md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">
+                <md-input v-model="demo.title" icon="el-icon-search" name="title" placeholder="输入标题">
                   标题
                 </md-input>
               </el-form-item>
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
index 032e808f..a52ed23b 100644
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="errPage-container">
-    <el-button icon="arrow-left" class="pan-back-btn" @click="back">
+    <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
       返回
     </el-button>
     <el-row>
diff --git a/src/views/excel/export-excel.vue b/src/views/excel/export-excel.vue
index e9d8c6ab..6152e019 100644
--- a/src/views/excel/export-excel.vue
+++ b/src/views/excel/export-excel.vue
@@ -5,7 +5,7 @@
       <FilenameOption v-model="filename" />
       <AutoWidthOption v-model="autoWidth" />
       <BookTypeOption v-model="bookType" />
-      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">
+      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
         Export Excel
       </el-button>
       <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
diff --git a/src/views/excel/merge-header.vue b/src/views/excel/merge-header.vue
index c145932c..2646b9d0 100644
--- a/src/views/excel/merge-header.vue
+++ b/src/views/excel/merge-header.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
 
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">Export</el-button>
+    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">Export</el-button>
 
     <el-table
       ref="multipleTable"
diff --git a/src/views/excel/select-excel.vue b/src/views/excel/select-excel.vue
index e6ac34ba..05b85fb8 100644
--- a/src/views/excel/select-excel.vue
+++ b/src/views/excel/select-excel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">
+    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">
       Export Selected Items
     </el-button>
     <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
index 6438a47a..862a160f 100644
--- a/src/views/tab/index.vue
+++ b/src/views/tab/index.vue
@@ -36,7 +36,7 @@ export default {
     }
   },
   created() {
-    // init the default  selected tab
+    // init the default selected tab
     const tab = this.$route.query.tab
     if (tab) {
       this.activeName = tab
diff --git a/src/views/zip/index.vue b/src/views/zip/index.vue
index 4406e057..412608f8 100644
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width:300px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">
+    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="el-icon-document" @click="handleDownload">
       Export Zip
     </el-button>
     <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>

From ee287d8314a320a68083496636fa9d3b575b4e13 Mon Sep 17 00:00:00 2001
From: Baskerville* <wszdlm@gmail.com>
Date: Thu, 29 Aug 2019 10:23:45 +0800
Subject: [PATCH 20/26] fix: typos (#2532)

Role Nmae => Role Name
---
 src/views/permission/role.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/permission/role.vue b/src/views/permission/role.vue
index 38e085e5..cd7ecd4c 100644
--- a/src/views/permission/role.vue
+++ b/src/views/permission/role.vue
@@ -228,7 +228,7 @@ export default {
         dangerouslyUseHTMLString: true,
         message: `
             <div>Role Key: ${key}</div>
-            <div>Role Nmae: ${name}</div>
+            <div>Role Name: ${name}</div>
             <div>Description: ${description}</div>
           `,
         type: 'success'

From c7c815eef046230b8554b8f95c45b6083d838dfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Sun, 22 Sep 2019 18:40:28 +0800
Subject: [PATCH 21/26] docs: add awesome-project

---
 README.es.md    | 1 +
 README.ja.md    | 1 +
 README.md       | 1 +
 README.zh-CN.md | 1 +
 4 files changed, 4 insertions(+)

diff --git a/README.es.md b/README.es.md
index 734c51c2..396556f5 100644
--- a/README.es.md
+++ b/README.es.md
@@ -49,6 +49,7 @@ Vue Element Admin es una solución práctica basada en la nueva plataforma de de
 - Plantilla base recomendada para usar: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - Aplicación de Escritorio: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Plantilla de Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Créditos: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
 
 **Después de la versión `v4.1.0+`, la rama por defecto master no tendrá soporte para i18n. Por favor use [i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), los cambios serán incluidos en la rama master**
 
diff --git a/README.ja.md b/README.ja.md
index 7b1232bc..2f43128c 100644
--- a/README.ja.md
+++ b/README.ja.md
@@ -45,6 +45,7 @@
 - おすすめシンプルテンプレート: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - デスクトップバージョン: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
 
 **After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
 
diff --git a/README.md b/README.md
index 3a2b6191..9cd95cc1 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,7 @@ It is a magical vue admin based on the newest development stack of vue, built-in
 - Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
 
 **After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 82b8908c..bbb94a48 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -49,6 +49,7 @@
 - 基础模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Typescript 版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
 
 **`v4.1.0+`版本之后默认 master 分支将不支持国际化，有需要的请使用[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支，它会和 master 保持同步更新**
 

From 1336b92c2ff753c55b65d85b5fc54031f8ffdfc4 Mon Sep 17 00:00:00 2001
From: MaYuanhai <414199639@qq.com>
Date: Thu, 26 Sep 2019 10:34:31 +0800
Subject: [PATCH 22/26] fix[Dashboard]: fixed debounce bug (#2586) (#2597)

To fixed https://github.com/PanJiaChen/vue-element-admin/issues/2586
---
 .../dashboard/admin/components/mixins/resize.js   | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/views/dashboard/admin/components/mixins/resize.js b/src/views/dashboard/admin/components/mixins/resize.js
index bcd17bf0..234953b1 100644
--- a/src/views/dashboard/admin/components/mixins/resize.js
+++ b/src/views/dashboard/admin/components/mixins/resize.js
@@ -3,10 +3,16 @@ import { debounce } from '@/utils'
 export default {
   data() {
     return {
-      $_sidebarElm: null
+      $_sidebarElm: null,
+      $_resizeHandler: null
     }
   },
   mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
     this.$_initResizeEvent()
     this.$_initSidebarResizeEvent()
   },
@@ -27,13 +33,6 @@ export default {
   methods: {
     // use $_ for mixins properties
     // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
-    $_resizeHandler() {
-      return debounce(() => {
-        if (this.chart) {
-          this.chart.resize()
-        }
-      }, 100)()
-    },
     $_initResizeEvent() {
       window.addEventListener('resize', this.$_resizeHandler)
     },

From 4d2d52ef03862546496683f8c6b066f1db01c448 Mon Sep 17 00:00:00 2001
From: Francis <31059354+FrancisSano@users.noreply.github.com>
Date: Fri, 27 Sep 2019 13:45:49 +0800
Subject: [PATCH 23/26] perf: VS Code support webpack alias file jump (#2609)

---
 jsconfig.json | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 jsconfig.json

diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..958df046
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
+{ 
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+        "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
\ No newline at end of file

From 3a08b6e471ec6a7cb22d6c788070306b49272ac6 Mon Sep 17 00:00:00 2001
From: Serge <gaosj1993@foxmail.com>
Date: Mon, 30 Sep 2019 13:14:55 +0800
Subject: [PATCH 24/26] perf: optimize import file-saver way(#2347)

---
 src/vendor/Export2Excel.js | 6 +++---
 src/vendor/Export2Zip.js   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/vendor/Export2Excel.js b/src/vendor/Export2Excel.js
index 20784f3a..d8a2af3d 100644
--- a/src/vendor/Export2Excel.js
+++ b/src/vendor/Export2Excel.js
@@ -1,5 +1,5 @@
 /* eslint-disable */
-require('script-loader!file-saver');
+import { saveAs } from 'file-saver'
 import XLSX from 'xlsx'
 
 function generateArray(table) {
@@ -151,14 +151,14 @@ export function export_json_to_excel({
   filename,
   merges = [],
   autoWidth = true,
-  bookType=  'xlsx'
+  bookType = 'xlsx'
 } = {}) {
   /* original data */
   filename = filename || 'excel-list'
   data = [...data]
   data.unshift(header);
 
-  for (let i = multiHeader.length-1; i > -1; i--) {
+  for (let i = multiHeader.length - 1; i > -1; i--) {
     data.unshift(multiHeader[i])
   }
 
diff --git a/src/vendor/Export2Zip.js b/src/vendor/Export2Zip.js
index f776465e..db70707d 100644
--- a/src/vendor/Export2Zip.js
+++ b/src/vendor/Export2Zip.js
@@ -1,5 +1,5 @@
 /* eslint-disable */
-require('script-loader!file-saver');
+import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
 
 export function export_txt_to_zip(th, jsonData, txtName, zipName) {

From 0e9ce78b8a2f3a60717c76e0163021f5df3862a1 Mon Sep 17 00:00:00 2001
From: MaYuanhai <414199639@qq.com>
Date: Mon, 30 Sep 2019 13:56:56 +0800
Subject: [PATCH 25/26] refactor[ImageCropper]: fix lint error (#2365)

---
 src/components/ImageCropper/index.vue | 1903 +++++++++++++++----------
 1 file changed, 1128 insertions(+), 775 deletions(-)

diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index c2688e99..13ae9a11 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -6,7 +6,14 @@
       </div>
 
       <div v-show="step == 1" class="vicp-step1">
-        <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
+        <div
+          class="vicp-drop-area"
+          @dragleave="preventDefault"
+          @dragover="preventDefault"
+          @dragenter="preventDefault"
+          @click="handleClick"
+          @drop="handleChange"
+        >
           <i v-show="loading != 1" class="vicp-icon1">
             <i class="vicp-icon1-arrow" />
             <i class="vicp-icon1-body" />
@@ -17,7 +24,8 @@
           <input v-show="false" v-if="step == 1" ref="fileinput" type="file" @change="handleChange">
         </div>
         <div v-show="hasError" class="vicp-error">
-          <i class="vicp-icon2" /> {{ errorMsg }}
+          <i class="vicp-icon2" />
+          {{ errorMsg }}
         </div>
         <div class="vicp-operate">
           <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
@@ -55,9 +63,26 @@
             </div>
 
             <div class="vicp-range">
-              <input :value="scale.range" type="range" step="1" min="0" max="100" @input="zoomChange">
-              <i class="vicp-icon5" @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" />
-              <i class="vicp-icon6" @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" />
+              <input
+                :value="scale.range"
+                type="range"
+                step="1"
+                min="0"
+                max="100"
+                @input="zoomChange"
+              >
+              <i
+                class="vicp-icon5"
+                @mousedown="startZoomSub"
+                @mouseout="endZoomSub"
+                @mouseup="endZoomSub"
+              />
+              <i
+                class="vicp-icon6"
+                @mousedown="startZoomAdd"
+                @mouseout="endZoomAdd"
+                @mouseup="endZoomAdd"
+              />
             </div>
 
             <div v-if="!noRotate" class="vicp-rotate">
@@ -91,10 +116,12 @@
             <span v-show="loading === 1" :style="progressStyle" class="vicp-progress" />
           </div>
           <div v-show="hasError" class="vicp-error">
-            <i class="vicp-icon2" /> {{ errorMsg }}
+            <i class="vicp-icon2" />
+            {{ errorMsg }}
           </div>
           <div v-show="loading === 2" class="vicp-success">
-            <i class="vicp-icon3" /> {{ lang.success }}
+            <i class="vicp-icon3" />
+            {{ lang.success }}
           </div>
         </div>
         <div class="vicp-operate">
@@ -108,7 +135,6 @@
 </template>
 
 <script>
-/* eslint-disable */
 'use strict'
 import request from '@/utils/request'
 import language from './utils/language.js'
@@ -120,30 +146,32 @@ export default {
     // 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
     field: {
       type: String,
-      'default': 'avatar'
+      default: 'avatar'
     },
     // 原名key，类似于id，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
     ki: {
-      'default': 0
+      type: Number,
+      default: 0
     },
     // 显示该控件与否
     value: {
-      'default': true
+      type: Boolean,
+      default: true
     },
     // 上传地址
     url: {
       type: String,
-      'default': ''
+      default: ''
     },
     // 其他要上传文件附带的数据，对象格式
     params: {
       type: Object,
-      'default': null
+      default: null
     },
     // Add custom headers
     headers: {
       type: Object,
-      'default': null
+      default: null
     },
     // 剪裁图片的宽
     width: {
@@ -173,48 +201,39 @@ export default {
     // 单文件大小限制
     maxSize: {
       type: Number,
-      'default': 10240
+      default: 10240
     },
     // 语言类型
     langType: {
       type: String,
-      'default': 'zh'
+      default: 'zh'
     },
     // 语言包
     langExt: {
       type: Object,
-      'default': null
+      default: null
     },
     // 图片上传格式
     imgFormat: {
       type: String,
-      'default': 'png'
+      default: 'png'
     },
     // 是否支持跨域
     withCredentials: {
       type: Boolean,
-      'default': false
+      default: false
     }
   },
   data() {
-    const that = this
-    const {
-      imgFormat,
-      langType,
-      langExt,
-      width,
-      height
-    } = that
+    const { imgFormat, langType, langExt, width, height } = this
     let isSupported = true
-    const allowImgFormat = [
-      'jpg',
-      'png'
-    ]
-    const tempImgFormat = allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat
+    const allowImgFormat = ['jpg', 'png']
+    const tempImgFormat =
+      allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat
     const lang = language[langType] ? language[langType] : language['en']
     const mime = mimes[tempImgFormat]
     // 规范图片格式
-    that.imgFormat = tempImgFormat
+    this.imgFormat = tempImgFormat
     if (langExt) {
       Object.assign(lang, langExt)
     }
@@ -258,7 +277,8 @@ export default {
         height: 100
       },
       // 原图容器宽高
-      sourceImgContainer: { // sic
+      sourceImgContainer: {
+        // sic
         width: 240,
         height: 184 // 如果生成图比例与此一致会出现bug，先改成特殊的格式吧，哈哈哈
       },
@@ -286,19 +306,14 @@ export default {
   computed: {
     // 进度条样式
     progressStyle() {
-      const {
-        progress
-      } = this
+      const { progress } = this
       return {
         width: progress + '%'
       }
     },
     // 原图样式
     sourceImgStyle() {
-      const {
-        scale,
-        sourceImgMasking
-      } = this
+      const { scale, sourceImgMasking } = this
       const top = scale.y + sourceImgMasking.y + 'px'
       const left = scale.x + sourceImgMasking.x + 'px'
       return {
@@ -315,12 +330,7 @@ export default {
     },
     // 原图蒙版属性
     sourceImgMasking() {
-      const {
-        width,
-        height,
-        ratio,
-        sourceImgContainer
-      } = this
+      const { width, height, ratio, sourceImgContainer } = this
       const sic = sourceImgContainer
       const sicRatio = sic.width / sic.height // 原图容器宽高比
       let x = 0
@@ -348,26 +358,20 @@ export default {
     },
     // 原图遮罩样式
     sourceImgShadeStyle() {
-      const {
-        sourceImgMasking,
-        sourceImgContainer
-      } = this
+      const { sourceImgMasking, sourceImgContainer } = this
       const sic = sourceImgContainer
       const sim = sourceImgMasking
-      const w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2
-      const h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2
+      const w =
+        sim.width === sic.width ? sim.width : (sic.width - sim.width) / 2
+      const h =
+        sim.height === sic.height ? sim.height : (sic.height - sim.height) / 2
       return {
         width: w + 'px',
         height: h + 'px'
       }
     },
     previewStyle() {
-      const {
-        width,
-        height,
-        ratio,
-        previewContainer
-      } = this
+      const { ratio, previewContainer } = this
       const pc = previewContainer
       let w = pc.width
       let h = pc.height
@@ -386,11 +390,18 @@ export default {
   },
   watch: {
     value(newValue) {
-      if (newValue && this.loading != 1) {
+      if (newValue && this.loading !== 1) {
         this.reset()
       }
     }
   },
+  created() {
+    // 绑定按键esc隐藏此插件事件
+    document.addEventListener('keyup', this.closeHandler)
+  },
+  destroyed() {
+    document.removeEventListener('keyup', this.closeHandler)
+  },
   methods: {
     // 点击波纹效果
     ripple(e) {
@@ -401,7 +412,7 @@ export default {
       setTimeout(() => {
         this.$emit('input', false)
         this.$emit('close')
-        if (this.step == 3 && this.loading == 2) {
+        if (this.step === 3 && this.loading === 2) {
           this.setStep(1)
         }
       }, 200)
@@ -442,70 +453,63 @@ export default {
     /* ---------------------------------------------------------------*/
     // 检测选择的文件是否合适
     checkFile(file) {
-      let that = this,
-        {
-          lang,
-          maxSize
-        } = that
+      const { lang, maxSize } = this
       // 仅限图片
       if (file.type.indexOf('image') === -1) {
-        that.hasError = true
-        that.errorMsg = lang.error.onlyImg
+        this.hasError = true
+        this.errorMsg = lang.error.onlyImg
         return false
       }
       // 超出大小
       if (file.size / 1024 > maxSize) {
-        that.hasError = true
-        that.errorMsg = lang.error.outOfSize + maxSize + 'kb'
+        this.hasError = true
+        this.errorMsg = lang.error.outOfSize + maxSize + 'kb'
         return false
       }
       return true
     },
     // 重置控件
     reset() {
-      const that = this
-      that.loading = 0
-      that.hasError = false
-      that.errorMsg = ''
-      that.progress = 0
+      this.loading = 0
+      this.hasError = false
+      this.errorMsg = ''
+      this.progress = 0
     },
     // 设置图片源
     setSourceImg(file) {
-      let that = this,
-        fr = new FileReader()
-      fr.onload = function(e) {
-        that.sourceImgUrl = fr.result
-        that.startCrop()
+      const fr = new FileReader()
+      fr.onload = e => {
+        this.sourceImgUrl = fr.result
+        this.startCrop()
       }
       fr.readAsDataURL(file)
     },
     // 剪裁前准备工作
     startCrop() {
-      let that = this,
-        {
-          width,
-          height,
-          ratio,
-          scale,
-          sourceImgUrl,
-          sourceImgMasking,
-          lang
-        } = that,
-        sim = sourceImgMasking,
-        img = new Image()
+      const {
+        width,
+        height,
+        ratio,
+        scale,
+        sourceImgUrl,
+        sourceImgMasking,
+        lang
+      } = this
+      const sim = sourceImgMasking
+      const img = new Image()
       img.src = sourceImgUrl
-      img.onload = function() {
-        let nWidth = img.naturalWidth,
-          nHeight = img.naturalHeight,
-          nRatio = nWidth / nHeight,
-          w = sim.width,
-          h = sim.height,
-          x = 0,
-          y = 0
+      img.onload = () => {
+        const nWidth = img.naturalWidth
+        const nHeight = img.naturalHeight
+        const nRatio = nWidth / nHeight
+        let w = sim.width
+        let h = sim.height
+        let x = 0
+        let y = 0
         // 图片像素不达标
         if (nWidth < width || nHeight < height) {
-          that.hasError = true
-          that.errorMsg = lang.error.lowestPx + width + '*' + height
+          this.hasError = true
+          this.errorMsg = lang.error.lowestPx + width + '*' + height
           return false
         }
         if (ratio > nRatio) {
@@ -528,9 +532,9 @@ export default {
         scale.maxHeight = nHeight * sim.scale
         scale.naturalWidth = nWidth
         scale.naturalHeight = nHeight
-        that.sourceImg = img
-        that.createImg()
-        that.setStep(2)
+        this.sourceImg = img
+        this.createImg()
+        this.setStep(2)
       }
     },
     // 鼠标按下图片准备移动
@@ -540,12 +544,9 @@ export default {
       if (this.isSupportTouch && !e.targetTouches) {
         return false
       }
-      let et = e.targetTouches ? e.targetTouches[0] : e,
-        {
-          sourceImgMouseDown,
-          scale
-        } = this,
-        simd = sourceImgMouseDown
+      const et = e.targetTouches ? e.targetTouches[0] : e
+      const { sourceImgMouseDown, scale } = this
+      const simd = sourceImgMouseDown
       simd.mX = et.screenX
       simd.mY = et.screenY
       simd.x = scale.x
@@ -559,25 +560,19 @@ export default {
       if (this.isSupportTouch && !e.targetTouches) {
         return false
       }
-      let et = e.targetTouches ? e.targetTouches[0] : e,
-        {
-          sourceImgMouseDown: {
-            on,
-            mX,
-            mY,
-            x,
-            y
-          },
-          scale,
-          sourceImgMasking
-        } = this,
-        sim = sourceImgMasking,
-        nX = et.screenX,
-        nY = et.screenY,
-        dX = nX - mX,
-        dY = nY - mY,
-        rX = x + dX,
-        rY = y + dY
+      const et = e.targetTouches ? e.targetTouches[0] : e
+      const {
+        sourceImgMouseDown: { on, mX, mY, x, y },
+        scale,
+        sourceImgMasking
+      } = this
+      const sim = sourceImgMasking
+      const nX = et.screenX
+      const nY = et.screenY
+      const dX = nX - mX
+      const dY = nY - mY
+      let rX = x + dX
+      let rY = y + dY
       if (!on) return
       if (rX > 0) {
         rX = 0
@@ -594,17 +589,14 @@ export default {
       scale.x = rX
       scale.y = rY
     },
-     // 按钮按下开始向右旋转
+    // 按钮按下开始向右旋转
     startRotateRight(e) {
-      let that = this,
-        {
-          scale
-        } = that
+      const { scale } = this
       scale.rotateRight = true
-      function rotate() {
+      const rotate = () => {
         if (scale.rotateRight) {
           const degree = ++scale.degree
-          that.createImg(degree)
+          this.createImg(degree)
           setTimeout(function() {
             rotate()
           }, 60)
@@ -612,17 +604,14 @@ export default {
       }
       rotate()
     },
-    // 按钮按下开始向右旋转
+    // 按钮按下开始向左旋转
     startRotateLeft(e) {
-      let that = this,
-        {
-          scale
-        } = that
+      const { scale } = this
       scale.rotateLeft = true
-      function rotate() {
+      const rotate = () => {
         if (scale.rotateLeft) {
           const degree = --scale.degree
-          that.createImg(degree)
+          this.createImg(degree)
           setTimeout(function() {
             rotate()
           }, 60)
@@ -632,23 +621,18 @@ export default {
     },
     // 停止旋转
     endRotate() {
-      const {
-        scale
-      } = this
+      const { scale } = this
       scale.rotateLeft = false
       scale.rotateRight = false
     },
     // 按钮按下开始放大
     startZoomAdd(e) {
-      let that = this,
-        {
-          scale
-        } = that
+      const { scale } = this
       scale.zoomAddOn = true
-      function zoom() {
+      const zoom = () => {
         if (scale.zoomAddOn) {
           const range = scale.range >= 100 ? 100 : ++scale.range
-          that.zoomImg(range)
+          this.zoomImg(range)
           setTimeout(function() {
             zoom()
           }, 60)
@@ -662,15 +646,12 @@ export default {
     },
     // 按钮按下开始缩小
     startZoomSub(e) {
-      let that = this,
-        {
-          scale
-        } = that
+      const { scale } = this
       scale.zoomSubOn = true
-      function zoom() {
+      const zoom = () => {
         if (scale.zoomSubOn) {
           const range = scale.range <= 0 ? 0 : --scale.range
-          that.zoomImg(range)
+          this.zoomImg(range)
           setTimeout(function() {
             zoom()
           }, 60)
@@ -680,9 +661,7 @@ export default {
     },
     // 按钮松开或移开取消缩小
     endZoomSub(e) {
-      const {
-        scale
-      } = this
+      const { scale } = this
       scale.zoomSubOn = false
     },
     zoomChange(e) {
@@ -690,12 +669,7 @@ export default {
     },
     // 缩放原图
     zoomImg(newRange) {
-      const that = this
-      const {
-        sourceImgMasking,
-        sourceImgMouseDown,
-        scale
-      } = this
+      const { sourceImgMasking, scale } = this
       const {
         maxWidth,
         maxHeight,
@@ -704,16 +678,15 @@ export default {
         width,
         height,
         x,
-        y,
-        range
+        y
       } = scale
       const sim = sourceImgMasking
       // 蒙版宽高
       const sWidth = sim.width
       const sHeight = sim.height
       // 新宽高
-      const nWidth = minWidth + (maxWidth - minWidth) * newRange / 100
-      const nHeight = minHeight + (maxHeight - minHeight) * newRange / 100
+      const nWidth = minWidth + ((maxWidth - minWidth) * newRange) / 100
+      const nHeight = minHeight + ((maxHeight - minHeight) * newRange) / 100
       // 新坐标（根据蒙版中心点缩放）
       let nX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x)
       let nY = sHeight / 2 - (nHeight / height) * (sHeight / 2 - y)
@@ -736,54 +709,46 @@ export default {
       scale.width = nWidth
       scale.height = nHeight
       scale.range = newRange
-      setTimeout(function() {
-        if (scale.range == newRange) {
-          that.createImg()
+      setTimeout(() => {
+        if (scale.range === newRange) {
+          this.createImg()
         }
       }, 300)
     },
-     // 生成需求图片
+    // 生成需求图片
     createImg(e) {
-      let that = this,
-        {
-          mime,
-          sourceImg,
-          scale: {
-            x,
-            y,
-            width,
-            height,
-            degree
-          },
-          sourceImgMasking: {
-            scale
-          }
-        } = that,
-        canvas = that.$refs.canvas,
-        ctx = canvas.getContext('2d')
+      const {
+        mime,
+        sourceImg,
+        scale: { x, y, width, height, degree },
+        sourceImgMasking: { scale }
+      } = this
+      const canvas = this.$refs.canvas
+      const ctx = canvas.getContext('2d')
       if (e) {
         // 取消鼠标按下移动状态
-        that.sourceImgMouseDown.on = false
+        this.sourceImgMouseDown.on = false
       }
-      canvas.width = that.width
-      canvas.height = that.height
-      ctx.clearRect(0, 0, that.width, that.height)
+      canvas.width = this.width
+      canvas.height = this.height
+      ctx.clearRect(0, 0, this.width, this.height)
       // 将透明区域设置为白色底边
       ctx.fillStyle = '#fff'
-      ctx.fillRect(0, 0, that.width, that.height)
-      ctx.translate(that.width * 0.5, that.height * 0.5)
-      ctx.rotate(Math.PI * degree / 180)
-      ctx.translate(-that.width * 0.5, -that.height * 0.5)
-      ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale)
-      that.createImgUrl = canvas.toDataURL(mime)
+      ctx.fillRect(0, 0, this.width, this.height)
+      ctx.translate(this.width * 0.5, this.height * 0.5)
+      ctx.rotate((Math.PI * degree) / 180)
+      ctx.translate(-this.width * 0.5, -this.height * 0.5)
+      ctx.drawImage(
+        sourceImg,
+        x / scale,
+        y / scale,
+        width / scale,
+        height / scale
+      )
+      this.createImgUrl = canvas.toDataURL(mime)
     },
     prepareUpload() {
-      const {
-        url,
-        createImgUrl,
-        field,
-        ki
-      } = this
+      const { url, createImgUrl, field, ki } = this
       this.$emit('crop-success', createImgUrl, field, ki)
       if (typeof url === 'string' && url) {
         this.upload()
@@ -793,108 +758,112 @@ export default {
     },
     // 上传图片
     upload() {
-      let that = this,
-        {
-          lang,
-          imgFormat,
-          mime,
-          url,
-          params,
-          headers,
-          field,
-          ki,
-          createImgUrl,
-          withCredentials
-        } = this,
-        fmData = new FormData()
-      fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat)
+      const {
+        lang,
+        imgFormat,
+        mime,
+        url,
+        params,
+        field,
+        ki,
+        createImgUrl
+      } = this
+      const fmData = new FormData()
+      fmData.append(
+        field,
+        data2blob(createImgUrl, mime),
+        field + '.' + imgFormat
+      )
       // 添加其他参数
       if (typeof params === 'object' && params) {
-        Object.keys(params).forEach((k) => {
+        Object.keys(params).forEach(k => {
           fmData.append(k, params[k])
         })
       }
       // 监听进度回调
-      const uploadProgress = function(event) {
-        if (event.lengthComputable) {
-          that.progress = 100 * Math.round(event.loaded) / event.total
-        }
-      }
+      // const uploadProgress = (event) => {
+      //   if (event.lengthComputable) {
+      //     this.progress = 100 * Math.round(event.loaded) / event.total
+      //   }
+      // }
       // 上传文件
-      that.reset()
-      that.loading = 1
-      that.setStep(3)
+      this.reset()
+      this.loading = 1
+      this.setStep(3)
       request({
         url,
         method: 'post',
         data: fmData
-      }).then(resData => {
-        that.loading = 2
-        that.$emit('crop-upload-success', resData.data)
-      }).catch(err => {
-        if (that.value) {
-          that.loading = 3
-          that.hasError = true
-          that.errorMsg = lang.fail
-          that.$emit('crop-upload-fail', err, field, ki)
-        }
       })
+        .then(resData => {
+          this.loading = 2
+          this.$emit('crop-upload-success', resData.data)
+        })
+        .catch(err => {
+          if (this.value) {
+            this.loading = 3
+            this.hasError = true
+            this.errorMsg = lang.fail
+            this.$emit('crop-upload-fail', err, field, ki)
+          }
+        })
     },
     closeHandler(e) {
-      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
+      if (this.value && (e.key === 'Escape' || e.keyCode === 27)) {
         this.off()
       }
     }
-  },
-  created() {
-    // 绑定按键esc隐藏此插件事件
-    document.addEventListener('keyup', this.closeHandler)
-  },
-  destroyed() {
-    document.removeEventListener('keyup', this.closeHandler)
-  },
+  }
 }
 </script>
 
-<!--
-<style lang='sass' src="./scss/upload.scss">
-</style> -->
-
-<style>
+<style lang="scss">
 @charset "UTF-8";
 @-webkit-keyframes vicp_progress {
   0% {
-    background-position-y: 0; }
+    background-position-y: 0;
+  }
   100% {
-    background-position-y: 40px; } }
+    background-position-y: 40px;
+  }
+}
 @keyframes vicp_progress {
   0% {
-    background-position-y: 0; }
+    background-position-y: 0;
+  }
   100% {
-    background-position-y: 40px; } }
+    background-position-y: 40px;
+  }
+}
 @-webkit-keyframes vicp {
   0% {
     opacity: 0;
     -webkit-transform: scale(0) translatey(-60px);
-            transform: scale(0) translatey(-60px); }
+    transform: scale(0) translatey(-60px);
+  }
   100% {
     opacity: 1;
     -webkit-transform: scale(1) translatey(0);
-            transform: scale(1) translatey(0); } }
+    transform: scale(1) translatey(0);
+  }
+}
 @keyframes vicp {
   0% {
     opacity: 0;
     -webkit-transform: scale(0) translatey(-60px);
-            transform: scale(0) translatey(-60px); }
+    transform: scale(0) translatey(-60px);
+  }
   100% {
     opacity: 1;
     -webkit-transform: scale(1) translatey(0);
-            transform: scale(1) translatey(0); } }
+    transform: scale(1) translatey(0);
+  }
+}
 .vue-image-crop-upload {
   position: fixed;
   display: block;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   z-index: 10000;
   top: 0;
   bottom: 0;
@@ -904,501 +873,882 @@ export default {
   height: 100%;
   background-color: rgba(0, 0, 0, 0.65);
   -webkit-tap-highlight-color: transparent;
-  -moz-tap-highlight-color: transparent; }
-  .vue-image-crop-upload .vicp-wrap {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    position: fixed;
-    display: block;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-    z-index: 10000;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    width: 600px;
-    height: 330px;
-    padding: 25px;
-    background-color: #fff;
-    border-radius: 2px;
-    -webkit-animation: vicp 0.12s ease-in;
-            animation: vicp 0.12s ease-in; }
-    .vue-image-crop-upload .vicp-wrap .vicp-close {
-      position: absolute;
-      right: -30px;
-      top: -30px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
-        position: relative;
-        display: block;
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-        -webkit-transition: -webkit-transform 0.18s;
-        transition: -webkit-transform 0.18s;
-        transition: transform 0.18s;
-        transition: transform 0.18s, -webkit-transform 0.18s;
-        -webkit-transform: rotate(0);
-            -ms-transform: rotate(0);
-                transform: rotate(0); }
-        .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
-          -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-                  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-          content: '';
-          position: absolute;
-          top: 12px;
-          left: 4px;
-          width: 20px;
-          height: 3px;
-          -webkit-transform: rotate(45deg);
-              -ms-transform: rotate(45deg);
-                  transform: rotate(45deg);
-          background-color: #fff; }
-        .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
-          -webkit-transform: rotate(-45deg);
-              -ms-transform: rotate(-45deg);
-                  transform: rotate(-45deg); }
-        .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
-          -webkit-transform: rotate(90deg);
-              -ms-transform: rotate(90deg);
-                  transform: rotate(90deg); }
-    .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
-      position: relative;
-      -webkit-box-sizing: border-box;
-              box-sizing: border-box;
-      padding: 35px;
-      height: 170px;
-      background-color: rgba(0, 0, 0, 0.03);
-      text-align: center;
-      border: 1px dashed rgba(0, 0, 0, 0.08);
-      overflow: hidden; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
-        display: block;
-        margin: 0 auto 6px;
-        width: 42px;
-        height: 42px;
-        overflow: hidden; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-arrow {
-          display: block;
-          margin: 0 auto;
-          width: 0;
-          height: 0;
-          border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
-          border-left: 14.7px solid transparent;
-          border-right: 14.7px solid transparent; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-body {
-          display: block;
-          width: 12.6px;
-          height: 14.7px;
-          margin: 0 auto;
-          background-color: rgba(0, 0, 0, 0.3); }
-        .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-bottom {
-          -webkit-box-sizing: border-box;
-                  box-sizing: border-box;
-          display: block;
-          height: 12.6px;
-          border: 6px solid rgba(0, 0, 0, 0.3);
-          border-top: none; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
-        display: block;
-        padding: 15px;
-        font-size: 14px;
-        color: #666;
-        line-height: 30px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-no-supported-hint {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        padding: 30px;
-        width: 100%;
-        height: 60px;
-        line-height: 30px;
-        background-color: #eee;
-        text-align: center;
-        color: #666;
-        font-size: 14px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
-        cursor: pointer;
-        border-color: rgba(0, 0, 0, 0.1);
-        background-color: rgba(0, 0, 0, 0.05); }
-    .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
-      overflow: hidden; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
-        float: left; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container {
-          position: relative;
-          display: block;
-          width: 240px;
-          height: 180px;
-          background-color: #e5e5e0;
-          overflow: hidden; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img {
-            position: absolute;
-            display: block;
-            cursor: move;
-            -webkit-user-select: none;
-               -moz-user-select: none;
-                -ms-user-select: none;
-                    user-select: none; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade {
-            -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-                    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-            position: absolute;
-            background-color: rgba(241, 242, 243, 0.8); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-1 {
-              top: 0;
-              left: 0; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-2 {
-              bottom: 0;
-              right: 0; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate {
-          position: relative;
-          width: 240px;
-          height: 18px; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i {
-            display: block;
-            width: 18px;
-            height: 18px;
-            border-radius: 100%;
-            line-height: 18px;
-            text-align: center;
-            font-size: 12px;
-            font-weight: bold;
-            background-color: rgba(0, 0, 0, 0.08);
-            color: #fff;
-            overflow: hidden; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:hover {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              cursor: pointer;
-              background-color: rgba(0, 0, 0, 0.14); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:first-child {
-              float: left; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:last-child {
-              float: right; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range {
-          position: relative;
-          margin: 30px 0 10px 0;
-          width: 240px;
-          height: 18px; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5,
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
-            position: absolute;
-            top: 0;
-            width: 18px;
-            height: 18px;
-            border-radius: 100%;
-            background-color: rgba(0, 0, 0, 0.08); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5:hover,
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6:hover {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              cursor: pointer;
-              background-color: rgba(0, 0, 0, 0.14); }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5 {
-            left: 0; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5::before {
-              position: absolute;
-              content: '';
-              display: block;
-              left: 3px;
-              top: 8px;
-              width: 12px;
-              height: 2px;
-              background-color: #fff; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
-            right: 0; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::before {
-              position: absolute;
-              content: '';
-              display: block;
-              left: 3px;
-              top: 8px;
-              width: 12px;
-              height: 2px;
-              background-color: #fff; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::after {
-              position: absolute;
-              content: '';
-              display: block;
-              top: 3px;
-              left: 8px;
-              width: 2px;
-              height: 12px;
-              background-color: #fff; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range] {
-            display: block;
-            padding-top: 5px;
-            margin: 0 auto;
-            width: 180px;
-            height: 8px;
-            vertical-align: top;
-            background: transparent;
-            -webkit-appearance: none;
-               -moz-appearance: none;
-                    appearance: none;
-            cursor: pointer;
-            /* 滑块
+  -moz-tap-highlight-color: transparent;
+}
+.vue-image-crop-upload .vicp-wrap {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  position: fixed;
+  display: block;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 10000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 600px;
+  height: 330px;
+  padding: 25px;
+  background-color: #fff;
+  border-radius: 2px;
+  -webkit-animation: vicp 0.12s ease-in;
+  animation: vicp 0.12s ease-in;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close {
+  position: absolute;
+  right: -30px;
+  top: -30px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
+  position: relative;
+  display: block;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  -webkit-transition: -webkit-transform 0.18s;
+  transition: -webkit-transform 0.18s;
+  transition: transform 0.18s;
+  transition: transform 0.18s, -webkit-transform 0.18s;
+  -webkit-transform: rotate(0);
+  -ms-transform: rotate(0);
+  transform: rotate(0);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after,
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: 4px;
+  width: 20px;
+  height: 3px;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  background-color: #fff;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 35px;
+  height: 170px;
+  background-color: rgba(0, 0, 0, 0.03);
+  text-align: center;
+  border: 1px dashed rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
+  display: block;
+  margin: 0 auto 6px;
+  width: 42px;
+  height: 42px;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-icon1
+  .vicp-icon1-arrow {
+  display: block;
+  margin: 0 auto;
+  width: 0;
+  height: 0;
+  border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
+  border-left: 14.7px solid transparent;
+  border-right: 14.7px solid transparent;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-icon1
+  .vicp-icon1-body {
+  display: block;
+  width: 12.6px;
+  height: 14.7px;
+  margin: 0 auto;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-icon1
+  .vicp-icon1-bottom {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  height: 12.6px;
+  border: 6px solid rgba(0, 0, 0, 0.3);
+  border-top: none;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
+  display: block;
+  padding: 15px;
+  font-size: 14px;
+  color: #666;
+  line-height: 30px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-no-supported-hint {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 30px;
+  width: 100%;
+  height: 60px;
+  line-height: 30px;
+  background-color: #eee;
+  text-align: center;
+  color: #666;
+  font-size: 14px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
+  cursor: pointer;
+  border-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
+  overflow: hidden;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
+  float: left;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container {
+  position: relative;
+  display: block;
+  width: 240px;
+  height: 180px;
+  background-color: #e5e5e0;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img {
+  position: absolute;
+  display: block;
+  cursor: move;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img-shade {
+  -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  position: absolute;
+  background-color: rgba(241, 242, 243, 0.8);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img-shade.vicp-img-shade-1 {
+  top: 0;
+  left: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img-shade.vicp-img-shade-2 {
+  bottom: 0;
+  right: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate {
+  position: relative;
+  width: 240px;
+  height: 18px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  line-height: 18px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: bold;
+  background-color: rgba(0, 0, 0, 0.08);
+  color: #fff;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i:hover {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.14);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i:first-child {
+  float: left;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i:last-child {
+  float: right;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range {
+  position: relative;
+  margin: 30px 0 10px 0;
+  width: 240px;
+  height: 18px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5,
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6 {
+  position: absolute;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.08);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5:hover,
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6:hover {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.14);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5 {
+  left: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5::before {
+  position: absolute;
+  content: "";
+  display: block;
+  left: 3px;
+  top: 8px;
+  width: 12px;
+  height: 2px;
+  background-color: #fff;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6 {
+  right: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6::before {
+  position: absolute;
+  content: "";
+  display: block;
+  left: 3px;
+  top: 8px;
+  width: 12px;
+  height: 2px;
+  background-color: #fff;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6::after {
+  position: absolute;
+  content: "";
+  display: block;
+  top: 3px;
+  left: 8px;
+  width: 2px;
+  height: 12px;
+  background-color: #fff;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"] {
+  display: block;
+  padding-top: 5px;
+  margin: 0 auto;
+  width: 180px;
+  height: 8px;
+  vertical-align: top;
+  background: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  /* 滑块
                ---------------------------------------------------------------*/
-            /* 轨道
-               ---------------------------------------------------------------*/ }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
-              outline: none; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
-              -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-                      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              -webkit-appearance: none;
-                      appearance: none;
-              margin-top: -3px;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border-radius: 100%;
-              border: none;
-              -webkit-transition: 0.2s;
-              transition: 0.2s; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-thumb {
-              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              -moz-appearance: none;
-                   appearance: none;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border-radius: 100%;
-              border: none;
-              -webkit-transition: 0.2s;
-              transition: 0.2s; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-thumb {
-              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              appearance: none;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border: none;
-              border-radius: 100%;
-              -webkit-transition: 0.2s;
-              transition: 0.2s; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-moz-range-thumb {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              width: 14px;
-              height: 14px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-ms-thumb {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              width: 14px;
-              height: 14px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-webkit-slider-thumb {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              margin-top: -4px;
-              width: 14px;
-              height: 14px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-runnable-track {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              height: 6px;
-              cursor: pointer;
-              border-radius: 2px;
-              border: none;
-              background-color: rgba(68, 170, 119, 0.3); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-track {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              height: 6px;
-              cursor: pointer;
-              border-radius: 2px;
-              border: none;
-              background-color: rgba(68, 170, 119, 0.3); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-track {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              cursor: pointer;
-              background: transparent;
-              border-color: transparent;
-              color: transparent;
-              height: 6px;
-              border-radius: 2px;
-              border: none; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-lower {
-              background-color: rgba(68, 170, 119, 0.3); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-upper {
-              background-color: rgba(68, 170, 119, 0.15); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-webkit-slider-runnable-track {
-              background-color: rgba(68, 170, 119, 0.5); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-moz-range-track {
-              background-color: rgba(68, 170, 119, 0.5); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-lower {
-              background-color: rgba(68, 170, 119, 0.45); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-upper {
-              background-color: rgba(68, 170, 119, 0.25); }
-      .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
-        float: right; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
-          height: 150px;
-          overflow: hidden; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item {
-            position: relative;
-            padding: 5px;
-            width: 100px;
-            height: 100px;
-            float: left;
-            margin-right: 16px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item span {
-              position: absolute;
-              bottom: -30px;
-              width: 100%;
-              font-size: 14px;
-              color: #bbb;
-              display: block;
-              text-align: center; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item img {
-              position: absolute;
-              display: block;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              margin: auto;
-              padding: 3px;
-              background-color: #fff;
-              border: 1px solid rgba(0, 0, 0, 0.15);
-              overflow: hidden;
-              -webkit-user-select: none;
-                 -moz-user-select: none;
-                  -ms-user-select: none;
-                      user-select: none; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item.vicp-preview-item-circle {
-              margin-right: 0; }
-              .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item.vicp-preview-item-circle img {
-                border-radius: 100%; }
-    .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
-      position: relative;
-      -webkit-box-sizing: border-box;
-              box-sizing: border-box;
-      padding: 35px;
-      height: 170px;
-      background-color: rgba(0, 0, 0, 0.03);
-      text-align: center;
-      border: 1px dashed #ddd; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
-        display: block;
-        padding: 15px;
-        font-size: 16px;
-        color: #999;
-        line-height: 30px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
-        margin-top: 12px;
-        background-color: rgba(0, 0, 0, 0.08);
-        border-radius: 3px; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress {
-          position: relative;
-          display: block;
-          height: 5px;
-          border-radius: 3px;
-          background-color: #4a7;
-          -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-                  box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-          -webkit-transition: width 0.15s linear;
-          transition: width 0.15s linear;
-          background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-          background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-          background-size: 40px 40px;
-          -webkit-animation: vicp_progress 0.5s linear infinite;
-                  animation: vicp_progress 0.5s linear infinite; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress::after {
-            content: '';
-            position: absolute;
-            display: block;
-            top: -3px;
-            right: -3px;
-            width: 9px;
-            height: 9px;
-            border: 1px solid rgba(245, 246, 247, 0.7);
-            -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-                    box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-            border-radius: 100%;
-            background-color: #4a7; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
-        height: 100px;
-        line-height: 100px; }
-    .vue-image-crop-upload .vicp-wrap .vicp-operate {
-      position: absolute;
-      right: 20px;
-      bottom: 20px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-operate a {
-        position: relative;
-        float: left;
-        display: block;
-        margin-left: 10px;
-        width: 100px;
-        height: 36px;
-        line-height: 36px;
-        text-align: center;
-        cursor: pointer;
-        font-size: 14px;
-        color: #4a7;
-        border-radius: 2px;
-        overflow: hidden;
-        -webkit-user-select: none;
-           -moz-user-select: none;
-            -ms-user-select: none;
-                user-select: none; }
-        .vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
-          background-color: rgba(0, 0, 0, 0.03); }
-    .vue-image-crop-upload .vicp-wrap .vicp-error,
-    .vue-image-crop-upload .vicp-wrap .vicp-success {
-      display: block;
-      font-size: 14px;
-      line-height: 24px;
-      height: 24px;
-      color: #d10;
-      text-align: center;
-      vertical-align: top; }
-    .vue-image-crop-upload .vicp-wrap .vicp-success {
-      color: #4a7; }
-    .vue-image-crop-upload .vicp-wrap .vicp-icon3 {
-      position: relative;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      top: 4px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
-        position: absolute;
-        top: 3px;
-        left: 6px;
-        width: 6px;
-        height: 10px;
-        border-width: 0 2px 2px 0;
-        border-color: #4a7;
-        border-style: solid;
-        -webkit-transform: rotate(45deg);
-            -ms-transform: rotate(45deg);
-                transform: rotate(45deg);
-        content: ''; }
-    .vue-image-crop-upload .vicp-wrap .vicp-icon2 {
-      position: relative;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      top: 4px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-icon2::after, .vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
-        content: '';
-        position: absolute;
-        top: 9px;
-        left: 4px;
-        width: 13px;
-        height: 2px;
-        background-color: #d10;
-        -webkit-transform: rotate(45deg);
-            -ms-transform: rotate(45deg);
-                transform: rotate(45deg); }
-      .vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
-        -webkit-transform: rotate(-45deg);
-            -ms-transform: rotate(-45deg);
-                transform: rotate(-45deg); }
+  /* 轨道
+               ---------------------------------------------------------------*/
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus {
+  outline: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-webkit-slider-thumb {
+  -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: -3px;
+  width: 12px;
+  height: 12px;
+  background-color: #61c091;
+  border-radius: 100%;
+  border: none;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-moz-range-thumb {
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  -moz-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background-color: #61c091;
+  border-radius: 100%;
+  border: none;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-thumb {
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background-color: #61c091;
+  border: none;
+  border-radius: 100%;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:active::-moz-range-thumb {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  width: 14px;
+  height: 14px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:active::-ms-thumb {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  width: 14px;
+  height: 14px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:active::-webkit-slider-thumb {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  margin-top: -4px;
+  width: 14px;
+  height: 14px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-webkit-slider-runnable-track {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  width: 100%;
+  height: 6px;
+  cursor: pointer;
+  border-radius: 2px;
+  border: none;
+  background-color: rgba(68, 170, 119, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-moz-range-track {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  width: 100%;
+  height: 6px;
+  cursor: pointer;
+  border-radius: 2px;
+  border: none;
+  background-color: rgba(68, 170, 119, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-track {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  width: 100%;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+  height: 6px;
+  border-radius: 2px;
+  border: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-fill-lower {
+  background-color: rgba(68, 170, 119, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-fill-upper {
+  background-color: rgba(68, 170, 119, 0.15);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-webkit-slider-runnable-track {
+  background-color: rgba(68, 170, 119, 0.5);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-moz-range-track {
+  background-color: rgba(68, 170, 119, 0.5);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-ms-fill-lower {
+  background-color: rgba(68, 170, 119, 0.45);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-ms-fill-upper {
+  background-color: rgba(68, 170, 119, 0.25);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
+  float: right;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview {
+  height: 150px;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item {
+  position: relative;
+  padding: 5px;
+  width: 100px;
+  height: 100px;
+  float: left;
+  margin-right: 16px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item
+  span {
+  position: absolute;
+  bottom: -30px;
+  width: 100%;
+  font-size: 14px;
+  color: #bbb;
+  display: block;
+  text-align: center;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item
+  img {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  padding: 3px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item.vicp-preview-item-circle {
+  margin-right: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item.vicp-preview-item-circle
+  img {
+  border-radius: 100%;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 35px;
+  height: 170px;
+  background-color: rgba(0, 0, 0, 0.03);
+  text-align: center;
+  border: 1px dashed #ddd;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
+  display: block;
+  padding: 15px;
+  font-size: 16px;
+  color: #999;
+  line-height: 30px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
+  margin-top: 12px;
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 3px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step3
+  .vicp-upload
+  .vicp-progress-wrap
+  .vicp-progress {
+  position: relative;
+  display: block;
+  height: 5px;
+  border-radius: 3px;
+  background-color: #4a7;
+  -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
+  box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
+  -webkit-transition: width 0.15s linear;
+  transition: width 0.15s linear;
+  background-image: -webkit-linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 40px 40px;
+  -webkit-animation: vicp_progress 0.5s linear infinite;
+  animation: vicp_progress 0.5s linear infinite;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step3
+  .vicp-upload
+  .vicp-progress-wrap
+  .vicp-progress::after {
+  content: "";
+  position: absolute;
+  display: block;
+  top: -3px;
+  right: -3px;
+  width: 9px;
+  height: 9px;
+  border: 1px solid rgba(245, 246, 247, 0.7);
+  -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
+  box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
+  border-radius: 100%;
+  background-color: #4a7;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
+  height: 100px;
+  line-height: 100px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-operate {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-operate a {
+  position: relative;
+  float: left;
+  display: block;
+  margin-left: 10px;
+  width: 100px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: #4a7;
+  border-radius: 2px;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-error,
+.vue-image-crop-upload .vicp-wrap .vicp-success {
+  display: block;
+  font-size: 14px;
+  line-height: 24px;
+  height: 24px;
+  color: #d10;
+  text-align: center;
+  vertical-align: top;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-success {
+  color: #4a7;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon3 {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  top: 4px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
+  position: absolute;
+  top: 3px;
+  left: 6px;
+  width: 6px;
+  height: 10px;
+  border-width: 0 2px 2px 0;
+  border-color: #4a7;
+  border-style: solid;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  content: "";
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon2 {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  top: 4px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon2::after,
+.vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
+  content: "";
+  position: absolute;
+  top: 9px;
+  left: 4px;
+  width: 13px;
+  height: 2px;
+  background-color: #d10;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
 .e-ripple {
   position: absolute;
   border-radius: 100%;
@@ -1406,20 +1756,23 @@ export default {
   background-clip: padding-box;
   pointer-events: none;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   -webkit-transform: scale(0);
-      -ms-transform: scale(0);
-          transform: scale(0);
-  opacity: 1; }
-  .e-ripple.z-active {
-    opacity: 0;
-    -webkit-transform: scale(2);
-        -ms-transform: scale(2);
-            transform: scale(2);
-    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out; }
+  -ms-transform: scale(0);
+  transform: scale(0);
+  opacity: 1;
+}
+.e-ripple.z-active {
+  opacity: 0;
+  -webkit-transform: scale(2);
+  -ms-transform: scale(2);
+  transform: scale(2);
+  -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, transform 0.6s ease-out,
+    -webkit-transform 0.6s ease-out;
+}
 </style>

From 82350116659c79d51dd0880fc45df00a5c958a45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Mon, 30 Sep 2019 15:06:42 +0800
Subject: [PATCH 26/26] fix: fixed numberFormatter  bug

https://github.com/PanJiaChen/vue-element-admin/issues/2568
---
 src/filters/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/filters/index.js b/src/filters/index.js
index f6a28488..98222339 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -45,7 +45,7 @@ export function numberFormatter(num, digits) {
   ]
   for (let i = 0; i < si.length; i++) {
     if (num >= si[i].value) {
-      return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
+      return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
     }
   }
   return num.toString()