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
yutent 2022-01-20 15:16:57 +08:00
parent 0a35c612ee
commit a6b0a2226c
7 changed files with 169 additions and 36 deletions

View File

@ -21,6 +21,7 @@ const ESBUILD_OPTIONS = {
format: 'esm' format: 'esm'
} }
const BASE_SCSS = ` const BASE_SCSS = `
@use "sass:math";
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0;padding: 0; margin: 0;padding: 0;

View File

@ -21,6 +21,7 @@ const ESBUILD_OPTIONS = {
minify: true minify: true
} }
const BASE_SCSS = ` const BASE_SCSS = `
@use "sass:math";
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0;padding: 0; margin: 0;padding: 0;

34
src/base/col.wc Normal file
View File

@ -0,0 +1,34 @@
<template>
<slot />
</template>
<style lang="scss">
:host {
display: flex;
width: 100%;
}
@for $i from 1 to 25 {
:host([span='#{$i}']) {
width: math.div($i * 100, 24) + 0%;
}
}
@for $i from 1 to 25 {
:host([offset='#{$i}']) {
margin-left: math.div($i * 100, 24) + 0%;
}
}
</style>
<script>
export default class Col {
props = {
span: 24,
offset: 0,
push: 0
}
__init__() {
/* render */
}
}
</script>

92
src/base/row.wc Normal file
View File

@ -0,0 +1,92 @@
<template>
<div class="row"><slot /></div>
</template>
<style lang="scss">
:host {
display: flex;
width: 100%;
}
.row {
display: flex;
width: 100%;
}
:host([justify='center']) {
.row {
justify-content: center;
}
}
:host([justify='end']) {
.row {
justify-content: flex-end;
}
}
:host([justify='space-around']) {
.row {
justify-content: space-around;
}
}
:host([justify='space-between']) {
.row {
justify-content: space-between;
}
}
:host([align='center']) {
.row {
align-items: center;
}
}
:host([align='end']) {
.row {
align-items: flex-end;
}
}
</style>
<script>
import './col'
export default class Row {
props = {
gutter: 0,
justify: '',
align: ''
}
__init__() {
/* render */
this.__ROW__ = this.root.children[1]
}
_updateChildrenStat() {
var { gutter } = this.props
Array.from(this.children).forEach(it => {
if (it.tagName === 'WC-COL') {
if (it.root) {
it.style.cssText = `padding:0 ${gutter / 2}px`
}
} else {
it.remove()
}
})
}
watch() {
switch (name) {
case 'gutter':
val = +val
if (val > 0) {
this.props.gutter = val
this.__ROW__.style.cssText = `width:calc(100% + ${val}px);margin-left:${val}px`
} else {
this.props.gutter = 0
this.__ROW__.removeAttribute('style')
}
this._updateChildrenStat()
break
}
}
}
</script>

View File

@ -80,6 +80,7 @@ a {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
border: 1px solid #e7e8eb; border: 1px solid #e7e8eb;
border-radius: inherit; border-radius: inherit;
font-size: 14px; font-size: 14px;
@ -126,6 +127,7 @@ wc-scroll {
flex: 1; flex: 1;
} }
.editor { .editor {
width: 100%;
height: 100%; height: 100%;
padding: 5px 8px; padding: 5px 8px;
outline: none; outline: none;
@ -575,14 +577,8 @@ export default class Editor {
.replace(/\t/g, ' ') .replace(/\t/g, ' ')
.replace(/<\/?(meta|link|script)[^>]*?>/g, '') .replace(/<\/?(meta|link|script)[^>]*?>/g, '')
.replace(/<!--[\w\W]*?-->/g, '') .replace(/<!--[\w\W]*?-->/g, '')
.replace( .replace(/<a[^>]*? href\s?=\s?["']?([^"']*)["']?[^>]*?>/g, '<a href="$1">')
/<a[^>]*? href\s?=\s?["']?([^"']*)["']?[^>]*?>/g, .replace(/<img[^>]*? src\s?=\s?["']?([^"']*)["']?[^>]*?>/g, '<img src="$1">')
'<a href="$1">'
)
.replace(
/<img[^>]*? src\s?=\s?["']?([^"']*)["']?[^>]*?>/g,
'<img src="$1">'
)
.replace(/<(?!a|img)([\w\-]+)[^>]*>/g, '<$1>') .replace(/<(?!a|img)([\w\-]+)[^>]*>/g, '<$1>')
.replace(/<xml[^>]*?>[\w\W]*?<\/xml>/g, '') .replace(/<xml[^>]*?>[\w\W]*?<\/xml>/g, '')
.replace(/<style>[\w\W]*?<\/style>/g, '') .replace(/<style>[\w\W]*?<\/style>/g, '')

View File

@ -1,5 +1,7 @@
import './avatar/index' import './avatar/index'
import './badge/index' import './badge/index'
import './base/row'
// import './badge/index'
import './code/index' import './code/index'
import './color/index' import './color/index'
import './drag/index' import './drag/index'

View File

@ -22,9 +22,8 @@
.wrapper { .wrapper {
overflow: auto; overflow: auto;
width: calc(100% + 18px); width: 100%;
height: calc(100% + 18px); height: 100%;
padding: 0 18px 18px 0;
} }
} }
@ -242,24 +241,41 @@ export default class Scroll {
// 需要减去因为隐藏原生滚动条修正的18像素 // 需要减去因为隐藏原生滚动条修正的18像素
let width = this.offsetWidth let width = this.offsetWidth
let height = this.offsetHeight let height = this.offsetHeight
let scrollWidth = this.__BOX__.scrollWidth - 18 let clientWidth = this.__BOX__.clientWidth
let scrollHeight = this.__BOX__.scrollHeight - 18 let clientHeight = this.__BOX__.clientHeight
let yBar = (height * (height / scrollHeight)) >> 0 // 滚动条的高度 let scrollWidth = this.__BOX__.scrollWidth
let xBar = (width * (width / scrollWidth)) >> 0 // 滚动条的宽度 let scrollHeight = this.__BOX__.scrollHeight
let yBar = 50 // 滚动条的高度
let xBar = 50 // 滚动条的宽度
let style = ''
console.log(width, height, clientWidth, clientHeight, scrollWidth, scrollHeight)
// 高度超出, 说明出现横向滚动条
if (scrollHeight > clientHeight) {
// width - clientWidth 等于滚动条的宽度
style += `width:${width + (width - clientWidth)}px;`
}
if (scrollWidth > clientWidth) {
// height - clientHeight 等于滚动条的宽度
style += `height:${height + (height - clientHeight)}px;`
}
// 需要修正视图容器, 修正完之后, 需要重新获取滚动宽高
if (style) {
this.__BOX__.style.cssText = style
scrollWidth = this.__BOX__.scrollWidth
scrollHeight = this.__BOX__.scrollHeight
}
// 修正由于未知原因,导致父容器产生滚动距离 // 修正由于未知原因,导致父容器产生滚动距离
// 导致的内容被遮挡的bug // 导致的内容被遮挡的bug
this.__BOX__.parentNode.scrollTop = 0 this.__BOX__.parentNode.scrollTop = 0
// 修复因为内容的margin导致滚动条取值不准确的bug
if (this.__BOX__.clientHeight - height !== 18) {
scrollHeight += 18 - (this.__BOX__.clientHeight - height)
yBar = (height * (height / scrollHeight)) >> 0 yBar = (height * (height / scrollHeight)) >> 0
}
if (this.__BOX__.clientWidth - width !== 18) {
scrollWidth += 18 - (this.__BOX__.clientWidth - width)
xBar = (width * (width / scrollWidth)) >> 0 xBar = (width * (width / scrollWidth)) >> 0
}
if (yBar < 50) { if (yBar < 50) {
yBar = 50 yBar = 50
@ -294,16 +310,7 @@ export default class Scroll {
return return
} }
var { axis } = this.props var { axis } = this.props
var { var { xBar, yBar, thumbX, thumbY, scrollHeight, scrollWidth, width, height } = this.state
xBar,
yBar,
thumbX,
thumbY,
scrollHeight,
scrollWidth,
width,
height
} = this.state
var currTop = this.__BOX__.scrollTop var currTop = this.__BOX__.scrollTop
var currLeft = this.__BOX__.scrollLeft var currLeft = this.__BOX__.scrollLeft
@ -394,9 +401,9 @@ export default class Scroll {
$.bind(document, 'mouseup', mouseupFn) $.bind(document, 'mouseup', mouseupFn)
}) })
this.__observer1 = new ResizeObserver(this._initFn) // this.__observer1 = new ResizeObserver(this._initFn)
this.__observer2 = new MutationObserver(this._initFn) this.__observer2 = new MutationObserver(this._initFn)
this.__observer1.observe(this.__BOX__) // this.__observer1.observe(this.__BOX__)
this.__observer2.observe(this, { this.__observer2.observe(this, {
childList: true, childList: true,
subtree: true, subtree: true,