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-05-07 14:35:44 +08:00
parent 0f9f6afc4b
commit 7407f3d9ad
3 changed files with 49 additions and 36 deletions

View File

@ -1,12 +1,12 @@
<template>
<div class="code-box">
<header class="title">
<span><i></i><i></i><i></i></span>
<span></span>
<span>
<section><i></i><i></i><i></i></section>
<section></section>
<section>
<wc-icon title="运行" class="act run" is="live"></wc-icon>
<wc-icon title="复制" class="act cp" is="doc"></wc-icon>
</span>
</section>
</header>
<wc-scroll axis="y" class="scoll"></wc-scroll>
</div>
@ -25,7 +25,6 @@
width: 100%;
max-height: 610px;
margin: 10px 0;
padding-bottom: 8px;
border-radius: 3px;
background: #f7f8fb;
color: var(--color-dark-1);
@ -42,19 +41,25 @@
font-size: 14px;
user-select: none;
section {
display: flex;
align-items: center;
}
i {
display: inline-block;
display: block;
width: 12px;
height: 12px;
margin-right: 6px;
border-radius: 50%;
background: var(--color-red-1);
}
i:nth-child(2) {
background: var(--color-orange-1);
}
i:nth-child(3) {
background: var(--color-green-1);
&:nth-child(2) {
background: var(--color-orange-1);
}
&:nth-child(3) {
background: var(--color-green-1);
}
}
.act {
@ -74,9 +79,8 @@
.scoll {
flex: 1;
padding: 5px 0;
padding: 5px 0 0;
line-height: 20px;
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
font-size: 14px;
color: var(--color-dark-1);
cursor: text;
@ -87,6 +91,7 @@
position: relative;
min-height: 20px;
padding: 0 8px 0 45px;
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
white-space: pre-wrap;
word-break: break-word;
@ -131,7 +136,15 @@
:host([exec]) {
.title {
.run {
display: inline-block;
display: block;
}
}
}
:host([hide-copy]) {
.title {
.cp {
display: none;
}
}
}

View File

@ -194,7 +194,7 @@ export default class Scroll {
} else if (moveX > width - xBar) {
moveX = width - xBar
}
this.__BOX__.scrollLeft = moveX
this.__BOX__.scrollLeft = (scrollX - width) * (moveX / (width - xBar))
this.__X__.style.transform = `translateX(${moveX}px)`
return moveX
@ -209,19 +209,17 @@ export default class Scroll {
moveY = height - yBar
}
this.__BOX__.scrollTop = moveY
this.__BOX__.scrollTop = (scrollY - height) * (moveY / (height - yBar))
this.__Y__.style.transform = `translateY(${moveY}px)`
return moveY
}
_fireReachEnd(action = 'reach-bottom') {
var { scrollY, height, delay, disabled } = this.props
var { delay } = this.props
var { scrollY, height } = this.state
var top = this.__BOX__.scrollTop
var now = Date.now()
if (disabled) {
return
}
if (now - this.__last__ > delay) {
if (action === 'reach-bottom') {
if (height + top < scrollY) {
@ -349,11 +347,11 @@ export default class Scroll {
moveY,
mousemoveFn = ev => {
let { thumbY, thumbX } = this.state
if (startX !== null) {
if (startX !== undefined) {
moveX = this._fetchScrollX(thumbX + ev.pageX - startX)
}
if (startY !== null) {
if (startY !== undefined) {
moveY = this._fetchScrollY(thumbY + ev.pageY - startY)
}
},
@ -361,8 +359,8 @@ export default class Scroll {
if (Math.abs(ev.pageY - startY) > this.props.distance) {
this._fireReachEnd(ev.pageY > startY ? 'reach-bottom' : 'reach-top')
}
startX = null
startY = null
startX = undefined
startY = undefined
this.state.thumbX = moveX || 0
this.state.thumbY = moveY || 0
delete this._active
@ -370,7 +368,7 @@ export default class Scroll {
$.unbind(document, 'mouseup', mouseupFn)
}
$.bind(this.__Y__, 'mousedown', ev => {
this._yBarFn = $.bind(this.__Y__, 'mousedown', ev => {
startY = ev.pageY
this._active = true
@ -379,7 +377,7 @@ export default class Scroll {
$.bind(document, 'mouseup', mouseupFn)
})
$.bind(this.__X__, 'mousedown', ev => {
this._xBarFn = $.bind(this.__X__, 'mousedown', ev => {
startX = ev.pageX
this._active = true
@ -387,18 +385,20 @@ export default class Scroll {
$.bind(document, 'mouseup', mouseupFn)
})
// this.__observer = new MutationObserver(this._initFn)
// this.__observer.observe(this, {
// childList: true,
// subtree: true,
// attributeFilter: ['style']
// })
this.__observer = new MutationObserver(this._initFn)
this.__observer.observe(this, {
childList: true,
subtree: true,
attributeFilter: ['style']
})
}
unmount() {
// this.__observer.disconnect()
this.__observer.disconnect()
$.unbind(this, 'mouseenter', this._initFn)
$.unbind(this.__X__, 'mousedown', this._xBarFn)
$.unbind(this.__Y__, 'mousedown', this._yBarFn)
$.unbind(this, 'ready', this._initFn)
$.unbind(this.__BOX__, 'scroll', this._scrollFn)
}

View File

@ -92,7 +92,7 @@ export default {
*/
catch(dom, type, fn, phase) {
function fn2(ev) {
ev.stopPropagation()
ev.stopPropagation && ev.stopPropagation()
fn && fn(ev)
}
return this.bind(dom, type, fn2, phase)