diff --git a/src/App.vue b/src/App.vue
index f34af7e..7510326 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 .app
   page-intro
   image-search(
+    :isTouch="isTouch"
     :items="items"
   )
   page-footer
@@ -14,6 +15,11 @@ import PageFooter from './components/PageFooter.vue'
 
 export default {
   name: 'App',
+
+  data(){
+    const isTouch = window.matchMedia("(pointer: coarse)").matches;
+    return {isTouch};
+  },
   
   props: {
     items: Array,
diff --git a/src/components/ImageSearch.vue b/src/components/ImageSearch.vue
index 82db9c1..aa8798a 100644
--- a/src/components/ImageSearch.vue
+++ b/src/components/ImageSearch.vue
@@ -35,68 +35,33 @@ main.image-search
 
         vue-photo-zoom-pro(
             :disabled="false"
-            :high-url="imageFile"
             type="circle"
+            :outZoomer="isTouch"
             :scale="1.5"
             ref="photoZoom"
             :activeItem="activeItem"
             :isSelected="isSelected"
             @found="found"
         )
-            svg(
-                viewBox="0 0 1567 2475"
-                xmlns="http://www.w3.org/2000/svg"
-                ref="svg"
-            )
-                symbol(
-                    id="check"
-                    viewBox="0 0 24 24"
-                )
-                    path(
-                        d="M0 0h24v24H0V0z" fill="none"
-                    )
-                    path(
-                        d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm-2 13l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"
-                    )
-                    path(
-                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z" fill="#ffffff"
-                    )
-
-                image(
-                    :href="imageFile"
-                    width="1567"
-                    height="2475"
-                )
-
-                template(
-                    v-for="item in items"
-                )
-                    polygon(
-                        ref="polygons"
-                        v-bind="polygonAttrs(item)"
-                        @mouseenter="highlight(item);"
-                        @mouseleave="unhighlight(item)"
-                    )
 
-                    use.checkmark(
-                        v-if="item.found"
-                        v-bind="checkboxAttrs(item)"
-                        href="#check"
-                        fill="#629f37"
-                        width="40"
-                        height="40"
-                        transform="translate(-20 -50)"
-                    )
+            image-svg.preview(
+                :items="items"
+                :imageFile="imageFile"
+                @enter="enter"
+                @leave="leave"
+            )
 </template>
 
 <script>
 import confetti from 'canvas-confetti';
 import VuePhotoZoomPro from './VuePhotoZoomPro/VuePhotoZoomPro.vue';
+import ImageSvg from './ImageSvg.vue';
 const dingUrl = require("../assets/335908__littlerainyseasons__correct.mp3");
 const finishUrl = require("../assets/171671__leszek-szary__success-1.wav");
 export default {
     components: {
-        VuePhotoZoomPro
+        VuePhotoZoomPro,
+        ImageSvg
     },
     data(){
         const ding = new Audio(dingUrl);
@@ -121,7 +86,11 @@ export default {
         }
     },
     props: {
-        items: Array
+        items: Array,
+        isTouch: {
+            type: Boolean,
+            default: false
+        }
     },
     computed: {
 
@@ -163,71 +132,16 @@ export default {
         }
     },
     methods: {
-        polygonAttrs(item){
-            
-            const div = document.createElement('div');
-            div.innerHTML = item.image_map;
-            const area = div.querySelector('area');
-            if( !area || !area.hasAttributes() ){
-                return {};
-            }
-            const points = area.getAttribute('coords');
-            return {points};
-        },
-        areaAttrs(item){
-            const div = document.createElement('div');
-            div.innerHTML = item.image_map;
-            const area = div.querySelector('area');
-            if( !area || !area.hasAttributes() ){
-                return {};
-            }
-            const a = area.attributes;
-            const attrs = {};
-            for(let i=0; i<a.length; i++){
-                attrs[a.name] = a.value;
-            }
-            return attrs;
-        },
-        checkboxAttrs(item){
-            if( !item.checkboxPosition ){
-                const coords = this.getCoords(item);
-                let xys = coords.split(',');
-                let xmin, xmax, ymin, ymax;
-                xys.forEach( (v,i) => {
-                    if( i%2 == 0 ){
-                        xmin = xmin ? Math.min(xmin, v) : v;
-                        xmax = xmax ? Math.max(xmax, v) : v;
-                    }
-                    else{
-                        ymin = ymin ? Math.min(ymin, v) : v;
-                        ymax = ymax ? Math.max(ymax, v) : v;
-                    }
-                });
-                let x = xmin + (xmax-xmin) / 2;
-                let y = ymin + (ymax-ymin) / 2;
-                return {x,y};
-            }
-        },
-        getCoords(item){
-            const div = document.createElement('div');
-            div.innerHTML = item.image_map;
-            const area = div.querySelector('area');
-            if( !area || !area.hasAttributes() ){
-                return {};
-            }
-            const coordinates = area.getAttribute('coords');
-            return coordinates;
-        },
         select(item){
             item.found = true;
         },
         isSelected(item){
             return this.selected.includes(item);
         },
-        highlight(item){
+        enter(item){
             this.activeItem = item;
         },
-        unhighlight(){
+        leave(){
             this.activeItem = null;
         },
         found(item){
@@ -339,22 +253,13 @@ export default {
         display: block;
         z-index: 1;
     }
-    svg {
+    .preview {
         position: relative;
         max-width: 100%;
         width: 100%;
         height: auto;
         display: block;
         z-index: 1;
-        polygon {
-            // fill: rgba(#f00, 0.4);
-            fill: transparent;
-            cursor: pointer;
-            // stroke-width: 0.15%;
-        }
-        .checkmark {
-            filter: drop-shadow(0 0 10px #629f37);
-        }
     }
 }
 .image-items {
diff --git a/src/components/ImageSvg.vue b/src/components/ImageSvg.vue
new file mode 100644
index 0000000..fd07cef
--- /dev/null
+++ b/src/components/ImageSvg.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+svg(
+    viewBox="0 0 1567 2475"
+    xmlns="http://www.w3.org/2000/svg"
+    ref="svg"
+)
+    symbol(
+        id="check"
+        viewBox="0 0 24 24"
+    )
+        path(
+            d="M0 0h24v24H0V0z" fill="none"
+        )
+        path(
+            d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm-2 13l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"
+        )
+        path(
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z" fill="#ffffff"
+        )
+
+    image(
+        :href="imageFile"
+        width="1567"
+        height="2475"
+    )
+
+    template(
+        v-for="item in items"
+    )
+        polygon(
+            ref="polygons"
+            v-bind="polygonAttrs(item)"
+            @mouseenter="$emit('enter', item)"
+            @mouseleave="$emit('leave', item)"
+        )
+
+        use.checkmark(
+            v-if="item.found"
+            v-bind="checkboxAttrs(item)"
+            href="#check"
+            fill="#629f37"
+            width="40"
+            height="40"
+            transform="translate(-20 -50)"
+        )
+</template>
+
+<script>
+export default {
+    props: {
+        imageFile: {
+            type: String,
+            default: ''
+        },
+        items: {
+            type: Array,
+            default: ()=>[]
+        }
+    },
+    methods: {
+        polygonAttrs(item){
+            
+            const div = document.createElement('div');
+            div.innerHTML = item.image_map;
+            const area = div.querySelector('area');
+            if( !area || !area.hasAttributes() ){
+                return {};
+            }
+            const points = area.getAttribute('coords');
+            return {points};
+        },
+
+        checkboxAttrs(item){
+            if( !item.checkboxPosition ){
+                const coords = this.getCoords(item);
+                let xys = coords.split(',');
+                let xmin, xmax, ymin, ymax;
+                xys.forEach( (v,i) => {
+                    if( i%2 == 0 ){
+                        xmin = xmin ? Math.min(xmin, v) : v;
+                        xmax = xmax ? Math.max(xmax, v) : v;
+                    }
+                    else{
+                        ymin = ymin ? Math.min(ymin, v) : v;
+                        ymax = ymax ? Math.max(ymax, v) : v;
+                    }
+                });
+                let x = xmin + (xmax-xmin) / 2;
+                let y = ymin + (ymax-ymin) / 2;
+                return {x,y};
+            }
+        },
+        getCoords(item){
+            const div = document.createElement('div');
+            div.innerHTML = item.image_map;
+            const area = div.querySelector('area');
+            if( !area || !area.hasAttributes() ){
+                return {};
+            }
+            const coordinates = area.getAttribute('coords');
+            return coordinates;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+polygon {
+    // fill: rgba(#f00, 0.4);
+    fill: transparent;
+    cursor: pointer;
+    // stroke-width: 0.15%;
+}
+.checkmark {
+    filter: drop-shadow(0 0 10px #629f37);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/VuePhotoZoomPro/Selector.vue b/src/components/VuePhotoZoomPro/Selector.vue
deleted file mode 100644
index 8769d0f..0000000
--- a/src/components/VuePhotoZoomPro/Selector.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<!--
- * @author: Mater
- * @Email: bxh8640@gmail.com
- * @Date: 2021-08-10 10:26:15
- * @Description:
--->
-<template>
-  <div
-    :class="['selector', type]"
-    :style="selectorStyle"
-  >
-    <div class="selector-wrap" :style="selectorWrapStyle">
-      <slot />
-    </div>
-    <div class="item-label" v-if="activeItem">
-      {{ $t(`items.${activeItem.key}`) }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'VuePhotoZommProSelector',
-  props: {
-    left: {
-      type: Number,
-      default: 0
-    },
-    top: {
-      type: Number,
-      default: 0
-    },
-    width: {
-      type: Number,
-      default: 0
-    },
-    height: {
-      type: Number,
-      default: 0
-    },
-    type: {
-      type: String,
-      default: 'square'
-    },
-    activeItem: {
-      type: Object
-    }
-  },
-  computed: {
-    selectorStyle () {
-      return {
-        transform: `translate3d(${this.left}px, ${this.top}px, 0)`
-      }
-    },
-    selectorWrapStyle(){
-      return {
-        width: `${this.width}px`,
-        height: `${this.height}px`,
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'src/variables.scss';
-$color: $dark-green;
-.selector {
-  position: absolute;
-  pointer-events: none;
-  z-index: 10;
-  .selector-wrap {
-    position: relative;
-    background-repeat: no-repeat;
-    cursor: crosshair;
-    overflow: hidden;
-  }
-  &.circle > .selector-wrap {
-      border: 4px solid #ccc;
-      border-radius: 50%;
-  }
-  &.found > .selector-wrap {
-    border: 4px solid $color;
-  }
-  &.pulse > .selector-wrap {
-    // border: 4px solid $color;
-    animation: pulse 2s ease-out 0s 1;
-  }
-
-  .item-label {
-    position: absolute;
-    left: 50%;
-    bottom: 100%;
-    background: rgba(#fff, 1);
-    mix-blend-mode: multiply;
-    z-index: 1000;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: darken( $dark-green, 10% );
-    border-radius: 0.5rem;
-    padding: 4px 1em;
-    transform: translate(-50%, -5px);
-    border: 2px solid darken( $dark-green, 5%);
-    // text-shadow: 1px 1px 1px rgba($dark-green,0.65);
-    // box-shadow: 1px 1px 2px rgba(0,0,0,0.75);
-    white-space: nowrap;
-    transform-origin: 0% 50%;
-    animation: slide-up 0.4s ease-out 0s 1;
-  }
-}
-
-@keyframes pulse {
-	0% {
-		box-shadow: 0 0 0 0 rgba($color, 0.7);
-	}
-
-	70% {
-		box-shadow: 0 0 0 50px rgba($color, 0);
-	}
-
-	100% {
-		box-shadow: 0 0 0 0 rgba($color, 0);
-	}
-}
-@keyframes slide-up {
-	0% {
-    opacity: 0;
-		transform: scale(0) translate(-50%, -5px);
-	}
-
-	100% {
-    opacity: 1;
-		transform: scale(1) translate(-50%, -5px);
-	}
-}
-</style>
diff --git a/src/components/VuePhotoZoomPro/VuePhotoZoomPro.vue b/src/components/VuePhotoZoomPro/VuePhotoZoomPro.vue
index f47890d..74d5f6e 100644
--- a/src/components/VuePhotoZoomPro/VuePhotoZoomPro.vue
+++ b/src/components/VuePhotoZoomPro/VuePhotoZoomPro.vue
@@ -3,9 +3,9 @@
     <div
       ref="zoomRegion"
       class="zoom-region"
-      @mouseenter="!disabled && handleMouseEnter($event)"
-      @mousemove="!disabled && handleMouseMove($event)"
-      @mouseleave="!disabled && handleMouseLeave($event)"
+      @mouseenter="!disabled && !enterEvent && handleMouseEnter($event)"
+      @mousemove="!disabled && !moveEvent && handleMouseMove($event)"
+      @mouseleave="!disabled && !leaveEvent && handleMouseLeave($event)"
     >
       <PhotoMask
         v-if="mask"
@@ -15,14 +15,20 @@
         :zoom-region="zoomRegionRect"
       />
       <Selector
-        ref="selector"
         v-if="selector"
         v-show="!hideSelector"
         v-bind="selectorProps"
-        :activeItem="activeItem"
         :type="type"
       >
-        <Zoomer v-if="!outZoomer" class="inner-zoomer" v-bind="zoomerProps">
+        <Zoomer
+          v-if="!outZoomer"
+          class="inner-zoomer"
+          v-bind="zoomerProps"
+        >
+          <ImgZoomer
+            v-if="highUrl || url"
+            :url="highUrl || url"
+          />
           <slot name="zoomer" />
         </Zoomer>
         <slot name="selector" />
@@ -34,194 +40,204 @@
         v-bind="zoomerProps"
         :style="outZoomerPosition"
       >
-        <slot name="outzoomer" />
+        <ImgZoomer
+          v-if="highUrl || url"
+          :url="highUrl || url"
+        />
+        <slot name="zoomer" />
       </Zoomer>
+      <ImgPreview
+        v-if="url"
+        :url="url"
+      />
       <slot />
     </div>
   </div>
 </template>
 <script>
-import PhotoMask from "./PhotoMask.vue";
-import Zoomer from "./Zoomer.vue";
-import Selector from "./Selector.vue";
+import PhotoMask from './components/photo-mask.vue'
+import Zoomer from './components/zoomer.vue'
+import Selector from './components/selector.vue'
+import { ImgPreview, ImgZoomer } from './plugins/img/index.js'
 import {
   getBoundingClientRect,
   getBoundValue,
   getScrollInfo,
-  addResizeListener,
-} from "./util";
-
+  addResizeListener
+} from './util/index.js'
 export default {
-  name: "VuePhotoZoomPro",
+  name: 'VuePhotoZoomPro',
   components: {
     PhotoMask,
     Selector,
     Zoomer,
+    ImgPreview,
+    ImgZoomer
   },
   props: {
-    activeItem: {
-      type: Object,
-      default: null
-    },
-    highUrl: {
-      type: String,
-      default: "",
-    },
     width: {
       type: Number,
-      default: 168,
+      default: 168
     },
     height: {
       type: Number,
-      default: -1,
+      default: -1
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    highUrl: {
+      type: String,
+      default: ''
     },
     type: {
       type: String,
-      default: "square",
+      default: 'square',
       validator: function (value) {
-        return ["circle", "square"].indexOf(value) !== -1;
-      },
+        return ['circle', 'square'].indexOf(value) !== -1
+      }
     },
     scale: {
       type: Number,
-      default: 2,
+      default: 2
     },
     enterEvent: {
       type: [Object, UIEvent],
-      default: null,
+      default: null
     },
     moveEvent: {
       type: [Object, UIEvent],
-      default: null,
+      default: null
     },
     leaveEvent: {
       type: [Object, UIEvent],
-      default: null,
+      default: null
     },
     selector: {
       type: Boolean,
-      default: true,
+      default: true
     },
     outZoomer: {
-      type: Boolean,
-      default: false,
+      type: [Boolean, Object],
+      default: false
     },
     disabledReactive: {
       type: Boolean,
-      default: false,
+      default: false
     },
     disabled: {
       type: Boolean,
-      default: false,
+      default: false
     },
     mask: {
       type: Boolean,
-      default: false,
+      default: false
     },
     maskColor: {
       type: String,
-      default: "",
-    },
+      default: ''
+    }
   },
-  data() {
+  data () {
     return {
       hideSelector: true,
       hideOutZoomer: true,
       outZoomerTop: 0,
       mouse: {
         x: 0,
-        y: 0,
+        y: 0
       },
       zoomRegionRect: {
         left: 0,
         top: 0,
         width: 0,
-        height: 0,
-      },
-    };
+        height: 0
+      }
+    }
   },
   computed: {
-    selectorWidth() {
-      return this.width;
+    selectorWidth () {
+      return this.width
     },
-    selectorHeight() {
-      return this.height > -1 ? this.height : this.width;
+    selectorHeight () {
+      return this.height > -1 ? this.height : this.width
     },
-    selectorHalfWidth() {
-      return this.selectorWidth / 2;
+    selectorHalfWidth () {
+      return this.selectorWidth / 2
     },
-    selectorHalfHeight() {
-      return this.selectorHeight / 2;
+    selectorHalfHeight () {
+      return this.selectorHeight / 2
     },
-    zoomerWidth() {
+    zoomerWidth () {
       return this.outZoomer
         ? this.selectorWidth * this.scale
-        : this.selectorWidth;
+        : this.selectorWidth
     },
-    zoomerHeight() {
+    zoomerHeight () {
       return this.outZoomer
         ? this.selectorHeight * this.scale
-        : this.selectorHeight;
+        : this.selectorHeight
     },
-    zoomerHalfWidth() {
-      return this.zoomerWidth / 2;
+    zoomerHalfWidth () {
+      return this.zoomerWidth / 2
     },
-    zoomerHalfHeight() {
-      return this.zoomerHeight / 2;
+    zoomerHalfHeight () {
+      return this.zoomerHeight / 2
     },
-    zoomRegionAbsolute() {
-      const { zoomRegionRect } = this;
-      const { scrollTop, scrollLeft } = getScrollInfo();
+    zoomRegionAbsolute () {
+      const { zoomRegionRect } = this
+      const { scrollTop, scrollLeft } = getScrollInfo()
       return {
         left: zoomRegionRect.left + scrollLeft,
-        top: zoomRegionRect.top + scrollTop,
-      };
+        top: zoomRegionRect.top + scrollTop
+      }
     },
-    pointBound() {
-      const { selectorHalfWidth, selectorHalfHeight, zoomRegionRect } = this;
+    pointBound () {
+      const { selectorHalfWidth, selectorHalfHeight, zoomRegionRect } = this
       return {
         leftBound: selectorHalfWidth,
         topBound: selectorHalfHeight,
         rightBound: zoomRegionRect.width - selectorHalfWidth,
-        bottomBound: zoomRegionRect.height - selectorHalfHeight,
-      };
+        bottomBound: zoomRegionRect.height - selectorHalfHeight
+      }
     },
-    vPointBound() {
-      const { zoomerHalfWidth, zoomerHalfHeight, zoomRegionRect, scale } = this;
+    vPointBound () {
+      const { zoomerHalfWidth, zoomerHalfHeight, zoomRegionRect, scale } = this
       return {
         leftBound: zoomerHalfWidth,
         topBound: zoomerHalfHeight,
         rightBound: zoomRegionRect.width * scale - zoomerHalfWidth,
-        bottomBound: zoomRegionRect.height * scale - zoomerHalfHeight,
-      };
+        bottomBound: zoomRegionRect.height * scale - zoomerHalfHeight
+      }
     },
-    point() {
-      const { mouse, pointBound } = this;
-      const { leftBound, topBound, rightBound, bottomBound } = pointBound;
+    point () {
+      const { mouse, pointBound } = this
+      const { leftBound, topBound, rightBound, bottomBound } = pointBound
       return {
         left: getBoundValue(mouse.x, leftBound, rightBound),
-        top: getBoundValue(mouse.y, topBound, bottomBound),
-      };
+        top: getBoundValue(mouse.y, topBound, bottomBound)
+      }
     },
-    vPoint() {
-      const { mouse, scale, vPointBound } = this;
-      const { leftBound, topBound, rightBound, bottomBound } = vPointBound;
+    vPoint () {
+      const { mouse, scale, vPointBound } = this
+      const { leftBound, topBound, rightBound, bottomBound } = vPointBound
       return {
         left: getBoundValue(mouse.x * scale, leftBound, rightBound),
-        top: getBoundValue(mouse.y * scale, topBound, bottomBound),
-      };
+        top: getBoundValue(mouse.y * scale, topBound, bottomBound)
+      }
     },
-    selectorProps() {
-      const { point } = this;
+    selectorProps () {
+      const { point } = this
       return {
         width: this.selectorWidth,
         height: this.selectorHeight,
         left: point.left - this.selectorHalfWidth,
-        top: point.top - this.selectorHalfHeight,
-      };
+        top: point.top - this.selectorHalfHeight
+      }
     },
-    zoomerProps() {
-      const { vPoint } = this;
+    zoomerProps () {
+      const { vPoint } = this
       return {
         scale: this.scale,
         zoomRegion: this.zoomRegionRect,
@@ -229,105 +245,91 @@ export default {
         width: this.zoomerWidth,
         height: this.zoomerHeight,
         left: vPoint.left - this.zoomerHalfWidth,
-        top: vPoint.top - this.zoomerHalfHeight,
-      };
+        top: vPoint.top - this.zoomerHalfHeight
+      }
     },
-    outZoomerPosition() {
+    outZoomerPosition () {
       return {
-        top: `${this.outZoomerTop}px`,
-      };
+        top: `${this.outZoomerTop}px`
+      }
     },
+    outZoomerSticky () {
+      return typeof this.outZoomer === 'object' ? this.outZoomer.sticky : false
+    }
   },
   watch: {
-    scale() {
-      this.handleMouseMove(this.pointerInfo);
-    },
-    enterEvent(v) {
-      !this.disabled && this.handleMouseEnter(v);
+    scale () {
+      this.handleMouseMove(this.pointerInfo)
     },
-    moveEvent(v) {
-      !this.disabled && this.handleMouseMove(v);
+    enterEvent (v) {
+      !this.disabled && this.handleMouseEnter(v)
     },
-    leaveEvent(v) {
-      !this.disabled && this.handleMouseLeave(v);
+    moveEvent (v) {
+      !this.disabled && this.handleMouseMove(v)
     },
-    activeItem(v){
-      const $el = this.$refs.selector.$el;
-      if( !v ){
-        $el.classList.remove('found')
-      }
-      else {
-        $el.classList.add('found');
-        if( !v.found ){
-          this.$emit('found', v);
-          $el.classList.remove('pulse');
-          setTimeout(()=>$el.classList.add('pulse'), 1);
-        }
-      }
+    leaveEvent (v) {
+      !this.disabled && this.handleMouseLeave(v)
     }
   },
-  mounted() {
-    this.$zoomRegion = this.$refs.zoomRegion;
+  mounted () {
+    this.$zoomRegion = this.$refs.zoomRegion
     if (!this.disabledReactive) {
       this.resizer = addResizeListener(
         this.$zoomRegion,
         this.handleZoomRegionResize
-      );
+      )
     }
-    this.update();
-    this.$emit("created");
+    this.update()
+    this.$emit('created')
   },
   methods: {
-    handleZoomRegionResize(rect) {
+    handleZoomRegionResize (rect) {
       this.zoomRegionRect = {
-        ...rect,
-      };
-    },
-    handleMouseEnter(e) {
-      this.resizer && this.resizer.valid();
-      this.hideSelector = false;
-      if (this.outZoomer) this.hideOutZoomer = false;
-      this.$emit("mouseenter", e);
-    },
-    handleMouseMove(e) {
-      if (this.hideSelector) return;
-      e = this.pointerInfo = e || this.pointerInfo;
+        ...rect
+      }
+    },
+    handleMouseEnter (e) {
+      this.resizer && this.resizer.valid()
+      this.hideSelector = false
+      if (this.outZoomer) this.hideOutZoomer = false
+      this.$emit('mouseenter', e)
+    },
+    handleMouseMove (e) {
+      if (this.hideSelector) return
+      e = this.pointerInfo = e || this.pointerInfo
       if (e) {
-        this.resizer && this.resizer.valid();
-        this.hideSelector = false;
-        const { pageX, pageY } = e;
-        const { zoomRegionAbsolute } = this;
-        this.mouse.x = pageX - zoomRegionAbsolute.left;
-        this.mouse.y = pageY - zoomRegionAbsolute.top;
-        if (this.outZoomer) {
-          this.hideOutZoomer = false;
-          this.outZoomerTop = Math.max(pageY - e.clientY, 0);
+        this.resizer && this.resizer.valid()
+        this.hideSelector = false
+        const { pageX, pageY } = e
+        const { zoomRegionAbsolute } = this
+        this.mouse.x = pageX - zoomRegionAbsolute.left
+        this.mouse.y = pageY - zoomRegionAbsolute.top
+        if (this.outZoomer && this.outZoomerSticky) {
+          this.hideOutZoomer = false
+          this.outZoomerTop = Math.max(pageY - e.clientY, 0)
         }
       }
-      this.$emit("mousemove", e);
+      this.$emit('mousemove', e)
     },
-    handleMouseLeave(e) {
-      this.hideSelector = true;
-      if (this.outZoomer) this.hideOutZoomer = true;
-      this.$emit("mouseleave", e);
-      this.$refs.selector.$el.classList.remove('pulse');
+    handleMouseLeave (e) {
+      this.hideSelector = true
+      if (this.outZoomer) this.hideOutZoomer = true
+      this.$emit('mouseleave', e)
     },
-    update() {
-      this.handleZoomRegionResize(getBoundingClientRect(this.$zoomRegion));
+    update () {
+      this.handleZoomRegionResize(getBoundingClientRect(this.$zoomRegion))
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .vue-photo-zoom-pro {
   font-size: 0;
-
   .zoom-region {
     position: relative;
-    display: block;
+    display: inline-block;
   }
-
   .out-zoomer {
     position: absolute;
     right: -8px;
@@ -337,4 +339,4 @@ export default {
     box-sizing: border-box;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/VuePhotoZoomPro/PhotoMask.vue b/src/components/VuePhotoZoomPro/components/photo-mask.vue
similarity index 99%
rename from src/components/VuePhotoZoomPro/PhotoMask.vue
rename to src/components/VuePhotoZoomPro/components/photo-mask.vue
index 30b1941..971a14f 100644
--- a/src/components/VuePhotoZoomPro/PhotoMask.vue
+++ b/src/components/VuePhotoZoomPro/components/photo-mask.vue
@@ -88,7 +88,6 @@ export default {
   background-color: rgba(0,0,0,0.4);
   z-index: 1;
 }
-
 .block {
   width: 30%;
   height: 50px;
@@ -103,4 +102,4 @@ export default {
     clear: both;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/VuePhotoZoomPro/components/selector.vue b/src/components/VuePhotoZoomPro/components/selector.vue
new file mode 100644
index 0000000..4dd551e
--- /dev/null
+++ b/src/components/VuePhotoZoomPro/components/selector.vue
@@ -0,0 +1,65 @@
+<!--
+ * @author: Mater
+ * @Email: bxh8640@gmail.com
+ * @Date: 2021-08-10 10:26:15
+ * @Description:
+-->
+<template>
+  <div
+    :class="['selector', type]"
+    :style="selectorStyle"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VuePhotoZommProSelector',
+  props: {
+    left: {
+      type: Number,
+      default: 0
+    },
+    top: {
+      type: Number,
+      default: 0
+    },
+    width: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: Number,
+      default: 0
+    },
+    type: {
+      type: String,
+      default: 'square'
+    }
+  },
+  computed: {
+    selectorStyle () {
+      return {
+        width: `${this.width}px`,
+        height: `${this.height}px`,
+        transform: `translate3d(${this.left}px, ${this.top}px, 0)`
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.selector {
+  position: absolute;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  cursor: crosshair;
+  pointer-events: none;
+  z-index: 1;
+  &.circle {
+    border-radius: 50%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/VuePhotoZoomPro/Zoomer.vue b/src/components/VuePhotoZoomPro/components/zoomer.vue
similarity index 86%
rename from src/components/VuePhotoZoomPro/Zoomer.vue
rename to src/components/VuePhotoZoomPro/components/zoomer.vue
index 6df44f5..51d9dd7 100644
--- a/src/components/VuePhotoZoomPro/Zoomer.vue
+++ b/src/components/VuePhotoZoomPro/components/zoomer.vue
@@ -13,11 +13,13 @@
       class="position"
       :style="positionStyle"
     >
-      <img
-        class="zommer-img"
-        :src="url"
+      <div
+        v-if="$slots.default"
+        class="region custom-zoomer"
         :style="zoomedStyle"
       >
+        <slot />
+      </div>
     </div>
   </div>
 </template>
@@ -72,8 +74,7 @@ export default {
       return {
         transform: `scale(${this.scale}) translateZ(0)`,
         width: `${zoomRegion.width}px`,
-        height: `${zoomRegion.height}px`,
-        transformOrigin: 'left top'
+        height: `${zoomRegion.height}px`
       }
     }
   }
@@ -83,9 +84,8 @@ export default {
 <style lang="scss" scoped>
 .zoomer {
   overflow: hidden;
-  pointer-events: none;
-  .zommer-img {
-    display: block;
+  .region {
+    transform-origin: left top;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/VuePhotoZoomPro/plugins/img/img-preview.vue b/src/components/VuePhotoZoomPro/plugins/img/img-preview.vue
new file mode 100644
index 0000000..17b174b
--- /dev/null
+++ b/src/components/VuePhotoZoomPro/plugins/img/img-preview.vue
@@ -0,0 +1,21 @@
+<template>
+  <img
+    class="img-region"
+    style="display: block;width: 100%"
+    :src="url"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+</template>
+
+<script>
+export default {
+  name: 'ImgRegion',
+  props: {
+    url: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/VuePhotoZoomPro/plugins/img/img-zoomer.vue b/src/components/VuePhotoZoomPro/plugins/img/img-zoomer.vue
new file mode 100644
index 0000000..cf5717a
--- /dev/null
+++ b/src/components/VuePhotoZoomPro/plugins/img/img-zoomer.vue
@@ -0,0 +1,21 @@
+<template>
+  <img
+    class="img-zoomer"
+    style="display: block; width: 100%; height: 100%"
+    :src="url"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+</template>
+
+<script>
+export default {
+  name: 'ImgZoomer',
+  props: {
+    url: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/VuePhotoZoomPro/plugins/img/index.js b/src/components/VuePhotoZoomPro/plugins/img/index.js
new file mode 100644
index 0000000..4b571b0
--- /dev/null
+++ b/src/components/VuePhotoZoomPro/plugins/img/index.js
@@ -0,0 +1,7 @@
+import ImgPreview from './img-preview.vue'
+import ImgZoomer from './img-zoomer.vue'
+
+export {
+  ImgPreview,
+  ImgZoomer
+}
\ No newline at end of file
diff --git a/src/components/VuePhotoZoomPro/util.js b/src/components/VuePhotoZoomPro/util/index.js
similarity index 100%
rename from src/components/VuePhotoZoomPro/util.js
rename to src/components/VuePhotoZoomPro/util/index.js