重构scroll组件
parent
c8d6dc664b
commit
f17481753d
|
@ -0,0 +1,18 @@
|
|||
import './avatar/index'
|
||||
import './badge/index'
|
||||
import './code/index'
|
||||
import './color/index'
|
||||
import './drag/index'
|
||||
import './form/index'
|
||||
import './keyboard/index'
|
||||
import './layer/index'
|
||||
import './markd/index'
|
||||
import './meditor/index'
|
||||
import './neditor/index'
|
||||
import './pager/index'
|
||||
import './picker/date'
|
||||
// import './picker/time'
|
||||
import './slider/index'
|
||||
// import './neditor/index'
|
||||
// import './neditor/index'
|
||||
// import './neditor/index'
|
|
@ -132,7 +132,7 @@ const Decoder = {
|
|||
if (level === 1) {
|
||||
return `<h1>${m2}</h1>`
|
||||
} else {
|
||||
return `<h${level}><a href="#${hash}" class="md-head-link">${m2}</a></h${level}>`
|
||||
return `<h${level}><a href="#${hash}" id="${hash}" class="md-head-link">${m2}</a></h${level}>`
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div><slot /></div>
|
||||
<slot />
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
@ -9,6 +9,21 @@
|
|||
color: var(--color-dark-1);
|
||||
font-size: 14px;
|
||||
}
|
||||
slot::slotted(h2 a) {
|
||||
text-decoration: underline;
|
||||
color: var(--color-teal-2);
|
||||
}
|
||||
|
||||
slot::slotted(h1, h2, h3, h4, h5, h6) {
|
||||
color: var(--color-teal-2);
|
||||
a {
|
||||
&::before {
|
||||
content: '∮ ';
|
||||
color: var(--color-teal-1);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
|
@ -195,9 +210,8 @@ export default class Markd {
|
|||
|
||||
__init__() {
|
||||
/* render */
|
||||
|
||||
var elem = this.root.children[1]
|
||||
this.__BOX__ = elem
|
||||
// var elem = this.root.children[1]
|
||||
// this.__BOX__ = elem
|
||||
}
|
||||
|
||||
__parse__() {
|
||||
|
@ -207,8 +221,8 @@ export default class Markd {
|
|||
|
||||
set value(txt) {
|
||||
if (txt) {
|
||||
this.__BOX__.innerHTML = markd(txt)
|
||||
this.textContent = ''
|
||||
this.innerHTML = markd(txt)
|
||||
// this.textContent = ''
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -220,28 +234,29 @@ export default class Markd {
|
|||
mounted() {
|
||||
this.__parse__()
|
||||
|
||||
this._headClickFn = $.bind(this.__BOX__, 'click', ev => {
|
||||
if (ev.target.className === 'md-head-link') {
|
||||
var ot = ev.target.offsetTop
|
||||
document.documentElement.scrollTop = ot
|
||||
}
|
||||
})
|
||||
// this._headClickFn = $.bind(this.__BOX__, 'click', ev => {
|
||||
// if (ev.target.className === 'md-head-link') {
|
||||
// var ot = ev.target.offsetTop
|
||||
// console.log(ot)
|
||||
// document.documentElement.scrollTop = ot
|
||||
// }
|
||||
// })
|
||||
|
||||
this.__observer = new MutationObserver(_ => {
|
||||
this.__parse__()
|
||||
})
|
||||
// this.__observer = new MutationObserver(_ => {
|
||||
// this.__parse__()
|
||||
// })
|
||||
|
||||
this.__observer.observe(this, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true
|
||||
})
|
||||
// this.__observer.observe(this, {
|
||||
// childList: true,
|
||||
// subtree: true,
|
||||
// characterData: true
|
||||
// })
|
||||
}
|
||||
|
||||
unmount() {
|
||||
$.unbind(this.__BOX__, 'click', this._headClickFn)
|
||||
this.__observer.disconnect()
|
||||
this.clear()
|
||||
// $.unbind(this.__BOX__, 'click', this._headClickFn)
|
||||
// this.__observer.disconnect()
|
||||
// this.clear()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -12,9 +12,11 @@
|
|||
width: 100%;
|
||||
|
||||
.container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
width: calc(100% + 18px);
|
||||
height: calc(100% + 18px);
|
||||
padding: 0 18px 18px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -121,22 +123,22 @@ export default class Scroll {
|
|||
this.__last__ = 0
|
||||
}
|
||||
|
||||
get scrollTop() {
|
||||
return this.__BOX__.scrollTop
|
||||
}
|
||||
// get scrollTop() {
|
||||
// return this.__BOX__.scrollTop
|
||||
// }
|
||||
|
||||
set scrollTop(n) {
|
||||
n = +n
|
||||
if (n === n) {
|
||||
var { sh, oh, yh } = this.props
|
||||
// set scrollTop(n) {
|
||||
// n = +n
|
||||
// if (n === n) {
|
||||
// var { sh, oh, yh } = this.props
|
||||
|
||||
this.__BOX__.scrollTop = n
|
||||
var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh)
|
||||
this.props.thumbY = fixedY
|
||||
// this.__BOX__.scrollTop = n
|
||||
// var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh)
|
||||
// this.props.thumbY = fixedY
|
||||
|
||||
this.__Y__.style.transform = `translateY(${fixedY}px)`
|
||||
}
|
||||
}
|
||||
// this.__Y__.style.transform = `translateY(${fixedY}px)`
|
||||
// }
|
||||
// }
|
||||
|
||||
get scrollLeft() {
|
||||
return this.__BOX__.scrollLeft
|
||||
|
@ -234,7 +236,7 @@ export default class Scroll {
|
|||
}
|
||||
|
||||
mounted() {
|
||||
// 初始化滚动条的位置和长度
|
||||
/* // 初始化滚动条的位置和长度
|
||||
this._initFn = $.bind(this.__BOX__, 'mouseenter', ev => {
|
||||
// 禁用状态, 不允许滚动
|
||||
if (this.disabled) {
|
||||
|
@ -272,6 +274,7 @@ export default class Scroll {
|
|||
|
||||
this.__X__.style.width = xw + 'px'
|
||||
this.__Y__.style.height = yh + 'px'
|
||||
this._active = true
|
||||
})
|
||||
|
||||
this._inactiveFn = $.bind(this.__BOX__, 'mouseleave', ev => {
|
||||
|
@ -478,11 +481,11 @@ export default class Scroll {
|
|||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true
|
||||
})
|
||||
}) */
|
||||
}
|
||||
|
||||
unmount() {
|
||||
this.__observer.disconnect()
|
||||
// this.__observer.disconnect()
|
||||
|
||||
$.unbind(this.__BOX__, 'mouseenter', this._initFn)
|
||||
$.unbind(this.__BOX__, 'mouseleave', this._inactiveFn)
|
||||
|
|
Reference in New Issue