重构scroll组件

src/index.js

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

src/markd/core.js

@@ -132,7 +132,7 @@ const Decoder = {
         if (level === 1) {
           return `<h1>${m2}</h1>`
         } 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}>`
         }
       })
     }

src/markd/index.wc

@@ -1,5 +1,5 @@
 <template>
-  <div><slot /></div>
+  <slot />
 </template>
 
 <style lang="scss">
@@ -9,6 +9,21 @@
   color: var(--color-dark-1);
   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 {
   text-decoration: underline;
@@ -195,9 +210,8 @@ export default class Markd {
 
   __init__() {
     /* render */
-
-    var elem = this.root.children[1]
-    this.__BOX__ = elem
+    // var elem = this.root.children[1]
+    // this.__BOX__ = elem
   }
 
   __parse__() {
@@ -207,8 +221,8 @@ export default class Markd {
 
   set value(txt) {
     if (txt) {
-      this.__BOX__.innerHTML = markd(txt)
-      this.textContent = ''
+      this.innerHTML = markd(txt)
+      // this.textContent = ''
     }
   }
 
@@ -220,28 +234,29 @@ export default class Markd {
   mounted() {
     this.__parse__()
 
-    this._headClickFn = $.bind(this.__BOX__, 'click', ev => {
-      if (ev.target.className === 'md-head-link') {
-        var ot = ev.target.offsetTop
-        document.documentElement.scrollTop = ot
-      }
-    })
+    // this._headClickFn = $.bind(this.__BOX__, 'click', ev => {
+    //   if (ev.target.className === 'md-head-link') {
+    //     var ot = ev.target.offsetTop
+    //     console.log(ot)
+    //     document.documentElement.scrollTop = ot
+    //   }
+    // })
 
-    this.__observer = new MutationObserver(_ => {
-      this.__parse__()
-    })
+    // this.__observer = new MutationObserver(_ => {
+    //   this.__parse__()
+    // })
 
-    this.__observer.observe(this, {
-      childList: true,
-      subtree: true,
-      characterData: true
-    })
+    // this.__observer.observe(this, {
+    //   childList: true,
+    //   subtree: true,
+    //   characterData: true
+    // })
   }
 
   unmount() {
-    $.unbind(this.__BOX__, 'click', this._headClickFn)
-    this.__observer.disconnect()
-    this.clear()
+    // $.unbind(this.__BOX__, 'click', this._headClickFn)
+    // this.__observer.disconnect()
+    // this.clear()
   }
 }
 </script>

src/scroll/index.wc

@@ -12,9 +12,11 @@
   width: 100%;
 
   .container {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
+    overflow: auto;
+    position: relative;
+    width: calc(100% + 18px);
+    height: calc(100% + 18px);
+    padding: 0 18px 18px 0;
   }
 }
 
@@ -121,22 +123,22 @@ export default class Scroll {
     this.__last__ = 0
   }
 
-  get scrollTop() {
-    return this.__BOX__.scrollTop
-  }
+  // get scrollTop() {
+  //   return this.__BOX__.scrollTop
+  // }
 
-  set scrollTop(n) {
-    n = +n
-    if (n === n) {
-      var { sh, oh, yh } = this.props
+  // set scrollTop(n) {
+  //   n = +n
+  //   if (n === n) {
+  //     var { sh, oh, yh } = this.props
 
-      this.__BOX__.scrollTop = n
-      var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh)
-      this.props.thumbY = fixedY
+  //     this.__BOX__.scrollTop = n
+  //     var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh)
+  //     this.props.thumbY = fixedY
 
-      this.__Y__.style.transform = `translateY(${fixedY}px)`
-    }
-  }
+  //     this.__Y__.style.transform = `translateY(${fixedY}px)`
+  //   }
+  // }
 
   get scrollLeft() {
     return this.__BOX__.scrollLeft
@@ -234,7 +236,7 @@ export default class Scroll {
   }
 
   mounted() {
-    // 初始化滚动条的位置和长度
+    /*    // 初始化滚动条的位置和长度
     this._initFn = $.bind(this.__BOX__, 'mouseenter', ev => {
       // 禁用状态, 不允许滚动
       if (this.disabled) {
@@ -272,6 +274,7 @@ export default class Scroll {
 
       this.__X__.style.width = xw + 'px'
       this.__Y__.style.height = yh + 'px'
+      this._active = true
     })
 
     this._inactiveFn = $.bind(this.__BOX__, 'mouseleave', ev => {
@@ -478,11 +481,11 @@ export default class Scroll {
       childList: true,
       subtree: true,
       characterData: true
-    })
+    }) */
   }
 
   unmount() {
-    this.__observer.disconnect()
+    // this.__observer.disconnect()
 
     $.unbind(this.__BOX__, 'mouseenter', this._initFn)
     $.unbind(this.__BOX__, 'mouseleave', this._inactiveFn)