修正滚动条计算

build.dev.js

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

build.prod.js

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

src/base/col.wc

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

src/base/row.wc

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

src/editor/index.wc

@@ -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(
+          .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(/<xml[^>]*?>[\w\W]*?<\/xml>/g, '')
           .replace(/<style>[\w\W]*?<\/style>/g, '')

src/index.js

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

src/scroll/index.wc

@@ -22,9 +22,8 @@
 
   .wrapper {
     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像素
       let width = this.offsetWidth
       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
       this.__BOX__.parentNode.scrollTop = 0
 
-      // 修复因为内容的margin导致滚动条取值不准确的bug
+      yBar = (height * (height / scrollHeight)) >> 0
-      if (this.__BOX__.clientHeight - height !== 18) {
+      xBar = (width * (width / scrollWidth)) >> 0
-        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 {
+      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 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,