diff --git a/src/neditor/index.wc b/src/editor/index.wc similarity index 90% rename from src/neditor/index.wc rename to src/editor/index.wc index ae4b1c4..b3234c8 100644 --- a/src/neditor/index.wc +++ b/src/editor/index.wc @@ -37,7 +37,7 @@ display: flex; min-width: 200px; min-height: 100px; - max-height: 360px; + max-height: 640px; border-radius: 2px; } @@ -108,6 +108,7 @@ table { } } wc-scroll { + overflow: hidden; flex: 1; } .editor { @@ -277,14 +278,18 @@ function renderToolbar(list) { .join('') } -export default class Neditor { +export default class Editor { props = { - toolbar: null, + toolbar: '', value: '', readonly: false, disabled: false } + state = { + toolbar: null + } + __init__() { /* render */ @@ -298,26 +303,30 @@ export default class Neditor { this.__LINK_BTN__ = this.__LINK__.querySelector('wc-button') } + __stat__(name, val) { + var type = typeof val + + if (val === this.props[name]) { + return + } + + if ((type === name && val) || type !== 'boolean') { + this.props[name] = true + this.setAttribute(name, '') + this.__EDITOR__.removeAttribute('contenteditable') + } else { + this.props[name] = false + this.removeAttribute(name) + this.__EDITOR__.setAttribute('contenteditable', true) + } + } + get readOnly() { return this.props.readonly } set readOnly(val) { - var type = typeof val - - if (val === this.props.readonly) { - return - } - - if ((type === 'boolean' && val) || type !== 'boolean') { - this.props.readonly = true - this.setAttribute('readonly', '') - this.__EDITOR__.removeAttribute('contenteditable') - } else { - this.props.readonly = false - this.removeAttribute('readonly') - this.__EDITOR__.setAttribute('contenteditable', true) - } + this.__stat__('readonly', val) } get disabled() { @@ -325,21 +334,7 @@ export default class Neditor { } set disabled(val) { - var type = typeof val - - if (val === this.props.disabled) { - return - } - - if ((type === 'boolean' && val) || type !== 'boolean') { - this.props.disabled = true - this.setAttribute('disabled', '') - this.__EDITOR__.removeAttribute('contenteditable') - } else { - this.props.disabled = false - this.removeAttribute('disabled') - this.__EDITOR__.setAttribute('contenteditable', true) - } + this.__stat__('disabled', val) } get value() { @@ -357,18 +352,9 @@ export default class Neditor { } _updateToolbar() { - var { toolbar } = this.props - var isToolbarShow = true - if (Array.isArray(toolbar)) { - if (toolbar.length) { - this.__TOOLBAR__.innerHTML = renderToolbar(toolbar) - } else { - isToolbarShow = false - } - } else { - this.__TOOLBAR__.innerHTML = renderToolbar() - } - this.__TOOLBAR__.style.display = isToolbarShow ? 'flex' : '' + var { toolbar } = this.state + + this.__TOOLBAR__.innerHTML = renderToolbar(toolbar) } // 保存选中 @@ -588,11 +574,7 @@ export default class Neditor { }) this.__observer = new MutationObserver(_ => { - this.dispatchEvent( - new CustomEvent('input', { - detail: this.value - }) - ) + this.dispatchEvent(new CustomEvent('input')) }) this.__observer.observe(this.__EDITOR__, { @@ -615,9 +597,11 @@ export default class Neditor { watch() { switch (name) { case 'toolbar': - if (val) { + if (val === null) { + this.state.toolbar = [...DEFAULT_TOOLS] + } else if (val) { val = val.split(',').map(it => it.trim()) - this.props.toolbar = val + this.state.toolbar = val } break @@ -631,7 +615,7 @@ export default class Neditor { if (k === 'readonly') { k = 'readOnly' } - this[k] = true + this[k] = val !== null break default: diff --git a/src/neditor/svg.js b/src/editor/svg.js similarity index 100% rename from src/neditor/svg.js rename to src/editor/svg.js diff --git a/src/index.js b/src/index.js index c362203..db3494d 100644 --- a/src/index.js +++ b/src/index.js @@ -8,7 +8,7 @@ import './keyboard/index' import './layer/index' import './markd/index' import './meditor/index' -import './neditor/index' +import './editor/index' import './pager/index' import './picker/date' // import './picker/time' diff --git a/src/scroll/index.wc b/src/scroll/index.wc index 11808c4..e59e6b1 100644 --- a/src/scroll/index.wc +++ b/src/scroll/index.wc @@ -390,16 +390,22 @@ export default class Scroll { $.bind(document, 'mouseup', mouseupFn) }) - this.__observer = new ResizeObserver(this._initFn) - this.__observer.observe(this.__BOX__) + this.__observer1 = new ResizeObserver(this._initFn) + this.__observer2 = new MutationObserver(this._initFn) + this.__observer1.observe(this.__BOX__) + this.__observer2.observe(this, { + childList: true, + subtree: true, + characterData: true + }) } unmounted() { - this.__observer.disconnect() + this.__observer1.disconnect() + this.__observer2.disconnect() $.unbind(this.__X__, 'mousedown', this._xBarFn) $.unbind(this.__Y__, 'mousedown', this._yBarFn) - $.unbind(this, 'ready', this._initFn) $.unbind(this.__BOX__, 'scroll', this._scrollFn) }