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

重构scroll组件

old
宇天 2021-04-29 19:05:18 +08:00
parent c8d6dc664b
commit f17481753d
4 changed files with 79 additions and 43 deletions

18
src/index.js Normal file
View File

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

View File

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

View File

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

View File

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