♻️(component): 使用 setup script 重构 scroll 组件

package/component/src/component/scroll/index.less

@@ -1,44 +1,34 @@
-.scrollbar-box {
+.layui-scroll {
   height: 100%;
   overflow: hidden !important;
 }
 
-.scrollbar-y {
+.layui-scroll-y {
   position: relative;
   height: 100%;
-  .scroll-wrap {
+
+  .layui-scroll-wrap {
     height: 100%;
     overflow-y: scroll;
-    scrollbar-width: none; /* firefox */
+    scrollbar-width: none;
     -ms-overflow-style: none;
   }
 
-  .scrollbar-track {
+  .layui-scroll-track {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     border-radius: 8px;
     z-index: 20;
-    .scrollbar-thumb {
+    .layui-scroll-thumb {
       margin: 0 auto;
       border-radius: 6px;
       cursor: default;
     }
   }
 }
-.scrollbar-y ::-webkit-scrollbar {
+
+.layui-scroll-y ::-webkit-scrollbar {
   display: none;
 }
-//移动端隐藏自定义滚动条
-.hide.scrollbar-box .scrollbar-track {
-  display: none;
-}
-//移动端显示原生滑块
-.hide.scrollbar-box .scrollbar-y ::-webkit-scrollbar {
-  display: block;
-}
-.hide.scrollbar-box .scrollbar-y .scroll-wrap {
-  scrollbar-width: auto;
-  -ms-overflow-style: scrollbar;
-}

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

@@ -1,16 +1,16 @@
 <template>
   <div
-    class="scrollbar-box"
-    :class="{ hide: winWidth < 500 }"
+    class="layui-scroll"
+    :class="{ hide: data.winWidth < 500 }"
     :style="{ height: height }"
   >
-    <div class="scrollbar-y">
-      <div ref="scrollRef" class="scroll-wrap" @scroll="onMosewheel">
+    <div class="layui-scroll-y">
+      <div ref="scrollRef" class="layui-scroll-wrap" @scroll="onMosewheel">
         <slot></slot>
       </div>
       <div
         ref="barRef"
-        class="scrollbar-track"
+        class="layui-scroll-track"
         :style="{
           backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor,
         }"
@@ -21,12 +21,12 @@
        -->
         <div
           :style="{
-            height: barHeight + 'px',
+            height: data.barHeight + 'px',
             width: scrollWidth + 'px',
-            transform: 'translateY(' + translateY + 'px)',
-            backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
+            transform: 'translateY(' + data.translateY + 'px)',
+            backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
           }"
-          class="scrollbar-thumb"
+          class="layui-scroll-thumb"
           @mousedown.stop.prevent="moveStart"
         ></div>
       </div>
@@ -34,7 +34,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+export default {
+  name: "LayScroll"
+}
+</script>
+
+<script lang="ts" setup>
 import "./index.less";
 import {
   defineComponent,
@@ -43,34 +49,29 @@ import {
   nextTick,
   reactive,
   onUnmounted,
+  ref,
 } from "vue";
-export default defineComponent({
-  name: "LayScroll",
-  props: {
-    height: {
-      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) {
+
+export interface LayScrollProps {
+  height: string;
+  slotColor: string;
+  scrollColor: string;
+  scrollWidth: number;
+}
+
+const props = withDefaults(defineProps<LayScrollProps>(), {
+  height: "100%",
+  slotColor: "rgba(0,0,0,0)",
+  scrollColor: "#eeeeee",
+  scrollWidth: 6,
+});
+
+const emit = defineEmits(["arrive"]);
+
+const scrollRef = ref<HTMLElement | null>(null);
+const barRef = ref<HTMLElement | null>(null);
+
 const data = reactive({
-      scrollRef: null, // 内容盒子
-      barRef: null, // 滚动条轨道
   translateY: 0, // 滚动块平移的距离
   heightPre: 0, // 可视高度和内容高度比
   barHeight: 0, // 滑块高度
@@ -113,11 +114,13 @@ export default defineComponent({
 
 //监听内容元素尺寸变化
 const monitorScrollBar = function () {
-      var monitorUl = data.scrollRef.children[0];
+  var monitorUl = scrollRef.value.children[0];
   // var monitorDiv= document;    // 监听document
   let MutationObserver =
     window.MutationObserver ||
+    // @ts-ignore
     window.WebKitMutationObserver ||
+    // @ts-ignore
     window.MozMutationObserver;
   let observer = new MutationObserver(function (mutations) {
     // console.log("内容元素变化更新滚动条");
@@ -149,8 +152,8 @@ export default defineComponent({
 };
 // 计算滚动条高度
 const initScrollListner = function () {
-      let scroll = data.scrollRef;
-      let bar = data.barRef;
+  let scroll = scrollRef.value;
+  let bar = barRef.value;
   // scroll有时候拿不到元素，要判断一下
   if (scroll) {
     wrapContentHeight = scroll.scrollHeight;
@@ -183,7 +186,7 @@ export default defineComponent({
 };
 // 到达顶部或者底部通知父级元素
 const arrive = function name(tb) {
-      ctx.emit("arrive", tb);
+  emit("arrive", tb);
 };
 // 鼠标点击滑块时
 const moveStart = function (e) {
@@ -212,7 +215,7 @@ export default defineComponent({
         data.translateY = e.clientY - moveClientY;
       }
       // 计算出内容盒子滚出顶部的距离
-          data.scrollRef.scrollTop = data.translateY / data.heightPre;
+      scrollRef.value.scrollTop = data.translateY / data.heightPre;
     }
   };
 };
@@ -225,11 +228,5 @@ export default defineComponent({
   };
 };
 
-    return {
-      ...toRefs(data),
-      onMosewheel,
-      moveStart,
-    };
-  },
-});
+let dataRef = toRefs(data);
 </script>