Преглед на файлове

相位图(SignalTimingChart): 隐藏横向滚动条 + 鼠标拖拽横滑

  移除滚动条样式(scrollbar-width: none / ::-webkit-scrollbar: none),
  改为鼠标拖拽滑动(_setupDragScroll):按下拖动 >4px 触发,
  拖动中 cursor 切换为 grabbing,松开恢复 grab,
  beforeDestroy 时清理事件监听。
画安 преди 1 месец
родител
ревизия
e4fc4c8fef
променени са 1 файла, в които са добавени 34 реда и са изтрити 16 реда
  1. 34 16
      src/components/ui/SignalTimingChart.vue

+ 34 - 16
src/components/ui/SignalTimingChart.vue

@@ -127,6 +127,7 @@ export default {
       if (this.autoScan) this.startAutoScan();
       this._setupWrapObserver();
       this._setupWheelToHorizontal();
+      this._setupDragScroll();
     });
   },
   beforeDestroy() {
@@ -136,6 +137,7 @@ export default {
       this.$refs.scrollWrap.removeEventListener('wheel', this._wheelHandler);
       this._wheelHandler = null;
     }
+    if (this._dragCleanup) { this._dragCleanup(); this._dragCleanup = null; }
   },
   watch: {
     currentTime() {
@@ -234,6 +236,31 @@ export default {
       };
       wrap.addEventListener('wheel', this._wheelHandler, { passive: false });
     },
+    _setupDragScroll() {
+      const wrap = this.$refs.scrollWrap;
+      if (!wrap) return;
+      let startX = 0, scrollStart = 0, active = false, hasDragged = false;
+      const onDown = e => {
+        if (e.button !== 0) return;
+        active = true; hasDragged = false;
+        startX = e.clientX; scrollStart = wrap.scrollLeft;
+      };
+      const onMove = e => {
+        if (!active) return;
+        const dx = e.clientX - startX;
+        if (!hasDragged && Math.abs(dx) > 4) { hasDragged = true; wrap.classList.add('is-dragging'); }
+        if (hasDragged) wrap.scrollLeft = scrollStart - dx;
+      };
+      const onUp = () => { active = false; wrap.classList.remove('is-dragging'); };
+      wrap.addEventListener('mousedown', onDown);
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+      this._dragCleanup = () => {
+        wrap.removeEventListener('mousedown', onDown);
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+      };
+    },
     // autoScan 时让扫描线跟着滚动条走: scan line 落到视口中心位置 (clamp 到合法 scrollLeft 范围)
     // 不滚条 (contentWidthPx <= wrapW) 时直接 return
     _followScanLine() {
@@ -623,27 +650,18 @@ export default {
 </script>
 
 <style scoped>
-/* 外层视口: 提供原生横滚, 4 阶段以内不滚 (内容宽 == 视口宽) 也不预留滚条占位 */
+/* 外层视口: 提供原生横滚, 4 阶段以内不滚 (内容宽 == 视口宽); 拖拽滑动, 无滚动条 */
 .chart-scroll {
   width: 100%; height: 100%; flex: 1;
   min-width: 0; min-height: 0;
   overflow-x: auto; overflow-y: hidden;
-  /* Firefox 常驻细条 */
-  scrollbar-width: thin;
-  scrollbar-color: rgba(161, 190, 255, 0.45) rgba(255, 255, 255, 0.04);
-}
-/* WebKit/Blink (Chrome/Edge/Electron) 常驻细条: 防 overlay scrollbar 隐身让用户以为不能滚 */
-.chart-scroll::-webkit-scrollbar { height: 6px; }
-.chart-scroll::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 3px;
-}
-.chart-scroll::-webkit-scrollbar-thumb {
-  background: rgba(161, 190, 255, 0.45);
-  border-radius: 3px;
+  scrollbar-width: none;
+  cursor: grab;
 }
-.chart-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(161, 190, 255, 0.75);
+.chart-scroll::-webkit-scrollbar { display: none; }
+.chart-scroll.is-dragging {
+  cursor: grabbing;
+  user-select: none;
 }
 /* 内层 chart 容器: 默认 100%, 阶段>4 时 JS 命令式写 style.width (大于 wrap), 触发横滚 */
 .chart-container {