This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化富文本编辑器;优化滚动条组件

old
宇天 2021-05-25 19:33:55 +08:00
parent c7e8da83e9
commit a04d6658c5
4 changed files with 48 additions and 58 deletions

View File

@ -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) {
var { toolbar } = this.state
this.__TOOLBAR__.innerHTML = renderToolbar(toolbar)
} else {
isToolbarShow = false
}
} else {
this.__TOOLBAR__.innerHTML = renderToolbar()
}
this.__TOOLBAR__.style.display = isToolbarShow ? 'flex' : ''
}
// 保存选中
@ -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:

View File

@ -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'

View File

@ -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)
}