centaline-data-driven-v3 0.1.41 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "centaline-data-driven-v3",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "private": false,
   "description": "centaline-data-driven-v3",
   "main": "dist/centaline-data-driven-v3.umd.js",

package/src/components/web/Form.vue

@@ -102,7 +102,7 @@
                                     <template #title>
                                         <i class="sign"></i>
                                         <span :class="[item.required ? 'requiredLabel' : '']">{{ item.controlLabel
-                                        }}</span>
+                                            }}</span>
                                         <span v-html="item.sufLabel1"></span>
                                     </template>
 
@@ -293,6 +293,7 @@ const refTip = ref()
 const tipTopHight = ref(0)
 const tabTopHight = ref(0)
 const refTabs = ref()
+const translateX = ref(0)
 
 const qrtimer1 = ref(null)
 const qrtimer2 = ref(null)
@@ -324,6 +325,7 @@ onUpdated(() => {
 onDeactivated(() => {
     downloadUrl.value = ''
 })
+
 onMounted(() => {
     setCss();
     if (refForm.value) {
@@ -337,6 +339,13 @@ onMounted(() => {
             tabTopHight.value = tipTopHight.value;
         }
     }
+    nextTick(() => {
+
+        setTimeout(() => {
+            attachScrollButtonListeners()
+        }, 1000);
+
+    });
 })
 init()
 //初始化数据
@@ -767,59 +776,73 @@ async function tabClick(pane: TabsPaneContext) {
     if (props.openType == 'detail') {
         window.localStorage.setItem(tabActiveNameKey.value, model.value.collapse[event.index].fieldName1);//存储
     }
-    // await nextTick()          // 等 DOM 更新完再取节点
-    // debugger
-    // const navWrapScroll = document.querySelector('.el-tabs__nav-scroll') as HTMLElement
-    // const firstTab = document.querySelector('.el-tabs__item') as HTMLElement
-    // if (!navWrapScroll || !firstTab) return
-
-    // // 第一个 tab 的“右边”到容器左边的距离
-    // const firstRight = firstTab.getBoundingClientRect().right
-    // const wrapLeft = navWrapScroll.getBoundingClientRect().left
-
-    // // 只要右边还在容器左边之外，就说明还没进来
-    // const firstVisible = firstRight >= wrapLeft
-    // const visibleCount = getVisibleTabCount();
-    // if (pane.index < visibleCount / 2 && firstVisible) {
-    //     return;
-    // }
-
-    // const navWrap = document.querySelector('.el-tabs__nav') as HTMLElement
-    // const activeBtn = document.querySelector(
-    //     `.el-tabs__item#tab-${pane.paneName}`
-    // ) as HTMLElement
-
-    // if (!navWrapScroll || !navWrap || !activeBtn) return
-
-    // const wrapWidth = navWrapScroll.clientWidth
-    // const btnLeft = activeBtn.offsetLeft
-    // const btnWidth = activeBtn.offsetWidth
-
-    // /* 想让 activeBtn 居中，需要整个 navWrap 向左移动的距离 */
-    // const dx = (wrapWidth - btnWidth) / 2 - btnLeft
+    await nextTick()          // 等 DOM 更新完再取节点
+    const navWrapScroll = document.querySelector('.el-tabs__nav-scroll') as HTMLElement
+    const navWrap = document.querySelector('.el-tabs__nav') as HTMLElement
+    const activeBtn = document.querySelector(`.el-tabs__item#tab-${pane.paneName}`) as HTMLElement
+    if (!navWrapScroll || !navWrap || !activeBtn) return
+    const visibleCount = getVisibleTabCount()
+    if (pane.index <= visibleCount / 2) {
+        setTimeout(() => {
+            navWrap.style.transition = 'transform .3s ease-out'
+            navWrap.style.transform = 'translateX(0px)'
+        }, 50);
+        translateX.value = 0
+        return
+    }
+    const allTabs = Array.from(navWrap.querySelectorAll('.el-tabs__item')) as HTMLElement[]
+    const total = allTabs.length
+    if (pane.index >= total - 5) {
+        const lastTab = allTabs[total - 1]
+        const wrapWidth = navWrapScroll.clientWidth
+        const lastWidth = lastTab.offsetWidth
+        const lastRight = lastTab.offsetLeft + lastWidth   // 最后一个右边到 nav 左边的距离
+        const needShift = wrapWidth - lastRight            // 负值，让右边对齐容器右边
+        setTimeout(() => {
+            navWrap.style.transition = 'transform .3s ease-out'
+            navWrap.style.transform = `translateX(${needShift}px)`
+        }, 50);
+        translateX.value = needShift
+        return
+    }
+    /* ---------- 1. 初始状态：还没滑过 ---------- */
+    const neverSlid = navWrap.style.transform == 'translateX(0px)'
 
-    // setTimeout(() => {
-    //     navWrap.style.transition = 'transform .3s ease-out'
-    //     navWrap.style.transform = `translateX(${dx}px)`
-    // }, 50);
+    if (neverSlid && pane.index >= visibleCount / 2) {
+        /* 第一次往后走，直接允许滑动 → 走居中逻辑 */
+        const wrapWidth = navWrapScroll.clientWidth
+        const btnLeft = activeBtn.offsetLeft
+        const btnWidth = activeBtn.offsetWidth
+        const dx = (wrapWidth - btnWidth) / 2 - btnLeft
+        setTimeout(() => {
+            navWrap.style.transition = 'transform .3s ease-out'
+            navWrap.style.transform = `translateX(${dx}px)`
+        }, 50);
+        translateX.value = dx
+        return
+    }
 
-    // const navWrapScroll = document.querySelector('.el-tabs__nav-scroll') as HTMLElement
-    // const navWrap = document.querySelector('.el-tabs__nav') as HTMLElement
-    // const activeBtn = document.querySelector(
-    //     `.el-tabs__item#tab-${pane.paneName}`
-    // ) as HTMLElement
-    // if (!navWrapScroll || !activeBtn) return
+    /* ---------- 2. 已经滑过 → 恢复两端贴边即锁死 ---------- */
+    const firstTab = navWrap.querySelector('.el-tabs__item') as HTMLElement
+    const lastTab = navWrap.querySelector('.el-tabs__item:last-child') as HTMLElement
+    if (!firstTab || !lastTab) return
 
-    // const wrapWidth = navWrapScroll.clientWidth
-    // const btnLeft = activeBtn.offsetLeft
-    // const btnWidth = activeBtn.offsetWidth
+    const lastAtRight = lastTab.getBoundingClientRect().right <= navWrapScroll.getBoundingClientRect().right
 
-    // // 滚动到“元素中心 - 容器半宽”的位置，就能居中
-    // navWrapScroll.scrollTo({
-    //     left: btnLeft - (wrapWidth - btnWidth) / 2,
-    //     behavior: 'smooth'
-    // })
+    if ((lastAtRight && pane.index >= total - 5)) {
+        return
+    }   // 已贴边，不滑
 
+    /* 需要居中 */
+    const wrapWidth = navWrapScroll.clientWidth
+    const btnLeft = activeBtn.offsetLeft
+    const btnWidth = activeBtn.offsetWidth
+    const dx = (wrapWidth - btnWidth) / 2 - btnLeft
+    translateX.value = dx
+    setTimeout(() => {
+        navWrap.style.transition = 'transform .3s ease-out'
+        navWrap.style.transform = `translateX(${dx}px)`
+    }, 50);
 }
 /** 返回当前屏幕完全可见的 tab 个数 */
 function getVisibleTabCount(): number {
@@ -839,7 +862,137 @@ function getVisibleTabCount(): number {
     const avgWidth = totalWidth / allTabs.length
     return Math.floor(wrapWidth / avgWidth)
 }
+function attachScrollButtonListeners() {
+    if (refTabs.value) {
+        const tabsEl = refTabs.value.$el
+
+        // 监听原生左右箭头点击事件（事件委托）
+        const arrowLeft = tabsEl.querySelector('.el-tabs__nav-prev')
+        const arrowRight = tabsEl.querySelector('.el-tabs__nav-next')
+
+        if (arrowLeft) {
+            // 1. 移除所有已有事件监听（保险）
+            const newArrowLeft = arrowLeft.cloneNode(true)
+            arrowLeft.parentNode.replaceChild(newArrowLeft, arrowLeft)
+            // 2. 添加自定义事件，彻底阻断原生行为
+            newArrowLeft.addEventListener('click', handleArrowLeft, { capture: true })
+            newArrowLeft.addEventListener('mousedown', (e) => e.preventDefault(), { capture: true })
+            arrowLeft.addEventListener('click', handleArrowLeft)
+        }
+        if (arrowRight) {
+            // 1. 移除所有已有事件监听（保险）
+            const newArrowRight = arrowRight.cloneNode(true)
+            arrowRight.parentNode.replaceChild(newArrowRight, arrowRight)
+            // 2. 添加自定义事件，彻底阻断原生行为
+            newArrowRight.addEventListener('click', handleArrowRight, { capture: true })
+            newArrowRight.addEventListener('mousedown', (e) => e.preventDefault(), { capture: true })
+        }
+    }
+}
+function handleArrowLeft(e) {
+    // 彻底阻断原生事件传播和默认行为
+    e.stopImmediatePropagation()
+    e.stopPropagation()
+    e.preventDefault()
+    scrollTabs('left')
+}
+function handleArrowRight(e) {
+    // 彻底阻断原生事件传播和默认行为
+    e.stopImmediatePropagation()
+    e.stopPropagation()
+    e.preventDefault()
+    scrollTabs('right')
+}
+function scrollTabs(direction) {
+    const navWrapScroll = document.querySelector('.el-tabs__nav-scroll') as HTMLElement
+    const navWrap = document.querySelector('.el-tabs__nav') as HTMLElement
+    if (!navWrapScroll || !navWrap) return
+    const allTabs = Array.from(navWrap.querySelectorAll('.el-tabs__item')) as HTMLElement[]
+    if (!allTabs.length) return
+    // 找到当前第一个可见的标签索引
+    const firstVisibleIndex = getFirstVisibleTabIndex(allTabs)
+    if (direction == 'left') {
+        if (translateX.value >= 0) {
+            translateX.value = 0
+            setTimeout(() => {
+                navWrap.style.transition = 'transform .3s ease-out'
+                navWrap.style.transform = `translateX(${translateX.value}px)`
+            }, 50);
+            return
+        }
+
+        // 找到当前第一个可见的标签索引
+        const firstVisibleIndex = getFirstVisibleTabIndex(allTabs)
+        // 计算上一个标签的宽度
+        const prevTabWidth = getFirstVisibleTabIndex(allTabs) > 0 ? getTabWidth(allTabs, firstVisibleIndex - 1) : 0
+        if (prevTabWidth == 0) {
+            translateX.value = 0
+        }
+        else {
+            // 更新偏移量（向右平移）
+            translateX.value += prevTabWidth
+        }
+
+        setTimeout(() => {
+            navWrap.style.transition = 'transform .3s ease-out'
+            navWrap.style.transform = `translateX(${translateX.value}px)`
+        }, 50);
+    }
+    else if (direction == 'right') {
 
+        // 判断最后一个标签是否已靠右，若是则禁止滚动
+        if (isLastTabAlignedRight(navWrapScroll, navWrap)) {
+            return
+        }
+
+        // 计算下一个标签的宽度
+        const nextTabWidth = getTabWidth(allTabs, firstVisibleIndex)
+        // 更新偏移量（向左平移）
+        translateX.value -= nextTabWidth
+        setTimeout(() => {
+            navWrap.style.transition = 'transform .3s ease-out'
+            navWrap.style.transform = `translateX(${translateX.value}px)`
+        }, 50);
+    }
+}
+// 获取当前第一个可见的标签索引
+const getFirstVisibleTabIndex = (allTabs) => {
+    const scrollLeft = Math.abs(translateX.value)
+    let sumWidth = 0
+    for (let i = 0; i < allTabs.length; i++) {
+        sumWidth += getTabWidth(allTabs, i)
+        if (sumWidth > scrollLeft) {
+            return i
+        }
+    }
+    return 0
+}
+// 计算单个标签宽度（包含间距）
+const getTabWidth = (allTabs, index) => {
+    if (!allTabs[index]) return 0
+    const tab = allTabs[index]
+    // 获取标签的实际宽度（包含内边距、边框）
+    const width = tab.offsetWidth
+    // 获取标签的左右外边距（ElementPlus 默认有间距）
+    const style = window.getComputedStyle(tab)
+    const marginLeft = parseFloat(style.marginLeft) || 0
+    const marginRight = parseFloat(style.marginRight) || 0
+    return width + marginLeft + marginRight
+}
+// 检查最后一个标签是否已靠最右侧
+const isLastTabAlignedRight = (navWrapScroll, navWrap) => {
+
+    // 滚动容器的可视宽度
+    const containerWidth = navWrapScroll.clientWidth
+    // 所有标签的总宽度
+    const totalTabsWidth = navWrap.scrollWidth
+    // 当前向左偏移的总距离（绝对值）
+    const currentOffset = Math.abs(translateX.value)
+
+    // 最后一个标签靠右的判定条件：偏移量 + 容器宽度 ≥ 总标签宽度
+    // 预留2px误差，避免因像素精度问题导致判断失误
+    return (currentOffset + containerWidth) >= (totalTabsWidth - 2)
+}
 
 </script>