♻️: 更新 scroll 组件属性命名

package/component/src/component/scroll/index.vue

@@ -12,20 +12,16 @@
         ref="barRef"
         class="layui-scroll-track"
         :style="{
-          backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor,
+          backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : trackColor,
         }"
       >
-        <!--
-        没有滑块方式，背景色透明：使用v-show窗口变大，滑块不出现，所以使用背景色控制
-        backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
-       -->
         <div
           :style="{
             height: data.barHeight + 'px',
-            width: scrollWidth + 'px',
+            width: thumbWidth + 'px',
             transform: 'translateY(' + data.translateY + 'px)',
             backgroundColor:
-              data.heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
+              data.heightPre == 1 ? 'rgba(0,0,0,0)' : thumbColor,
           }"
           class="layui-scroll-thumb"
           @mousedown.stop.prevent="moveStart"
@@ -47,16 +43,16 @@ import { toRefs, onMounted, nextTick, reactive, onUnmounted, ref } from "vue";
 
 export interface LayScrollProps {
   height?: string;
-  slotColor?: string;
+  trackColor?: string;
-  scrollColor?: string;
+  thumbColor?: string;
-  scrollWidth?: number;
+  thumbWidth?: number;
 }
 
 const props = withDefaults(defineProps<LayScrollProps>(), {
   height: "100%",
-  slotColor: "rgba(0,0,0,0)",
+  trackColor: "rgba(0,0,0,0)",
-  scrollColor: "#eeeeee",
+  thumbColor: "#eeeeee",
-  scrollWidth: 6,
+  thumbWidth: 6,
 });
 
 const emit = defineEmits(["arrive"]);
@@ -70,6 +66,7 @@ const data = reactive({
   barHeight: 0, // 滑块高度
   winWidth: document.body.clientWidth, //初始化浏览器页面宽度
 });
+
 let time = null; // 定时器
 let isMove = false; // 判断鼠标是否点击滑块（为松开）
 let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置
@@ -86,11 +83,13 @@ onMounted(() => {
     calculationLength(); //初始化延迟更新滚动条
   });
 });
+
 // 页面卸载清除定时器
 onUnmounted(() => {
   window.clearInterval(time);
   time = null;
 });
+
 // 监听页面尺寸改变计算滚动条
 const monitorWindow = function () {
   let time; //定时器，防抖，窗口持续变化，延迟更新滚动条
@@ -120,7 +119,6 @@ const monitorScrollBar = function () {
     initScrollListner();
   });
 
-  // childList  观察子节点变动
   // 监听子节点增加或者内容撑起的尺寸
   observer.observe(monitorUl, {
     attributes: true,
@@ -143,6 +141,7 @@ const calculationLength = function () {
     time = null;
   }, 2000);
 };
+
 // 计算滚动条高度
 const initScrollListner = function () {
   let scroll = scrollRef.value;
@@ -159,6 +158,7 @@ const initScrollListner = function () {
     data.barHeight = data.heightPre * trackHeight;
   }
 };
+
 // 内容滚动时，计算滑块移动的距离
 const onMosewheel = function (e) {
   // scrollTop页面顶部滚出的高度
@@ -177,10 +177,12 @@ const onMosewheel = function (e) {
     arrive("bottom");
   }
 };
+
 // 到达顶部或者底部通知父级元素
 const arrive = function name(tb) {
   emit("arrive", tb);
 };
+
 // 鼠标点击滑块时
 const moveStart = function (e) {
   isMove = true;
@@ -191,6 +193,7 @@ const moveStart = function (e) {
   moveTo(); //移动时
   moveEnd(); //鼠标松开时
 };
+
 // 鼠标移动，改变thumb的位置以及容器scrollTop的位置
 const moveTo = function () {
   document.onmousemove = (e) => {
@@ -212,6 +215,7 @@ const moveTo = function () {
     }
   };
 };
+
 // 鼠标从滑块松开时，不在监听滑块移动操作
 const moveEnd = function () {
   document.onmouseup = (e) => {

package/document/src/document/zh-CN/components/scroll.md

@@ -40,9 +40,9 @@ export default {
 | 属性        | 描述     | 可选值 |
 | ----------- | -------- | ------ |
 | height      |   高度   | --     |
-| scrollWidth |   滑块宽度   | --     |
+| thumbWidth |   滑块宽度   | --     |
-| scrollColor |   滑块颜色   | --     |
+| thumbColor |   滑块颜色   | --     |
-| slotColor   |   滑槽颜色   | --     |
+| trackColor   |   滑槽颜色   | --     |
 
 :::
 

package/document/src/document/zh-CN/guide/changelog.md

@@ -11,12 +11,22 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="1.0.x">
+        <ul> 
+      <a name="1-0-6"> </a> 
+      <li> 
+        <h3>1.0.6 <span class="layui-badge-rim">2022-05-02</span></h3> 
+        <ul>
+          <li>[修复] scroll 组件 height 属性必填警告。</li>
+          <li>[修复] scroll 组件 slotColor 属性必填警告。</li>
+        </ul> 
+      </li>
+    </ul>
       <ul> 
       <a name="1-0-5"> </a> 
       <li> 
         <h3>1.0.5 <span class="layui-badge-rim">2022-05-01</span></h3> 
         <ul>
-          <li>[新增] dropdown 组件 context-menu 属性。。</li>
+          <li>[新增] dropdown 组件 context-menu 属性。</li>
           <li>[修复] layer 组件 tooltip 组件 index 层级冲突。</li>
           <li>[修复] table 组件 columns 宽度超出 table-box 错位。</li>
           <li>[修复] table 组件 selected-keys 属性 deep 监听。</li>