v-viewer - npm Package Compare versions

Comparing version 1.4.2 to 1.5.0

dist/v-viewer.js

@@ -103,10 +103,17 @@ (function webpackUniversalModuleDefinition(root, factory) {
   function createViewer(el, options) {
+    var rebuild = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
     Vue.nextTick(function () {
-      destroyViewer(el);
-      el['$' + name] = new __WEBPACK_IMPORTED_MODULE_0_viewerjs___default.a(el, options);
-      log('viewer created');
+      if (rebuild || !el['$' + name]) {
+        destroyViewer(el);
+        el['$' + name] = new __WEBPACK_IMPORTED_MODULE_0_viewerjs___default.a(el, options);
+        log('viewer created');
+      } else {
+        el['$' + name].update();
+        log('viewer updated');
+      }
     });
   }
 
-  function createObserver(el, options, debouncedCreateViewer) {
+  function createObserver(el, options, debouncedCreateViewer, rebuild) {
     destroyObserver(el);
@@ -121,3 +128,3 @@ var MutationObserver = global.MutationObserver || global.WebKitMutationObserver || global.MozMutationObserver;
         log('viewer mutation:' + mutation.type);
-        debouncedCreateViewer(el, options);
+        debouncedCreateViewer(el, options, rebuild);
       });
@@ -141,3 +148,3 @@ });
       log('change detected by watcher: ', expression);
-      debouncedCreateViewer(el, newVal);
+      debouncedCreateViewer(el, newVal, true);
     }, {
@@ -191,3 +198,3 @@ deep: true
       if (!binding.modifiers.static) {
-        createObserver(el, binding.value, debouncedCreateViewer);
+        createObserver(el, binding.value, debouncedCreateViewer, binding.modifiers.rebuild);
       }
@@ -264,3 +271,3 @@ },
 )
-Component.options.__file = "D:\\Workspaces\\Web\\Git\\v-viewer\\src\\component.vue"
+Component.options.__file = "C:\\Workspaces\\Web\\Git\\v-viewer\\src\\component.vue"
 if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
@@ -330,47 +337,64 @@ if (Component.options.functional) {console.error("[vue-loader] component.vue: functional components are not supported with templates, they should use render functions.")}
 function throttle(delay, noTrailing, callback, debounceMode) {
-	var timeoutID;
+  var timeoutID;
+  var cancelled = false;
 
-	var lastExec = 0;
+  var lastExec = 0;
 
-	if (typeof noTrailing !== 'boolean') {
-		debounceMode = callback;
-		callback = noTrailing;
-		noTrailing = undefined;
-	}
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+  }
 
-	function wrapper() {
+  function cancel() {
+    clearExistingTimeout();
+    cancelled = true;
+  }
 
-		var self = this;
-		var elapsed = Number(new Date()) - lastExec;
-		var args = arguments;
+  if (typeof noTrailing !== 'boolean') {
+    debounceMode = callback;
+    callback = noTrailing;
+    noTrailing = undefined;
+  }
 
-		function exec() {
-			lastExec = Number(new Date());
-			callback.apply(self, args);
-		}
 
-		function clear() {
-			timeoutID = undefined;
-		}
+  function wrapper() {
+    var self = this;
+    var elapsed = Date.now() - lastExec;
+    var args = arguments;
 
-		if (debounceMode && !timeoutID) {
-			exec();
-		}
+    if (cancelled) {
+      return;
+    }
 
-		if (timeoutID) {
-			clearTimeout(timeoutID);
-		}
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self, args);
+    }
 
-		if (debounceMode === undefined && elapsed > delay) {
-			exec();
-		} else if (noTrailing !== true) {
-			timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
-		}
-	}
 
-	return wrapper;
+    function clear() {
+      timeoutID = undefined;
+    }
+
+    if (debounceMode && !timeoutID) {
+      exec();
+    }
+
+    clearExistingTimeout();
+
+    if (debounceMode === undefined && elapsed > delay) {
+      exec();
+    } else if (noTrailing !== true) {
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
+    }
+  }
+
+  wrapper.cancel = cancel;
+
+  return wrapper;
 }
 
 function debounce(delay, atBegin, callback) {
-	return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
+  return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
 }
@@ -397,2 +421,6 @@
     },
+    rebuild: {
+      type: Boolean,
+      default: false
+    },
     trigger: {},
@@ -412,4 +440,24 @@ options: {
   methods: {
+    onChange: function onChange() {
+      if (this.rebuild) {
+        this.rebuildViewer();
+      } else {
+        this.updateViewer();
+      }
+    },
+    rebuildViewer: function rebuildViewer() {
+      this.destroyViewer();
+      this.createViewer();
+    },
+    updateViewer: function updateViewer() {
+      if (this.$viewer) {
+        this.$viewer.update();
+      } else {
+        this.createViewer();
+      }
+    },
+    destroyViewer: function destroyViewer() {
+      this.$viewer && this.$viewer.destroy();
+    },
     createViewer: function createViewer() {
-      this.$viewer && this.$viewer.destroy();
       this.$viewer = new __WEBPACK_IMPORTED_MODULE_0_viewerjs___default.a(this.$el, this.options);
@@ -425,3 +473,3 @@ this.$emit('inited', this.$viewer);
       this.$nextTick(function () {
-        _this.createViewer();
+        _this.onChange();
       });
@@ -435,5 +483,6 @@ },
         this.$nextTick(function () {
-          _this2.createViewer();
+          _this2.onChange();
         });
       },
+
       deep: true
@@ -446,5 +495,6 @@ },
         this.$nextTick(function () {
-          _this3.createViewer();
+          _this3.rebuildViewer();
         });
       },
+
       deep: true
@@ -458,3 +508,3 @@ }
   destroyed: function destroyed() {
-    this.$viewer && this.$viewer.destroy();
+    this.destroyViewer();
   }
@@ -546,4 +596,4 @@ });
   return _c('div', [_vm._t("default", null, {
-    images: _vm.images,
-    options: _vm.options
+    "images": _vm.images,
+    "options": _vm.options
   })], 2)
@@ -550,0 +600,0 @@ },staticRenderFns: []}

dist/v-viewer.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("viewerjs")):"function"==typeof define&&define.amd?define(["viewerjs"],t):"object"==typeof exports?exports.VueViewer=t(require("viewerjs")):e.VueViewer=t(e.Viewer)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(t,n){t.exports=e},function(e,t,n){"use strict";(function(e){var r=n(0),i=n.n(r),o=n(5),u=function(t,r){function u(e,n){t.nextTick(function(){s(e),e["$"+p]=new i.a(e,n),v("viewer created")})}function c(t,n,r){f(t);var i=e.MutationObserver||e.WebKitMutationObserver||e.MozMutationObserver;if(!i)return void v("observer not supported");var o=new i(function(e){e.forEach(function(e){v("viewer mutation:"+e.type),r(t,n)})}),u={attributes:!0,childList:!0,characterData:!0,subtree:!0};o.observe(t,u),t.$viewerMutationObserver=o,v("observer created")}function a(e,t,n,r){var i=t.expression,o=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/;if(!i||!o.test(i))return void v("only simple dot-delimited paths can create watcher");e.$viewerUnwatch=n.context.$watch(i,function(t,n){v("change detected by watcher: ",i),r(e,t)},{deep:!0}),v("watcher created, expression: ",i)}function s(e){e["$"+p]&&(e["$"+p].destroy(),delete e["$"+p],v("viewer destroyed"))}function f(e){e.$viewerMutationObserver&&(e.$viewerMutationObserver.disconnect(),delete e.$viewerMutationObserver,v("observer destroyed"))}function d(e){e.$viewerUnwatch&&(e.$viewerUnwatch(),delete e.$viewerUnwatch,v("watcher destroyed"))}function v(){var e;b&&(e=console).log.apply(e,arguments)}var l=r.name,p=void 0===l?"viewer":l,w=r.debug,b=void 0!==w&&w;t.directive("viewer",{bind:function(e,t,r){v("viewer bind");var i=n.i(o.a)(50,u);i(e,t.value),a(e,t,r,i),t.modifiers.static||c(e,t.value,i)},unbind:function(e,t){v("viewer unbind"),f(e),d(e),s(e)}})};t.a={install:u}}).call(t,n(7))},function(e,t,n){"use strict";function r(){var e={},t=!1,n=0,i=arguments.length;for("[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);n<i;n++){var o=arguments[n];!function(n){for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t&&"[object Object]"===Object.prototype.toString.call(n[i])?e[i]=r(!0,e[i],n[i]):e[i]=n[i])}(o)}return e}t.a=r},function(e,t,n){var r=n(8)(n(6),n(9),null,null);e.exports=r.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2),i=n(3),o=n.n(i),u=n(1),c=n(0),a=n.n(c);t.default={install:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.name,c=void 0===i?"viewer":i,s=t.debug,f=void 0!==s&&s,d=t.defaultOptions;a.a.setDefaults(d),e.component(c,n.i(r.a)(o.a,{name:c})),e.use(u.a,{name:c,debug:f})},setDefaults:function(e){a.a.setDefaults(e)}}},function(e,t,n){"use strict";function r(e,t,n,r){function i(){function i(){u=Number(new Date),n.apply(a,f)}function c(){o=void 0}var a=this,s=Number(new Date)-u,f=arguments;r&&!o&&i(),o&&clearTimeout(o),void 0===r&&s>e?i():!0!==t&&(o=setTimeout(r?c:i,void 0===r?e-s:e))}var o,u=0;return"boolean"!=typeof t&&(r=n,n=t,t=void 0),i}function i(e,t,n){return void 0===n?r(e,t,!1):r(e,n,!1!==t)}n.d(t,"a",function(){return i})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),i=n.n(r);t.default={props:{images:{type:Array},trigger:{},options:{type:Object}},data:function(){return{}},computed:{},methods:{createViewer:function(){this.$viewer&&this.$viewer.destroy(),this.$viewer=new i.a(this.$el,this.options),this.$emit("inited",this.$viewer)}},watch:{images:function(){var e=this;this.$nextTick(function(){e.createViewer()})},trigger:{handler:function(){var e=this;this.$nextTick(function(){e.createViewer()})},deep:!0},options:{handler:function(){var e=this;this.$nextTick(function(){e.createViewer()})},deep:!0}},mounted:function(){this.createViewer()},destroyed:function(){this.$viewer&&this.$viewer.destroy()}}},function(e,t){var n,r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"===("undefined"==typeof window?"undefined":r(window))&&(n=window)}e.exports=n},function(e,t){e.exports=function(e,t,n,r){var i,o=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(i=e,o=e.default);var c="function"==typeof o?o.options:o;if(t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns),n&&(c._scopeId=n),r){var a=Object.create(c.computed||null);Object.keys(r).forEach(function(e){var t=r[e];a[e]=function(){return t}}),c.computed=a}return{esModule:i,exports:o,options:c}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",[e._t("default",null,{images:e.images,options:e.options})],2)},staticRenderFns:[]}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("viewerjs")):"function"==typeof define&&define.amd?define(["viewerjs"],t):"object"==typeof exports?exports.VueViewer=t(require("viewerjs")):e.VueViewer=t(e.Viewer)}(this,function(e){return function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(t,n){t.exports=e},function(e,t,n){"use strict";(function(e){var i=n(0),r=n.n(i),o=n(5),u=function(t,i){function u(e,n){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];t.nextTick(function(){i||!e["$"+p]?(s(e),e["$"+p]=new r.a(e,n),l("viewer created")):(e["$"+p].update(),l("viewer updated"))})}function c(t,n,i,r){f(t);var o=e.MutationObserver||e.WebKitMutationObserver||e.MozMutationObserver;if(!o)return void l("observer not supported");var u=new o(function(e){e.forEach(function(e){l("viewer mutation:"+e.type),i(t,n,r)})}),c={attributes:!0,childList:!0,characterData:!0,subtree:!0};u.observe(t,c),t.$viewerMutationObserver=u,l("observer created")}function a(e,t,n,i){var r=t.expression,o=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/;if(!r||!o.test(r))return void l("only simple dot-delimited paths can create watcher");e.$viewerUnwatch=n.context.$watch(r,function(t,n){l("change detected by watcher: ",r),i(e,t,!0)},{deep:!0}),l("watcher created, expression: ",r)}function s(e){e["$"+p]&&(e["$"+p].destroy(),delete e["$"+p],l("viewer destroyed"))}function f(e){e.$viewerMutationObserver&&(e.$viewerMutationObserver.disconnect(),delete e.$viewerMutationObserver,l("observer destroyed"))}function d(e){e.$viewerUnwatch&&(e.$viewerUnwatch(),delete e.$viewerUnwatch,l("watcher destroyed"))}function l(){var e;h&&(e=console).log.apply(e,arguments)}var v=i.name,p=void 0===v?"viewer":v,w=i.debug,h=void 0!==w&&w;t.directive("viewer",{bind:function(e,t,i){l("viewer bind");var r=n.i(o.a)(50,u);r(e,t.value),a(e,t,i,r),t.modifiers.static||c(e,t.value,r,t.modifiers.rebuild)},unbind:function(e,t){l("viewer unbind"),f(e),d(e),s(e)}})};t.a={install:u}}).call(t,n(7))},function(e,t,n){"use strict";function i(){var e={},t=!1,n=0,r=arguments.length;for("[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);n<r;n++){var o=arguments[n];!function(n){for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t&&"[object Object]"===Object.prototype.toString.call(n[r])?e[r]=i(!0,e[r],n[r]):e[r]=n[r])}(o)}return e}t.a=i},function(e,t,n){var i=n(8)(n(6),n(9),null,null);e.exports=i.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(2),r=n(3),o=n.n(r),u=n(1),c=n(0),a=n.n(c);t.default={install:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.name,c=void 0===r?"viewer":r,s=t.debug,f=void 0!==s&&s,d=t.defaultOptions;a.a.setDefaults(d),e.component(c,n.i(i.a)(o.a,{name:c})),e.use(u.a,{name:c,debug:f})},setDefaults:function(e){a.a.setDefaults(e)}}},function(e,t,n){"use strict";function i(e,t,n,i){function r(){c&&clearTimeout(c)}function o(){r(),a=!0}function u(){function o(){s=Date.now(),n.apply(f,l)}function u(){c=void 0}var f=this,d=Date.now()-s,l=arguments;a||(i&&!c&&o(),r(),void 0===i&&d>e?o():!0!==t&&(c=setTimeout(i?u:o,void 0===i?e-d:e)))}var c,a=!1,s=0;return"boolean"!=typeof t&&(i=n,n=t,t=void 0),u.cancel=o,u}function r(e,t,n){return void 0===n?i(e,t,!1):i(e,n,!1!==t)}n.d(t,"a",function(){return r})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),r=n.n(i);t.default={props:{images:{type:Array},rebuild:{type:Boolean,default:!1},trigger:{},options:{type:Object}},data:function(){return{}},computed:{},methods:{onChange:function(){this.rebuild?this.rebuildViewer():this.updateViewer()},rebuildViewer:function(){this.destroyViewer(),this.createViewer()},updateViewer:function(){this.$viewer?this.$viewer.update():this.createViewer()},destroyViewer:function(){this.$viewer&&this.$viewer.destroy()},createViewer:function(){this.$viewer=new r.a(this.$el,this.options),this.$emit("inited",this.$viewer)}},watch:{images:function(){var e=this;this.$nextTick(function(){e.onChange()})},trigger:{handler:function(){var e=this;this.$nextTick(function(){e.onChange()})},deep:!0},options:{handler:function(){var e=this;this.$nextTick(function(){e.rebuildViewer()})},deep:!0}},mounted:function(){this.createViewer()},destroyed:function(){this.destroyViewer()}}},function(e,t){var n,i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"===("undefined"==typeof window?"undefined":i(window))&&(n=window)}e.exports=n},function(e,t){e.exports=function(e,t,n,i){var r,o=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(r=e,o=e.default);var c="function"==typeof o?o.options:o;if(t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns),n&&(c._scopeId=n),i){var a=Object.create(c.computed||null);Object.keys(i).forEach(function(e){var t=i[e];a[e]=function(){return t}}),c.computed=a}return{esModule:r,exports:o,options:c}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",[e._t("default",null,{images:e.images,options:e.options})],2)},staticRenderFns:[]}}])});

package.json

 {
   "name": "v-viewer",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js",
@@ -54,7 +54,7 @@ "main": "dist/v-viewer.js",
     "electron-devtools-installer": "^2.0.1",
-    "eslint": "^3.17.1",
+    "eslint": "^4.18.2",
     "eslint-config-standard": "^7.0.1",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.6.1",
-    "eslint-plugin-html": "^2.0.1",
+    "eslint-plugin-html": "^3.2.2",
     "eslint-plugin-promise": "^3.5.0",
@@ -78,2 +78,3 @@ "eslint-plugin-standard": "^2.1.1",
     "serve-favicon": "^2.4.1",
+    "shelljs": "^0.8.3",
     "style-loader": "^0.13.1",
@@ -95,4 +96,4 @@ "stylus": "^0.54.5",
     "throttle-debounce": "^2.0.1",
-    "viewerjs": "^1.3.2"
+    "viewerjs": "^1.5.0"
   }
 }

README.md

 # v-viewer
+
 Image viewer component for vue, supports rotation, scale, zoom and so on, based on [viewer.js](https://github.com/fengyuanchen/viewerjs)
@@ -20,4 +21,6 @@
 
-## Installation 
+## Installation
+
 Install from GitHub via NPM
+
 ```bash
@@ -120,4 +123,5 @@ npm install v-viewer
 #### Direcitve modifiers
+
 ##### static
-The `viewer` renderer will be executed only once after the directive binded.
+The `viewer` instance will be created only once after the directive binded.
 
@@ -132,3 +136,16 @@ If you're sure the images inside this element won't change again, use it to avoid unnecessary re-render.
 
+##### rebuild
+
+The `viewer` instance will be updated by `update` method when the source images changed (added, removed or sorted) by default.
+
+If you encounter any display problems, try rebuilding instead of updating.
+
+```
+<div class="images" v-viewer.rebuild="{inline: true}">
+  <img v-for="src in images" :src="src" :key="src">
+</div>
+```
+
 ### Usage of component
+
 You can simply import the component and register it locally too.
@@ -138,4 +155,2 @@
 
-Listen for the `inited` event to get the `viewer` instance, or use `this.refs.xxx.$viewer`.
-
 ```html
@@ -178,4 +193,15 @@ <template>
 
+#### Component props
+
+##### images
+
+- Type: `Array`
+
+##### trigger
+
+- Type: `Array`
+
 You can replace `images` with `trigger`, to accept any type of prop.
 when the `trigger` changes, the component will re-render the viewer.
+
 ```html
@@ -187,7 +213,41 @@ <viewer :trigger="externallyGeneratedHtmlWithImages">
 
-## Options & Methods 
+##### rebuild
 
+- Type: `Boolean`
+- Default: `false`
+
+The viewer instance will be updated by `update` method when the source images changed (added, removed or sorted) by default.
+
+If you encounter any display problems, try rebuilding instead of updating.
+
+```html
+<viewer
+  ref="viewer"
+  :options="options"
+  :images="images"
+  rebuild
+  class="viewer"
+  @inited="inited"
+>
+  <template slot-scope="scope">
+    <img v-for="src in scope.images" :src="src" :key="src">
+    {{scope.options}}
+  </template>
+</viewer>
+```
+
+#### Component events
+
+##### inited
+
+- viewer: `Viewer`
+
+Listen for the `inited` event to get the `viewer` instance, or use `this.refs.xxx.$viewer`.
+
+## Options & Methods of Viewer
+
 Refer to [viewer.js](https://github.com/fengyuanchen/viewerjs).
 
 ## Plugin options
+
 ### name
@@ -194,0 +254,0 @@

src/directive.js

@@ -5,12 +5,17 @@ import Viewer from 'viewerjs'
 const install = (Vue, {name = 'viewer', debug = false}) => {
-  function createViewer (el, options) {
+  function createViewer (el, options, rebuild = false) {
     // nextTick执行，否则可能漏掉未渲染完的子元素
     Vue.nextTick(() => {
-      destroyViewer(el)
-      el[`$${name}`] = new Viewer(el, options)
-      log('viewer created')
+      if (rebuild || !el[`$${name}`]) {
+        destroyViewer(el)
+        el[`$${name}`] = new Viewer(el, options)
+        log('viewer created')
+      } else {
+        el[`$${name}`].update()
+        log('viewer updated')
+      }
     })
   }
 
-  function createObserver (el, options, debouncedCreateViewer) {
+  function createObserver (el, options, debouncedCreateViewer, rebuild) {
     destroyObserver(el)
@@ -25,3 +30,3 @@ const MutationObserver = global.MutationObserver || global.WebKitMutationObserver || global.MozMutationObserver
         log('viewer mutation:' + mutation.type)
-        debouncedCreateViewer(el, options)
+        debouncedCreateViewer(el, options, rebuild)
       })
@@ -43,3 +48,3 @@ })
       log('change detected by watcher: ', expression)
-      debouncedCreateViewer(el, newVal)
+      debouncedCreateViewer(el, newVal, true)
     }, {
@@ -94,3 +99,3 @@ deep: true
         // 增加dom变化监听
-        createObserver(el, binding.value, debouncedCreateViewer)
+        createObserver(el, binding.value, debouncedCreateViewer, binding.modifiers.rebuild)
       }
@@ -97,0 +102,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

650

increased by7.79%

Number of lines in readme file

307

increased by24.29%

Worsened metrics

Total package byte prevSize

45280

decreased by-90.17%

Dev dependency count

54

increased by1.89%

Dependency changes

• Updatedviewerjs@^1.5.0