修正滚动条计算
parent
0a35c612ee
commit
a6b0a2226c
|
@ -21,6 +21,7 @@ const ESBUILD_OPTIONS = {
|
|||
format: 'esm'
|
||||
}
|
||||
const BASE_SCSS = `
|
||||
@use "sass:math";
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;padding: 0;
|
||||
|
|
|
@ -21,6 +21,7 @@ const ESBUILD_OPTIONS = {
|
|||
minify: true
|
||||
}
|
||||
const BASE_SCSS = `
|
||||
@use "sass:math";
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;padding: 0;
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -80,6 +80,7 @@ a {
|
|||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
border: 1px solid #e7e8eb;
|
||||
border-radius: inherit;
|
||||
font-size: 14px;
|
||||
|
@ -126,6 +127,7 @@ wc-scroll {
|
|||
flex: 1;
|
||||
}
|
||||
.editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px 8px;
|
||||
outline: none;
|
||||
|
@ -575,14 +577,8 @@ export default class Editor {
|
|||
.replace(/\t/g, ' ')
|
||||
.replace(/<\/?(meta|link|script)[^>]*?>/g, '')
|
||||
.replace(/<!--[\w\W]*?-->/g, '')
|
||||
.replace(
|
||||
/<a[^>]*? href\s?=\s?["']?([^"']*)["']?[^>]*?>/g,
|
||||
'<a href="$1">'
|
||||
)
|
||||
.replace(
|
||||
/<img[^>]*? src\s?=\s?["']?([^"']*)["']?[^>]*?>/g,
|
||||
'<img src="$1">'
|
||||
)
|
||||
.replace(/<a[^>]*? href\s?=\s?["']?([^"']*)["']?[^>]*?>/g, '<a href="$1">')
|
||||
.replace(/<img[^>]*? src\s?=\s?["']?([^"']*)["']?[^>]*?>/g, '<img src="$1">')
|
||||
.replace(/<(?!a|img)([\w\-]+)[^>]*>/g, '<$1>')
|
||||
.replace(/<xml[^>]*?>[\w\W]*?<\/xml>/g, '')
|
||||
.replace(/<style>[\w\W]*?<\/style>/g, '')
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import './avatar/index'
|
||||
import './badge/index'
|
||||
import './base/row'
|
||||
// import './badge/index'
|
||||
import './code/index'
|
||||
import './color/index'
|
||||
import './drag/index'
|
||||
|
|
|
@ -22,9 +22,8 @@
|
|||
|
||||
.wrapper {
|
||||
overflow: auto;
|
||||
width: calc(100% + 18px);
|
||||
height: calc(100% + 18px);
|
||||
padding: 0 18px 18px 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -242,24 +241,41 @@ export default class Scroll {
|
|||
// 需要减去因为隐藏原生滚动条修正的18像素
|
||||
let width = this.offsetWidth
|
||||
let height = this.offsetHeight
|
||||
let scrollWidth = this.__BOX__.scrollWidth - 18
|
||||
let scrollHeight = this.__BOX__.scrollHeight - 18
|
||||
let yBar = (height * (height / scrollHeight)) >> 0 // 滚动条的高度
|
||||
let xBar = (width * (width / scrollWidth)) >> 0 // 滚动条的宽度
|
||||
let clientWidth = this.__BOX__.clientWidth
|
||||
let clientHeight = this.__BOX__.clientHeight
|
||||
let scrollWidth = this.__BOX__.scrollWidth
|
||||
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
|
||||
this.__BOX__.parentNode.scrollTop = 0
|
||||
|
||||
// 修复因为内容的margin导致滚动条取值不准确的bug
|
||||
if (this.__BOX__.clientHeight - height !== 18) {
|
||||
scrollHeight += 18 - (this.__BOX__.clientHeight - height)
|
||||
yBar = (height * (height / scrollHeight)) >> 0
|
||||
}
|
||||
if (this.__BOX__.clientWidth - width !== 18) {
|
||||
scrollWidth += 18 - (this.__BOX__.clientWidth - width)
|
||||
xBar = (width * (width / scrollWidth)) >> 0
|
||||
}
|
||||
|
||||
if (yBar < 50) {
|
||||
yBar = 50
|
||||
|
@ -294,16 +310,7 @@ export default class Scroll {
|
|||
return
|
||||
}
|
||||
var { axis } = this.props
|
||||
var {
|
||||
xBar,
|
||||
yBar,
|
||||
thumbX,
|
||||
thumbY,
|
||||
scrollHeight,
|
||||
scrollWidth,
|
||||
width,
|
||||
height
|
||||
} = this.state
|
||||
var { xBar, yBar, thumbX, thumbY, scrollHeight, scrollWidth, width, height } = this.state
|
||||
var currTop = this.__BOX__.scrollTop
|
||||
var currLeft = this.__BOX__.scrollLeft
|
||||
|
||||
|
@ -394,9 +401,9 @@ export default class Scroll {
|
|||
$.bind(document, 'mouseup', mouseupFn)
|
||||
})
|
||||
|
||||
this.__observer1 = new ResizeObserver(this._initFn)
|
||||
// this.__observer1 = new ResizeObserver(this._initFn)
|
||||
this.__observer2 = new MutationObserver(this._initFn)
|
||||
this.__observer1.observe(this.__BOX__)
|
||||
// this.__observer1.observe(this.__BOX__)
|
||||
this.__observer2.observe(this, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
|
|
Reference in New Issue