fix: 标签出现滑动交互展示优化

src/components/problem-tag/select-tag.vue

@@ -98,18 +98,11 @@ export default {
       if (!this.pTimer) {
         this.pTimer = setTimeout(() => {
           this.onOpenLevel2(parent, pIndex)
-          this.initPopoverPosition()
+          const calcLeft = parent.children.length === 0
+          this.calcPopoverPosition('hover', calcLeft)
         }, 150)
       }
     },
-    initPopoverPosition () {
-      const popover = this.$refs.selectTagRef
-      if (popover) {
-        this.$nextTick(() => {
-          popover.updatePopper()
-        })
-      }
-    },
     // 父级选中/取消选中
     onParentChange (checked, parent, pIndex) {
       this.onOpenLevel2(parent, pIndex)
@@ -185,20 +178,37 @@ export default {
         this.calcPopoverPosition()
       }
     },
+    initPopoverPosition () {
+      const popover = this.$refs.selectTagRef
+      if (popover) {
+        this.$nextTick(() => {
+          popover.updatePopper()
+        })
+      }
+    },
     // 处理问题：由于外层overflow:hidden,元素也不能插入body，但是父元素其他内容过长，所剩底部区域过小时，popover展示不全
-    calcPopoverPosition () {
+    calcPopoverPosition (isHover, calcLeft) {
       const parent = document.querySelector('#customer-info')
       const parentRect = parent.getBoundingClientRect()
       const elementRect = this.$el.getBoundingClientRect()
+      const left = elementRect.left
       const bottom = parentRect.bottom - elementRect.bottom
       if (bottom < 260 && this.$refs.selectTagRef) {
         const popover = this.$refs.selectTagRef
         if (popover) {
-          if (this.timer) clearTimeout(this.timer)
-          this.timer = setTimeout(() => {
+          if (isHover) {
             popover.popperElm.style.top = (elementRect.bottom - 350) + 'px'
-          })
+            popover.popperElm.style.left = calcLeft ? (left - 123) + 'px' : (left - 323) + 'px'
+          } else {
+            if (this.timer) clearTimeout(this.timer)
+            this.timer = setTimeout(() => {
+              popover.popperElm.style.top = (elementRect.bottom - 350) + 'px'
+              popover.popperElm.style.left = (left - 323) + 'px'
+            })
+          }
         }
+      } else {
+        this.initPopoverPosition()
       }
     },
     cancelHandle () {