From c0014a02f6a3df7cd1c09a66c4bdb9c5079bbf0e Mon Sep 17 00:00:00 2001 From: peak Date: Fri, 7 Apr 2017 10:43:47 +0800 Subject: [PATCH] fix: infinite update loop with vue2.2.5+ --- dist/vue-html5-editor.js | 16 +++++++++------- package.json | 2 +- src/editor.html | 4 ++-- src/editor.js | 8 +++++--- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/dist/vue-html5-editor.js b/dist/vue-html5-editor.js index 703473a..223aba1 100644 --- a/dist/vue-html5-editor.js +++ b/dist/vue-html5-editor.js @@ -1,7 +1,7 @@ /** - * Vue-html5-editor 1.0.2 + * Vue-html5-editor 1.0.3 * https://github.com/PeakTai/vue-html5-editor - * build at Tue Mar 14 2017 18:41:09 GMT+0800 (CST) + * build at Fri Apr 07 2017 10:40:34 GMT+0800 (CST) */ (function (global, factory) { @@ -476,7 +476,7 @@ var dashboard$4 = { template: template$4, data: function data(){ return { - version: "1.0.2" + version: "1.0.3" } } }; @@ -1103,7 +1103,7 @@ RangeHandler.prototype.execCommand = function execCommand (command, arg) { __$styleInject(".vue-html5-editor{font-size:14px;line-height:1.5;background-color:#fff;color:#333;border:1px solid #ddd;text-align:left;border-radius:5px;overflow:hidden;box-sizing:border-box}.vue-html5-editor.full-screen{position:fixed!important;top:0!important;left:0!important;bottom:0!important;right:0!important;border-radius:0}.vue-html5-editor>.toolbar{position:relative;background-color:inherit}.vue-html5-editor>.toolbar>ul{list-style:none;padding:0;margin:0;border-bottom:1px solid #ddd}.vue-html5-editor>.toolbar>ul>li{display:inline-block;cursor:pointer;text-align:center;line-height:36px;padding:0 10px}.vue-html5-editor>.toolbar>ul>li .icon{height:16px;width:16px;display:inline-block;vertical-align:middle}.vue-html5-editor>.toolbar>.dashboard{background-color:inherit;border-bottom:1px solid #ddd;padding:10px;position:absolute;top:100%;left:0;right:0;overflow:auto}.vue-html5-editor>.toolbar>.dashboard input[type=text],.vue-html5-editor>.toolbar>.dashboard input[type=number],.vue-html5-editor>.toolbar>.dashboard select{padding:6px 12px;color:inherit;background-color:transparent;border:1px solid #ddd;border-radius:5px}.vue-html5-editor>.toolbar>.dashboard input[type=text]:hover,.vue-html5-editor>.toolbar>.dashboard input[type=number]:hover,.vue-html5-editor>.toolbar>.dashboard select:hover{border-color:#bebebe}.vue-html5-editor>.toolbar>.dashboard input[type=text][disabled],.vue-html5-editor>.toolbar>.dashboard input[type=text][readonly],.vue-html5-editor>.toolbar>.dashboard input[type=number][disabled],.vue-html5-editor>.toolbar>.dashboard input[type=number][readonly],.vue-html5-editor>.toolbar>.dashboard select[disabled],.vue-html5-editor>.toolbar>.dashboard select[readonly]{background-color:#eee;opacity:1}.vue-html5-editor>.toolbar>.dashboard input[type=text][disabled],.vue-html5-editor>.toolbar>.dashboard input[type=number][disabled],.vue-html5-editor>.toolbar>.dashboard select[disabled]{cursor:not-allowed}.vue-html5-editor>.toolbar>.dashboard button{color:inherit;background-color:inherit;padding:6px 12px;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid #ddd;border-radius:5px;margin-right:4px;margin-bottom:4px}.vue-html5-editor>.toolbar>.dashboard button:hover{border-color:#bebebe}.vue-html5-editor>.toolbar>.dashboard button[disabled]{cursor:not-allowed;opacity:.68}.vue-html5-editor>.toolbar>.dashboard button:last-child{margin-right:0}.vue-html5-editor>.toolbar>.dashboard label{font-weight:bolder}.vue-html5-editor>.content{overflow:auto;padding:10px}.vue-html5-editor>.content:focus{outline:0}",undefined); -var template$9 = "
"; +var template$9 = "
"; /** * Created by peak on 2017/2/9. @@ -1139,8 +1139,7 @@ var editor = { // locale: {}, // modules:{}, fullScreen: false, - dashboard: null, - dashboardStyle: {} + dashboard: null } }, watch: { @@ -1287,7 +1286,10 @@ var editor = { window.addEventListener('touchend', this.touchHandler, false); }, updated: function updated(){ - this.dashboardStyle = {'max-height': ((this.$refs.content.clientHeight) + "px")}; + // update dashboard style + if (this.$refs.dashboard){ + this.$refs.dashboard.style.minHeight = (this.$refs.content.clientHeight) + "px"; + } }, beforeDestroy: function beforeDestroy(){ var this$1 = this; diff --git a/package.json b/package.json index ba1055f..86b56da 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-html5-editor", - "version": "1.0.2", + "version": "1.0.3", "description": "A WYSIWYG text editor base on html5 and vue", "repository": { "type": "git", diff --git a/src/editor.html b/src/editor.html index 2b4c69e..177a7ae 100644 --- a/src/editor.html +++ b/src/editor.html @@ -10,9 +10,9 @@ -
+
-
+
diff --git a/src/editor.js b/src/editor.js index 3a43d5f..107a91a 100644 --- a/src/editor.js +++ b/src/editor.js @@ -35,8 +35,7 @@ export default { // locale: {}, // modules:{}, fullScreen: false, - dashboard: null, - dashboardStyle: {} + dashboard: null } }, watch: { @@ -177,7 +176,10 @@ export default { window.addEventListener('touchend', this.touchHandler, false) }, updated(){ - this.dashboardStyle = {'max-height': `${this.$refs.content.clientHeight}px`} + // update dashboard style + if (this.$refs.dashboard){ + this.$refs.dashboard.style.minHeight = `${this.$refs.content.clientHeight}px` + } }, beforeDestroy(){ window.removeEventListener('touchend', this.touchHandler)