allow locally register

README.md

@@ -8,8 +8,10 @@ This library has released a Vue 3 beta version [here](https://github.com/jarvisn
 
 ## Demo
 
-- [Single Image](https://unpkg.com/vue-zoomer/dist/demo/basic.html)
-- [Gallery](https://unpkg.com/vue-zoomer/dist/demo/gallery.html)
+- [Single Image](https://unpkg.com/vue-zoomer/dist/demo/basic.html) -
+  [(src)](https://github.com/jarvisniu/vue-zoomer/blob/master/demo/basic/app.vue)
+- [Gallery](https://unpkg.com/vue-zoomer/dist/demo/gallery.html) -
+  [(src)](https://github.com/jarvisniu/vue-zoomer/blob/master/demo/gallery/app.vue)
 
 ## Usage
 
@@ -19,7 +21,7 @@ Install:
 npm install vue-zoomer
 ```
 
-Import:
+Import and register globally:
 
 ```js
 import Vue from 'vue'
@@ -28,6 +30,28 @@ import VueZoomer from 'vue-zoomer'
 Vue.use(VueZoomer)
 ```
 
+Import and register locally (after `v0.3.10`):
+
+```html
+<!-- page1.vue -->
+<script>
+import VueZoomer from 'vue-zoomer'
+
+export default {
+  components: {
+    VZoomer: VueZoomer.Zoomer,
+    VZoomerGallery: VueZoomer.Gallery,
+  },
+}
+</script>
+```
+
+You can also import the source files (after `v0.3.10`), rather than
+the minified umd bundle, for better debugging experience:
+```js
+import VueZoomer from 'vue-zoomer/src'
+```
+
 Single usage:
 
 ```html

demo/basic/app.vue

@@ -7,12 +7,13 @@
     </div>
     <v-zoomer
       ref="zoomer"
-      style="width: 500px; height: 500px; border: solid 1px silver;"
+      style="width: 800px; height: 500px; border: solid 1px silver;"
+      :aspect-ratio="imageAspectRatio"
       :max-scale="10"
       :zooming-elastic="false"
       :zoomed.sync="zoomed"
     >
-      <img src="../assets/landscape-1.jpg" style="object-fit: contain; width: 100%; height: 100%;">
+      <img src="../assets/landscape-1.jpg" style="object-fit: contain; width: 100%; height: 100%;" @load="onImageLoad">
     </v-zoomer>
   </div>
 </template>
@@ -22,7 +23,14 @@ export default {
   data () {
     return {
       zoomed: false,
+      imageAspectRatio: 1,
     }
   },
+  methods: {
+    onImageLoad(e) {
+      const img = e.target
+      this.imageAspectRatio = img.naturalWidth / img.naturalHeight
+    },
+  },
 }
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-zoomer",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Zoom the image or other thing with mouse or touch",
   "main": "dist/vue-zoomer.min.js",
   "module": "dist/vue-zoomer.esm.js",
@@ -35,6 +35,7 @@
     "vue-template-compiler": "^2.6.7"
   },
   "files": [
+    "src/**/*",
     "dist/**/*"
   ]
 }

src/index.js

@@ -1,9 +1,12 @@
-export { default as VueZoomer } from './vue-zoomer.vue'
-export { default as VueZoomerGallery } from './vue-zoomer-gallery.vue'
+import VueZoomer from './vue-zoomer.vue'
+import VueZoomerGallery from './vue-zoomer-gallery.vue'
 
 export default {
   install (Vue) {
     Vue.component('VZoomer', VueZoomer)
     Vue.component('VZoomerGallery', VueZoomerGallery)
   },
+  // for locally register
+  Zoomer: VueZoomer,
+  Gallery: VueZoomerGallery,
 }