From c961f0cb2df309438d4082f0d2b4aba4419bdf23 Mon Sep 17 00:00:00 2001
From: Mater <bxh8640@gmail.com>
Date: Wed, 29 Dec 2021 11:31:05 +0800
Subject: [PATCH] refactor: remove scss

---
 src/components/photo-mask.vue         | 25 ++++++++++++++-----------
 src/components/selector.vue           |  9 +++++----
 src/components/zoomer.vue             |  9 +++++----
 src/plugins/canvas/canvas-preview.vue |  3 ++-
 src/util/index.js                     | 12 +++++-------
 src/vue-photo-zoom-pro.vue            | 26 +++++++++++++-------------
 6 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/src/components/photo-mask.vue b/src/components/photo-mask.vue
index 30b1941..7cd0961 100644
--- a/src/components/photo-mask.vue
+++ b/src/components/photo-mask.vue
@@ -77,7 +77,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .mask {
   position: absolute;
   top: 0;
@@ -85,7 +85,7 @@ export default {
   right: 0;
   bottom: 0;
   font-size: 0;
-  background-color: rgba(0,0,0,0.4);
+  background-color: rgba(0, 0, 0, 0.4);
   z-index: 1;
 }
 
@@ -93,14 +93,17 @@ export default {
   width: 30%;
   height: 50px;
   background: inherit;
-  &.left {
-    float: left;
-  }
-  &.right {
-    float: right;
-  }
-  &.bottom {
-    clear: both;
-  }
+}
+
+.block.left {
+  float: left;
+}
+
+.block.right {
+  float: right;
+}
+
+.block.bottom {
+  clear: both;
 }
 </style>
diff --git a/src/components/selector.vue b/src/components/selector.vue
index 2a2f8ce..a7923f9 100644
--- a/src/components/selector.vue
+++ b/src/components/selector.vue
@@ -50,7 +50,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .selector {
   position: absolute;
   overflow: hidden;
@@ -58,9 +58,10 @@ export default {
   cursor: crosshair;
   pointer-events: none;
   z-index: 1;
+  background-color: rgba(0, 0, 0, 0.4);
+}
 
-  &.circle {
-    border-radius: 50%;
-  }
+.selector .circle {
+  border-radius: 50%;
 }
 </style>
diff --git a/src/components/zoomer.vue b/src/components/zoomer.vue
index 0d46efb..bd0f72b 100644
--- a/src/components/zoomer.vue
+++ b/src/components/zoomer.vue
@@ -81,11 +81,12 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .zoomer {
   overflow: hidden;
-  .custom-zoomer {
-    transform-origin: left top;
-  }
+}
+
+.zoomer .custom-zoomer {
+  transform-origin: left top;
 }
 </style>
diff --git a/src/plugins/canvas/canvas-preview.vue b/src/plugins/canvas/canvas-preview.vue
index 92b1013..cc774b8 100644
--- a/src/plugins/canvas/canvas-preview.vue
+++ b/src/plugins/canvas/canvas-preview.vue
@@ -41,7 +41,8 @@ export default {
     },
     url: {
       handler (url) {
-        loadImg(url).then((img) => {
+        loadImg(url, (err, img) => {
+          if (err) return console.error(err)
           this.$img = img
           this.handleRotate(this.step)
         })
diff --git a/src/util/index.js b/src/util/index.js
index 10dad9b..150fe69 100644
--- a/src/util/index.js
+++ b/src/util/index.js
@@ -39,13 +39,11 @@ export const getScrollInfo = () => {
  * @param {String} img url
  * @return {Promise}
  */
-export const loadImg = url => {
-  return new Promise((resolve, reject) => {
-    const img = document.createElement('img')
-    img.addEventListener('load', () => resolve(img))
-    img.addEventListener('error', reject)
-    img.src = url
-  })
+export const loadImg = (url, callback) => {
+  const img = document.createElement('img')
+  img.addEventListener('load', () => callback(null, img))
+  img.addEventListener('error', callback)
+  img.src = url
 }
 
 export function rotateCanvas (canvas, img, width, height, step) {
diff --git a/src/vue-photo-zoom-pro.vue b/src/vue-photo-zoom-pro.vue
index 8bc92b9..249271e 100644
--- a/src/vue-photo-zoom-pro.vue
+++ b/src/vue-photo-zoom-pro.vue
@@ -317,22 +317,22 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .vue-photo-zoom-pro {
   font-size: 0;
+}
 
-  .zoom-region {
-    position: relative;
-    display: inline-block;
-  }
+.vue-photo-zoom-pro .zoom-region {
+  position: relative;
+  display: inline-block;
+}
 
-  .out-zoomer {
-    position: absolute;
-    right: -8px;
-    background-repeat: no-repeat;
-    transform: translate(100%, 0);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-  }
+.vue-photo-zoom-pro .out-zoomer {
+  position: absolute;
+  right: -8px;
+  background-repeat: no-repeat;
+  transform: translate(100%, 0);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
 }
 </style>