init

.svn/pristine/4f/4f10b5916ca0a629eed2caa37d28d2fd89f2cc32.svn-base

@@ -0,0 +1,16 @@
+<script lang="ts">
+export default {
+  name: "HelpIcon",
+};
+</script>
+<script setup lang="ts">
+import LayIcon from "../component/icon/index";
+
+const props = defineProps<{
+  color?: string;
+  size?: string;
+}>();
+</script>
+<template>
+  <lay-icon :color="props.color" :size="props.size" type="layui-icon-help" />
+</template>

.svn/pristine/4f/4f24ea2cfed34a96723f68f304e8cb0a6dac4a54.svn-base

@@ -0,0 +1 @@
+.layui-progress{position:relative;height:6px;border-radius:20px;background-color:var(--global-neutral-color-3)}.layui-progress-bar{position:absolute;left:0;top:0;width:0;max-width:100%;height:6px;border-radius:20px;text-align:right;background-color:var(--global-checked-color);transition:all .3s;-webkit-transition:all .3s}.layui-progress-big,.layui-progress-big .layui-progress-bar{height:18px;line-height:18px}.layui-progress-text{position:relative;top:-20px;line-height:18px;font-size:12px;color:#666}.layui-progress-big .layui-progress-text{position:static;padding:0 10px;color:#fff}.lay-progress-circle-container{position:relative;display:inline-block}.lay-progress-circle{position:relative;border-radius:50%;display:inline-block}.lay-progress-circle__text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

.svn/pristine/4f/4f8a24f87700791230d80f2e7521bfff5f36e5e6.svn-base

@@ -0,0 +1,23 @@
+.layui-empty {
+  margin: 0 8px;
+  font-size: 14px;
+  line-height: 22px;
+  text-align: center;
+}
+
+.layui-empty-image {
+  margin-bottom: 8px;
+}
+
+.layui-empty-image img {
+  height: 100px;
+  margin: auto;
+}
+
+.layui-empty-description {
+  margin: 0;
+}
+
+.layui-empty-extra {
+  margin-top: 30px;
+}

.svn/pristine/4f/4fc472c22addcb9fad7d0a94abc3adaa95c02bdd.svn-base

@@ -0,0 +1,213 @@
+<template>
+  <div
+    class="layui-scroll"
+    :class="{ hide: data.winWidth < 500 }"
+    :style="{ height: height }"
+  >
+    <div class="layui-scroll-y">
+      <div ref="scrollRef" class="layui-scroll-wrap" @scroll="onMosewheel">
+        <slot></slot>
+      </div>
+      <div
+        ref="barRef"
+        class="layui-scroll-track"
+        :style="{
+          backgroundColor: data.heightPre == 1 ? 'transparent' : trackColor,
+        }"
+      >
+        <div
+          :style="{
+            height: data.barHeight + 'px',
+            width: thumbWidth + 'px',
+            transform: 'translateY(' + data.translateY + 'px)',
+            backgroundColor: data.heightPre == 1 ? 'transparent' : thumbColor,
+          }"
+          class="layui-scroll-thumb"
+          @mousedown.stop.prevent="moveStart"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayScroll",
+};
+</script>
+
+<script lang="ts" setup>
+import "./index.less";
+import { onMounted, nextTick, reactive, onUnmounted, ref } from "vue";
+
+export interface ScrollProps {
+  height?: string;
+  trackColor?: string;
+  thumbColor?: string;
+  thumbWidth?: number;
+}
+
+const props = withDefaults(defineProps<ScrollProps>(), {
+  height: "100%",
+  trackColor: "rgba(0,0,0,0)",
+  thumbColor: "#eeeeee",
+  thumbWidth: 6,
+});
+
+const emit = defineEmits(["arrive"]);
+
+const scrollRef = ref<HTMLElement | null | undefined>();
+const barRef = ref<HTMLElement | null | undefined>();
+
+const data = reactive({
+  translateY: 0, // 滚动块平移的距离
+  heightPre: 0, // 可视高度和内容高度比
+  barHeight: 0, // 滑块高度
+  winWidth: document.body.clientWidth, //初始化浏览器页面宽度
+});
+
+let time: NodeJS.Timeout; // 定时器
+let isMove = false; // 判断鼠标是否点击滑块（为松开）
+let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置
+let trackHeight = 0; // 滚动条轨道高度
+let wrapHeight = 0; // 容器高度（可视高度）
+let wrapContentHeight = 0; // 内容高度（可滚动内容的高度）
+
+onMounted(() => {
+  monitorWindow();
+  monitorScrollBar();
+  nextTick(() => {
+    calculationLength();
+  });
+});
+
+// 页面卸载清除定时器
+onUnmounted(() => {
+  window.clearInterval(time);
+});
+
+// 监听页面尺寸改变计算滚动条
+const monitorWindow = function () {
+  let time: NodeJS.Timeout;
+  window.addEventListener("resize", () => {
+    data.winWidth = document.body.clientWidth;
+    clearTimeout(time);
+    time = setTimeout(() => {
+      initScrollListner();
+    }, 500);
+  });
+};
+
+//监听内容元素尺寸变化
+const monitorScrollBar = function () {
+  // @ts-ignore
+  let MutationObserver =
+    window.MutationObserver ||
+    // @ts-ignore
+    window.WebKitMutationObserver ||
+    // @ts-ignore
+    window.MozMutationObserver;
+  const observer: any = new MutationObserver((mutations) => {
+    initScrollListner();
+  });
+
+  observer.observe(scrollRef.value, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+  });
+};
+
+// 初始化延迟监听滚动条
+const calculationLength = function () {
+  // 直接执行initScrollListner函数，获取滚动条长度部准确
+  // 因为页面渲染有延迟，获取dom元素需要延迟
+  // 每间隔10毫秒更新滑块长度
+  time = setInterval(() => {
+    // 计算滚动条长度
+    initScrollListner();
+  }, 50);
+  // 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
+  setTimeout(() => {
+    window.clearInterval(time);
+  }, 2000);
+};
+
+// 计算滚动条高度
+const initScrollListner = function () {
+  let scroll = scrollRef.value;
+  let bar = barRef.value;
+  // scroll有时候拿不到元素，要判断一下
+  if (scroll && bar) {
+    wrapContentHeight = scroll.scrollHeight;
+    wrapHeight = scroll.clientHeight;
+    trackHeight = bar.clientHeight;
+    data.heightPre = wrapHeight / wrapContentHeight;
+    data.barHeight = data.heightPre * trackHeight;
+  }
+};
+
+// 内容滚动时，计算滑块移动的距离
+const onMosewheel = (e: any) => {
+  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 = (tb: string) => {
+  emit("arrive", tb);
+};
+
+// 鼠标点击滑块时
+const moveStart = (e: any) => {
+  isMove = true;
+  // clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置
+  // data.translateY 滚动块平移的距离
+  // moveClientY 鼠标点击滑块时，相对滑块的位置
+  moveClientY = e.clientY - data.translateY;
+  moveTo(); //移动时
+  moveEnd(); //鼠标松开时
+};
+
+// 鼠标移动，改变thumb的位置以及容器scrollTop的位置
+const moveTo = () => {
+  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;
+      }
+      // 计算出内容盒子滚出顶部的距离
+      if (scrollRef.value) {
+        scrollRef.value.scrollTop = data.translateY / data.heightPre;
+      }
+    }
+  };
+};
+
+// 鼠标从滑块松开时，不在监听滑块移动操作
+const moveEnd = function () {
+  document.onmouseup = (e) => {
+    if (isMove) {
+      isMove = false;
+    }
+  };
+};
+</script>

.svn/pristine/4f/4fe3e33bfa5a2ece41f4eaa9cdf328d5d00ace2d.svn-base

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "esnext",
+    "target": "es2015",
+    "moduleResolution": "Node",
+    "strict": true,
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "declarationDir": "types",
+    "jsx": "preserve",
+    "lib": ["ESNext", "DOM"],
+  },
+  "include": ["src/**/*", "shims-vue.d.ts"],
+  "exclude": ["node_modules"]
+}