chore: edit README.en.md

README.en.md

@@ -7,7 +7,7 @@
   <a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
 </p>  
 
-**[🔶 Explore the docs »](http://www.layui-vue.com)**
+**[🔶 Explore the docs »](http://www.layui-vue.com)** **[Join us](https://jq.qq.com/?_wv=1027&k=ffiUQgnE)**
 
 An enterprise-class UI components based on Layui and Vue.
 
@@ -75,4 +75,4 @@ This project follows the [all-contributors](https://github.com/layui-vue/layui-v
 
 ## Licence
 
-Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).
+Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).

README.md

@@ -7,7 +7,7 @@
   <a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
 </p>  
 
-**[🔶 Explore the docs »](http://www.layui-vue.com)**
+**[🔶 Explore the docs »](http://www.layui-vue.com)** **[Join us](https://jq.qq.com/?_wv=1027&k=ffiUQgnE)**
 
 An enterprise-class UI components based on Layui and Vue.
 
@@ -75,4 +75,4 @@ This project follows the [all-contributors](https://github.com/layui-vue/layui-v
 
 ## Licence
 
-Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).
+Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).

example/docs/zh-CN/guide/changelog.md

@@ -16,8 +16,9 @@
       <li> 
         <h3>0.4.0 <span class="layui-badge-rim">2022-03-08</span></h3> 
         <ul>
-          <li>[重构] scroll 虚拟滚动, 代替浏览器原生滚动。</li> 
+          <li>[新增] scroll 虚拟滚动组件。</li> 
-          <li>[新增] date-picker 日期选择组件, 支持 年月,日期,时间。</li>
+          <li>[新增] water-marker 水印组件。</li>
+          <li>[新增] date-picker 日期选择组件, 支持年月, 日期, 时间。</li>
           <li>[修复] slider 滑块组件, 默认 step 值异常。</li>
           <li>[升级] layer-vue 1.3.10 版本。</li>
         </ul> 

example/src/components/LayAnchor.vue

@@ -159,13 +159,6 @@ const throttle = (func: Function, wait: number) => {
 };
 </script>
 <style lang="less" scoped>
-.layui-side-scroll-bar {
-  overflow-y: scroll;
-  max-width: 156px;
-}
-.layui-side-scroll::-webkit-scrollbar {
-  width: 0;
-}
 .lay-aside {
   position: fixed;
   top: 65px;
@@ -270,8 +263,5 @@ const throttle = (func: Function, wait: number) => {
   .lay-aside-list {
     max-width: 68px;
   }
-  .layui-side-scroll-bar {
-    max-width: 68px;
-  }
 }
 </style>

src/component/scroll/index.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div
     class="scrollbar-box"
@@ -13,7 +12,7 @@
         ref="barRef"
         class="scrollbar-track"
         :style="{
-          backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor
+          backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor,
         }"
       >
         <!--
@@ -25,7 +24,7 @@
             height: barHeight + 'px',
             width: scrollWidth + 'px',
             transform: 'translateY(' + translateY + 'px)',
-            backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor
+            backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
           }"
           class="scrollbar-thumb"
           @mousedown.stop.prevent="moveStart"
@@ -34,7 +33,7 @@
     </div>
   </div>
 </template>
- 
+
 <script>
 import {
   defineComponent,
@@ -42,31 +41,31 @@ import {
   onMounted,
   nextTick,
   reactive,
-  onUnmounted
+  onUnmounted,
-} from 'vue'
+} from "vue";
 export default defineComponent({
-  name: 'LayScroll',
+  name: "LayScroll",
   props: {
     height: {
       //:height="'200px'"
       type: String,
-      default: '100%'
+      default: "100%",
     },
     slotColor: {
       //滑块槽颜色 :slotColor="'red'"
       type: String,
-      default: 'rgba(0,0,0,0)'
+      default: "rgba(0,0,0,0)",
     },
     scrollColor: {
       //滑块颜色  :scrollColor="'red'"
       type: String,
-      default: '#eeeeee'
+      default: "#eeeeee",
     },
     scrollWidth: {
       //滑块宽度 :scrollWidth="7"
       type: Number,
-      default: 6
+      default: 6,
-    }
+    },
   },
   setup(props, ctx) {
     const data = reactive({
@@ -75,64 +74,64 @@ export default defineComponent({
       translateY: 0, // 滚动块平移的距离
       heightPre: 0, // 可视高度和内容高度比
       barHeight: 0, // 滑块高度
-      winWidth: document.body.clientWidth //初始化浏览器页面宽度
+      winWidth: document.body.clientWidth, //初始化浏览器页面宽度
-    })
+    });
-    let time = null // 定时器
+    let time = null; // 定时器
-    let isMove = false // 判断鼠标是否点击滑块（为松开）
+    let isMove = false; // 判断鼠标是否点击滑块（为松开）
-    let moveClientY = 0 // 鼠标点击滑块时，相对滑块的位置
+    let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置
-    let trackHeight = 0 // 滚动条轨道高度
+    let trackHeight = 0; // 滚动条轨道高度
-    let wrapHeight = 0 // 容器高度（可视高度）
+    let wrapHeight = 0; // 容器高度（可视高度）
-    let wrapContentHeight = 0 // 内容高度（可滚动内容的高度）
+    let wrapContentHeight = 0; // 内容高度（可滚动内容的高度）
- 
+
     // 页面挂载后计算滚动条
     onMounted(() => {
-      monitorWindow() //监听窗口尺寸
+      monitorWindow(); //监听窗口尺寸
-      monitorScrollBar() //监听内容元素尺寸
+      monitorScrollBar(); //监听内容元素尺寸
       nextTick(() => {
         //dom渲染后
-        calculationLength() //初始化延迟更新滚动条
+        calculationLength(); //初始化延迟更新滚动条
-      })
+      });
-    })
+    });
     // 页面卸载清除定时器
     onUnmounted(() => {
-      window.clearInterval(time)
+      window.clearInterval(time);
-      time = null
+      time = null;
-    })
+    });
     // 监听页面尺寸改变计算滚动条
     const monitorWindow = function () {
-      let time //定时器，防抖，窗口持续变化，延迟更新滚动条
+      let time; //定时器，防抖，窗口持续变化，延迟更新滚动条
-      window.addEventListener('resize', () => {
+      window.addEventListener("resize", () => {
-        data.winWidth = document.body.clientWidth //页面改变监听宽度控制移动端隐藏滚动条
+        data.winWidth = document.body.clientWidth; //页面改变监听宽度控制移动端隐藏滚动条
-        clearTimeout(time)
+        clearTimeout(time);
         time = setTimeout(() => {
           //页面宽度变化继续监听，如果小于500就关闭自定义滚动条
           // console.log("浏览器窗口变化更新滚动条");
-          initScrollListner()
+          initScrollListner();
-        }, 500)
+        }, 500);
-      })
+      });
-    }
+    };
 
     //监听内容元素尺寸变化
     const monitorScrollBar = function () {
-      var monitorUl = data.scrollRef.children[0]
+      var monitorUl = data.scrollRef.children[0];
       // var monitorDiv= document;    // 监听document
       let MutationObserver =
         window.MutationObserver ||
         window.WebKitMutationObserver ||
-        window.MozMutationObserver
+        window.MozMutationObserver;
       let observer = new MutationObserver(function (mutations) {
         // console.log("内容元素变化更新滚动条");
-        initScrollListner()
+        initScrollListner();
-      })
+      });
- 
+
       // childList  观察子节点变动
       // 监听子节点增加或者内容撑起的尺寸
       observer.observe(monitorUl, {
         attributes: true,
-        childList: true
+        childList: true,
-      })
+      });
-    }
+    };
- 
+
     // 初始化延迟监听滚动条
     const calculationLength = function () {
       // 直接执行initScrollListner函数，获取滚动条长度部准确
@@ -140,62 +139,62 @@ export default defineComponent({
       // 每间隔10毫秒更新滑块长度
       time = setInterval(() => {
         // 计算滚动条长度
-        initScrollListner()
+        initScrollListner();
-      }, 50)
+      }, 50);
       // 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
       setTimeout(() => {
-        window.clearInterval(time)
+        window.clearInterval(time);
-        time = null
+        time = null;
-      }, 2000)
+      }, 2000);
-    }
+    };
     // 计算滚动条高度
     const initScrollListner = function () {
-      let scroll = data.scrollRef
+      let scroll = data.scrollRef;
-      let bar = data.barRef
+      let bar = data.barRef;
       // scroll有时候拿不到元素，要判断一下
       if (scroll) {
-        wrapContentHeight = scroll.scrollHeight
+        wrapContentHeight = scroll.scrollHeight;
-        wrapHeight = scroll.clientHeight
+        wrapHeight = scroll.clientHeight;
-        trackHeight = bar.clientHeight
+        trackHeight = bar.clientHeight;
         // console.log(wrapContentHeight ,wrapHeight);
         // 容器高度 / 内容高度   100 150
-        data.heightPre = wrapHeight / wrapContentHeight
+        data.heightPre = wrapHeight / wrapContentHeight;
         // 滑动块的高度 根据 容器和内容的比  乘以 滚动轨道 计算出 滑动块的高度
-        data.barHeight = data.heightPre * trackHeight
+        data.barHeight = data.heightPre * trackHeight;
       }
-    }
+    };
     // 内容滚动时，计算滑块移动的距离
     const onMosewheel = function (e) {
       // scrollTop页面顶部滚出的高度
       // offsetHeight页面可视区域高度
       // scrollHeight页面正文全文高度
       // data.translateY滚动块平移的距离
-      data.translateY = e.target.scrollTop * data.heightPre
+      data.translateY = e.target.scrollTop * data.heightPre;
       if (data.translateY == 0) {
         // 到达顶部
-        arrive('top')
+        arrive("top");
       } else if (
         e.target.scrollTop + e.target.offsetHeight ==
         e.target.scrollHeight
       ) {
         // 滚出高度 + 可视区域高度 == 内容高度
-        arrive('bottom')
+        arrive("bottom");
       }
-    }
+    };
     // 到达顶部或者底部通知父级元素
     const arrive = function name(tb) {
-      ctx.emit('arrive', tb)
+      ctx.emit("arrive", tb);
-    }
+    };
     // 鼠标点击滑块时
     const moveStart = function (e) {
-      isMove = true
+      isMove = true;
       // clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置
       // data.translateY 滚动块平移的距离
       // moveClientY 鼠标点击滑块时，相对滑块的位置
-      moveClientY = e.clientY - data.translateY
+      moveClientY = e.clientY - data.translateY;
-      moveTo() //移动时
+      moveTo(); //移动时
-      moveEnd() //鼠标松开时
+      moveEnd(); //鼠标松开时
-    }
+    };
     // 鼠标移动，改变thumb的位置以及容器scrollTop的位置
     const moveTo = function () {
       document.onmousemove = (e) => {
@@ -204,40 +203,40 @@ export default defineComponent({
           // 移动滑块时，判断时候到达顶部或者底部
           if (e.clientY - moveClientY > trackHeight - data.barHeight) {
             // 滑块到达  底部  就不在改变滑块translateY值
-            data.translateY = trackHeight - data.barHeight
+            data.translateY = trackHeight - data.barHeight;
           } else if (e.clientY - moveClientY < 0) {
             // 滑块到达  顶部  就不在改变滑块translateY值
-            data.translateY = 0
+            data.translateY = 0;
           } else {
             //改变滑块位置
-            data.translateY = e.clientY - moveClientY
+            data.translateY = e.clientY - moveClientY;
           }
           // 计算出内容盒子滚出顶部的距离
-          data.scrollRef.scrollTop = data.translateY / data.heightPre
+          data.scrollRef.scrollTop = data.translateY / data.heightPre;
         }
-      }
+      };
-    }
+    };
     // 鼠标从滑块松开时，不在监听滑块移动操作
     const moveEnd = function () {
       document.onmouseup = (e) => {
         if (isMove) {
-          isMove = false
+          isMove = false;
         }
-      }
+      };
-    }
+    };
- 
+
     return {
       ...toRefs(data),
       onMosewheel,
-      moveStart
+      moveStart,
-    }
+    };
-  }
+  },
-})
+});
 </script>
 <style lang="less" scoped>
 .scrollbar-box {
   height: 100%;
-  overflow: hidden !important;;
+  overflow: hidden !important;
 }
 .scrollbar-y {
   position: relative;
@@ -269,4 +268,4 @@ export default defineComponent({
 .hide.scrollbar-box .scrollbar-y {
   margin: 0;
 }
-</style>
+</style>