重构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) {
|
if (level === 1) {
|
||||||
return `<h1>${m2}</h1>`
|
return `<h1>${m2}</h1>`
|
||||||
} else {
|
} 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>
|
<template>
|
||||||
<div><slot /></div>
|
<slot />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@ -9,6 +9,21 @@
|
||||||
color: var(--color-dark-1);
|
color: var(--color-dark-1);
|
||||||
font-size: 14px;
|
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 {
|
a {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
@ -195,9 +210,8 @@ export default class Markd {
|
||||||
|
|
||||||
__init__() {
|
__init__() {
|
||||||
/* render */
|
/* render */
|
||||||
|
// var elem = this.root.children[1]
|
||||||
var elem = this.root.children[1]
|
// this.__BOX__ = elem
|
||||||
this.__BOX__ = elem
|
|
||||||
}
|
}
|
||||||
|
|
||||||
__parse__() {
|
__parse__() {
|
||||||
|
@ -207,8 +221,8 @@ export default class Markd {
|
||||||
|
|
||||||
set value(txt) {
|
set value(txt) {
|
||||||
if (txt) {
|
if (txt) {
|
||||||
this.__BOX__.innerHTML = markd(txt)
|
this.innerHTML = markd(txt)
|
||||||
this.textContent = ''
|
// this.textContent = ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -220,28 +234,29 @@ export default class Markd {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.__parse__()
|
this.__parse__()
|
||||||
|
|
||||||
this._headClickFn = $.bind(this.__BOX__, 'click', ev => {
|
// this._headClickFn = $.bind(this.__BOX__, 'click', ev => {
|
||||||
if (ev.target.className === 'md-head-link') {
|
// if (ev.target.className === 'md-head-link') {
|
||||||
var ot = ev.target.offsetTop
|
// var ot = ev.target.offsetTop
|
||||||
document.documentElement.scrollTop = ot
|
// console.log(ot)
|
||||||
}
|
// document.documentElement.scrollTop = ot
|
||||||
})
|
// }
|
||||||
|
// })
|
||||||
|
|
||||||
this.__observer = new MutationObserver(_ => {
|
// this.__observer = new MutationObserver(_ => {
|
||||||
this.__parse__()
|
// this.__parse__()
|
||||||
})
|
// })
|
||||||
|
|
||||||
this.__observer.observe(this, {
|
// this.__observer.observe(this, {
|
||||||
childList: true,
|
// childList: true,
|
||||||
subtree: true,
|
// subtree: true,
|
||||||
characterData: true
|
// characterData: true
|
||||||
})
|
// })
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmount() {
|
||||||
$.unbind(this.__BOX__, 'click', this._headClickFn)
|
// $.unbind(this.__BOX__, 'click', this._headClickFn)
|
||||||
this.__observer.disconnect()
|
// this.__observer.disconnect()
|
||||||
this.clear()
|
// this.clear()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -12,9 +12,11 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
overflow: hidden;
|
overflow: auto;
|
||||||
width: 100%;
|
position: relative;
|
||||||
height: 100%;
|
width: calc(100% + 18px);
|
||||||
|
height: calc(100% + 18px);
|
||||||
|
padding: 0 18px 18px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -121,22 +123,22 @@ export default class Scroll {
|
||||||
this.__last__ = 0
|
this.__last__ = 0
|
||||||
}
|
}
|
||||||
|
|
||||||
get scrollTop() {
|
// get scrollTop() {
|
||||||
return this.__BOX__.scrollTop
|
// return this.__BOX__.scrollTop
|
||||||
}
|
// }
|
||||||
|
|
||||||
set scrollTop(n) {
|
// set scrollTop(n) {
|
||||||
n = +n
|
// n = +n
|
||||||
if (n === n) {
|
// if (n === n) {
|
||||||
var { sh, oh, yh } = this.props
|
// var { sh, oh, yh } = this.props
|
||||||
|
|
||||||
this.__BOX__.scrollTop = n
|
// this.__BOX__.scrollTop = n
|
||||||
var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh)
|
// var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh)
|
||||||
this.props.thumbY = fixedY
|
// this.props.thumbY = fixedY
|
||||||
|
|
||||||
this.__Y__.style.transform = `translateY(${fixedY}px)`
|
// this.__Y__.style.transform = `translateY(${fixedY}px)`
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
get scrollLeft() {
|
get scrollLeft() {
|
||||||
return this.__BOX__.scrollLeft
|
return this.__BOX__.scrollLeft
|
||||||
|
@ -234,7 +236,7 @@ export default class Scroll {
|
||||||
}
|
}
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
// 初始化滚动条的位置和长度
|
/* // 初始化滚动条的位置和长度
|
||||||
this._initFn = $.bind(this.__BOX__, 'mouseenter', ev => {
|
this._initFn = $.bind(this.__BOX__, 'mouseenter', ev => {
|
||||||
// 禁用状态, 不允许滚动
|
// 禁用状态, 不允许滚动
|
||||||
if (this.disabled) {
|
if (this.disabled) {
|
||||||
|
@ -272,6 +274,7 @@ export default class Scroll {
|
||||||
|
|
||||||
this.__X__.style.width = xw + 'px'
|
this.__X__.style.width = xw + 'px'
|
||||||
this.__Y__.style.height = yh + 'px'
|
this.__Y__.style.height = yh + 'px'
|
||||||
|
this._active = true
|
||||||
})
|
})
|
||||||
|
|
||||||
this._inactiveFn = $.bind(this.__BOX__, 'mouseleave', ev => {
|
this._inactiveFn = $.bind(this.__BOX__, 'mouseleave', ev => {
|
||||||
|
@ -478,11 +481,11 @@ export default class Scroll {
|
||||||
childList: true,
|
childList: true,
|
||||||
subtree: true,
|
subtree: true,
|
||||||
characterData: true
|
characterData: true
|
||||||
})
|
}) */
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmount() {
|
||||||
this.__observer.disconnect()
|
// this.__observer.disconnect()
|
||||||
|
|
||||||
$.unbind(this.__BOX__, 'mouseenter', this._initFn)
|
$.unbind(this.__BOX__, 'mouseenter', this._initFn)
|
||||||
$.unbind(this.__BOX__, 'mouseleave', this._inactiveFn)
|
$.unbind(this.__BOX__, 'mouseleave', this._inactiveFn)
|
||||||
|
|
Reference in New Issue