From 995bca261efc28d8219b0ee36b2cf61fb9d3ab99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Wed, 16 Mar 2022 01:00:37 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/button.md |   9 +-
 example/docs/zh-CN/guide/changelog.md   |  16 +-
 example/src/components/LayAnchor.vue    |   4 -
 src/component/datePicker/index.vue      |   6 +-
 src/component/scroll/index.vue          | 277 +++++++++++++++++++++++-
 src/theme/index.less                    |   9 +-
 6 files changed, 289 insertions(+), 32 deletions(-)

diff --git a/example/docs/zh-CN/components/button.md b/example/docs/zh-CN/components/button.md
index 57b74a1b..9e59fb96 100644
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@@ -127,7 +127,7 @@ export default {
   <lay-button type="normal" radius>百搭按钮</lay-button>
   <lay-button type="warm" radius>暖色按钮</lay-button>
   <lay-button type="danger" radius>警告按钮</lay-button>
-  <lay-button @click="onClick" disabled radius>禁用按钮</lay-button>
+  <lay-button disabled radius>禁用按钮</lay-button>
 </template>
 
 <script>
@@ -136,12 +136,7 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const onClick = () => {
-      console.log("click event");
-    }
-
     return {
-      onClick
     }
   }
 }
@@ -280,7 +275,7 @@ import { ref } from 'vue'
 export default {
   setup() {
     
-    const clickHandle = function() {
+    const clickHandle = () => {
       console.log('点击事件')
     }
 
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 3fcbbf06..5366c3f7 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -10,8 +10,22 @@
 ::: demo
 <template>
 <lay-timeline>
+  <lay-timeline-item title="0.4.0">
+    <ul> 
+      <a name="0-4-0"> </a> 
+      <li> 
+        <h3>0.4.0 <span class="layui-badge-rim">2022-03-08</span></h3> 
+        <ul>
+          <li>[重构] scroll 虚拟滚动, 代替浏览器原生滚动。</li> 
+          <li>[新增] date-picker 日期选择组件, 支持 年月,日期,时间。</li>
+          <li>[修复] slider 滑块组件, 默认 step 值异常。</li>
+          <li>[升级] layer-vue 1.3.10 版本。</li>
+        </ul> 
+      </li>
+    </ul>
+  </lay-timeline-item>
   <lay-timeline-item title="0.3.x">
-      <ul> 
+    <ul> 
       <a name="0-3-9"></a> 
       <li> 
         <h3>0.3.9 <span class="layui-badge-rim">2022-03-08</span></h3> 
diff --git a/example/src/components/LayAnchor.vue b/example/src/components/LayAnchor.vue
index d32891b6..8ea3dda3 100644
--- a/example/src/components/LayAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@@ -10,9 +10,6 @@
         <lay-icon :type="iconType" size="40"> </lay-icon>
       </lay-button>
     </div>
-    <lay-scroll
-      class="layui-side-scroll-bar layui-side-scroll::-webkit-scrollbar"
-    >
       <ul>
         <li
           v-for="(anchor, index) in anchorList"
@@ -29,7 +26,6 @@
           >
         </li>
       </ul>
-    </lay-scroll>
   </aside>
 </template>
 <script setup lang="ts">
diff --git a/src/component/datePicker/index.vue b/src/component/datePicker/index.vue
index c1234f26..ac3897c2 100644
--- a/src/component/datePicker/index.vue
+++ b/src/component/datePicker/index.vue
@@ -261,9 +261,9 @@ const MONTH_NAME = [
 ];
 
 const hms = ref({
-  hh: "23",
-  mm: "59",
-  ss: "59",
+  hh: "00",
+  mm: "00",
+  ss: "00",
   insertEls: [
     {
       count: 24,
diff --git a/src/component/scroll/index.vue b/src/component/scroll/index.vue
index 6e7fd0bd..ef6ee282 100644
--- a/src/component/scroll/index.vue
+++ b/src/component/scroll/index.vue
@@ -1,13 +1,272 @@
-<script lang="ts">
-export default {
-  name: "LayScroll",
-};
-</script>
-
-<script setup lang="ts"></script>
 
 <template>
-  <div class="layui-side-scroll">
-    <slot></slot>
+  <div
+    class="scrollbar-box"
+    :class="{ hide: winWidth < 500 }"
+    :style="{ height: height }"
+  >
+    <div class="scrollbar-y">
+      <div ref="scrollRef" class="scroll-wrap" @scroll="onMosewheel">
+        <slot></slot>
+      </div>
+      <div
+        ref="barRef"
+        class="scrollbar-track"
+        :style="{
+          backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor
+        }"
+      >
+        <!--
+        没有滑块方式，背景色透明：使用v-show窗口变大，滑块不出现，所以使用背景色控制
+        backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
+       -->
+        <div
+          :style="{
+            height: barHeight + 'px',
+            width: scrollWidth + 'px',
+            transform: 'translateY(' + translateY + 'px)',
+            backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor
+          }"
+          class="scrollbar-thumb"
+          @mousedown.stop.prevent="moveStart"
+        ></div>
+      </div>
+    </div>
   </div>
 </template>
+ 
+<script>
+import {
+  defineComponent,
+  toRefs,
+  onMounted,
+  nextTick,
+  reactive,
+  onUnmounted
+} from 'vue'
+export default defineComponent({
+  name: 'LayScroll',
+  props: {
+    height: {
+      //:height="'200px'"
+      type: String,
+      default: '100%'
+    },
+    slotColor: {
+      //滑块槽颜色 :slotColor="'red'"
+      type: String,
+      default: 'rgba(0,0,0,0)'
+    },
+    scrollColor: {
+      //滑块颜色  :scrollColor="'red'"
+      type: String,
+      default: '#eeeeee'
+    },
+    scrollWidth: {
+      //滑块宽度 :scrollWidth="7"
+      type: Number,
+      default: 6
+    }
+  },
+  setup(props, ctx) {
+    const data = reactive({
+      scrollRef: null, // 内容盒子
+      barRef: null, // 滚动条轨道
+      translateY: 0, // 滚动块平移的距离
+      heightPre: 0, // 可视高度和内容高度比
+      barHeight: 0, // 滑块高度
+      winWidth: document.body.clientWidth //初始化浏览器页面宽度
+    })
+    let time = null // 定时器
+    let isMove = false // 判断鼠标是否点击滑块（为松开）
+    let moveClientY = 0 // 鼠标点击滑块时，相对滑块的位置
+    let trackHeight = 0 // 滚动条轨道高度
+    let wrapHeight = 0 // 容器高度（可视高度）
+    let wrapContentHeight = 0 // 内容高度（可滚动内容的高度）
+ 
+    // 页面挂载后计算滚动条
+    onMounted(() => {
+      monitorWindow() //监听窗口尺寸
+      monitorScrollBar() //监听内容元素尺寸
+      nextTick(() => {
+        //dom渲染后
+        calculationLength() //初始化延迟更新滚动条
+      })
+    })
+    // 页面卸载清除定时器
+    onUnmounted(() => {
+      window.clearInterval(time)
+      time = null
+    })
+    // 监听页面尺寸改变计算滚动条
+    const monitorWindow = function () {
+      let time //定时器，防抖，窗口持续变化，延迟更新滚动条
+      window.addEventListener('resize', () => {
+        data.winWidth = document.body.clientWidth //页面改变监听宽度控制移动端隐藏滚动条
+        clearTimeout(time)
+        time = setTimeout(() => {
+          //页面宽度变化继续监听，如果小于500就关闭自定义滚动条
+          // console.log("浏览器窗口变化更新滚动条");
+          initScrollListner()
+        }, 500)
+      })
+    }
+
+    //监听内容元素尺寸变化
+    const monitorScrollBar = function () {
+      var monitorUl = data.scrollRef.children[0]
+      // var monitorDiv= document;    // 监听document
+      let MutationObserver =
+        window.MutationObserver ||
+        window.WebKitMutationObserver ||
+        window.MozMutationObserver
+      let observer = new MutationObserver(function (mutations) {
+        // console.log("内容元素变化更新滚动条");
+        initScrollListner()
+      })
+ 
+      // childList  观察子节点变动
+      // 监听子节点增加或者内容撑起的尺寸
+      observer.observe(monitorUl, {
+        attributes: true,
+        childList: true
+      })
+    }
+ 
+    // 初始化延迟监听滚动条
+    const calculationLength = function () {
+      // 直接执行initScrollListner函数，获取滚动条长度部准确
+      // 因为页面渲染有延迟，获取dom元素需要延迟
+      // 每间隔10毫秒更新滑块长度
+      time = setInterval(() => {
+        // 计算滚动条长度
+        initScrollListner()
+      }, 50)
+      // 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
+      setTimeout(() => {
+        window.clearInterval(time)
+        time = null
+      }, 2000)
+    }
+    // 计算滚动条高度
+    const initScrollListner = function () {
+      let scroll = data.scrollRef
+      let bar = data.barRef
+      // scroll有时候拿不到元素，要判断一下
+      if (scroll) {
+        wrapContentHeight = scroll.scrollHeight
+        wrapHeight = scroll.clientHeight
+        trackHeight = bar.clientHeight
+        // console.log(wrapContentHeight ,wrapHeight);
+        // 容器高度 / 内容高度   100 150
+        data.heightPre = wrapHeight / wrapContentHeight
+        // 滑动块的高度 根据 容器和内容的比  乘以 滚动轨道 计算出 滑动块的高度
+        data.barHeight = data.heightPre * trackHeight
+      }
+    }
+    // 内容滚动时，计算滑块移动的距离
+    const onMosewheel = function (e) {
+      // scrollTop页面顶部滚出的高度
+      // offsetHeight页面可视区域高度
+      // scrollHeight页面正文全文高度
+      // data.translateY滚动块平移的距离
+      data.translateY = e.target.scrollTop * data.heightPre
+      if (data.translateY == 0) {
+        // 到达顶部
+        arrive('top')
+      } else if (
+        e.target.scrollTop + e.target.offsetHeight ==
+        e.target.scrollHeight
+      ) {
+        // 滚出高度 + 可视区域高度 == 内容高度
+        arrive('bottom')
+      }
+    }
+    // 到达顶部或者底部通知父级元素
+    const arrive = function name(tb) {
+      ctx.emit('arrive', tb)
+    }
+    // 鼠标点击滑块时
+    const moveStart = function (e) {
+      isMove = true
+      // clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置
+      // data.translateY 滚动块平移的距离
+      // moveClientY 鼠标点击滑块时，相对滑块的位置
+      moveClientY = e.clientY - data.translateY
+      moveTo() //移动时
+      moveEnd() //鼠标松开时
+    }
+    // 鼠标移动，改变thumb的位置以及容器scrollTop的位置
+    const moveTo = function () {
+      document.onmousemove = (e) => {
+        // 移动时候判断是不是松开，松开就不在执行滑块移动操作
+        if (isMove) {
+          // 移动滑块时，判断时候到达顶部或者底部
+          if (e.clientY - moveClientY > trackHeight - data.barHeight) {
+            // 滑块到达  底部  就不在改变滑块translateY值
+            data.translateY = trackHeight - data.barHeight
+          } else if (e.clientY - moveClientY < 0) {
+            // 滑块到达  顶部  就不在改变滑块translateY值
+            data.translateY = 0
+          } else {
+            //改变滑块位置
+            data.translateY = e.clientY - moveClientY
+          }
+          // 计算出内容盒子滚出顶部的距离
+          data.scrollRef.scrollTop = data.translateY / data.heightPre
+        }
+      }
+    }
+    // 鼠标从滑块松开时，不在监听滑块移动操作
+    const moveEnd = function () {
+      document.onmouseup = (e) => {
+        if (isMove) {
+          isMove = false
+        }
+      }
+    }
+ 
+    return {
+      ...toRefs(data),
+      onMosewheel,
+      moveStart
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.scrollbar-box {
+  height: 100%;
+  overflow: hidden !important;;
+}
+.scrollbar-y {
+  position: relative;
+  height: 100%;
+  margin-right: -17px; //遮住浏览器自带滚动条
+  .scroll-wrap {
+    height: 100%;
+    overflow-y: scroll;
+  }
+  .scrollbar-track {
+    position: absolute;
+    top: 0;
+    right: 17px;
+    bottom: 0;
+    border-radius: 8px;
+    z-index: 20;
+    .scrollbar-thumb {
+      margin: 0 auto;
+      border-radius: 6px;
+      cursor: default;
+    }
+  }
+}
+//移动端隐藏自定义滚动条
+.hide.scrollbar-box .scrollbar-track {
+  display: none;
+}
+//移动端显示原生滑块
+.hide.scrollbar-box .scrollbar-y {
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/theme/index.less b/src/theme/index.less
index f36b3c9e..e354769c 100644
--- a/src/theme/index.less
+++ b/src/theme/index.less
@@ -34,8 +34,7 @@ hr {
 }
 
 .layui-layout-body,
-.layui-side,
-.layui-side-scroll {
+.layui-side {
   overflow-x: hidden;
 }
 
@@ -268,12 +267,6 @@ a cite {
   margin: 0 auto;
 }
 
-.layui-side-scroll {
-  position: relative;
-  width: 220px;
-  height: 100%;
-}
-
 .layui-logo {
   left: 0;
   top: 0;