refactor: remove scss

src/components/photo-mask.vue

@@ -77,30 +77,33 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .mask {
   position: absolute;
   top: 0;
   left: 0;
   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;
 }
 
 .block {
   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>

src/components/selector.vue

@@ -50,17 +50,18 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .selector {
   position: absolute;
   overflow: hidden;
   background-repeat: no-repeat;
   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>

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>

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)
         })

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) {

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>