新增分组后自动定位到该位置,issues:#I3ZSTG

This commit is contained in:
BillDowney
2021-07-14 21:32:57 +08:00
parent 81abb5268e
commit 6de0a9dcae
4 changed files with 30 additions and 9 deletions

View File

@@ -836,12 +836,13 @@ export default {
const $scrollRect = scrollbar.getBoundingClientRect()
const $itemDom = document.getElementById('ma-tab-item-' + this.selected.tmp_id)
if ($itemDom) {
const $itemRect = $itemDom.getBoundingClientRect()
if ($itemRect.left < $scrollRect.left) {
scrollbar.scrollLeft += $itemRect.left - $scrollRect.left
} else if ($scrollRect.left + $scrollRect.width < $itemRect.left + $itemRect.width) {
scrollbar.scrollLeft += $itemRect.left + $itemRect.width - $scrollRect.left - $scrollRect.width
}
// const $itemRect = $itemDom.getBoundingClientRect()
// if ($itemRect.left < $scrollRect.left) {
// scrollbar.scrollLeft += $itemRect.left - $scrollRect.left
// } else if ($scrollRect.left + $scrollRect.width < $itemRect.left + $itemRect.width) {
// scrollbar.scrollLeft += $itemRect.left + $itemRect.width - $scrollRect.left - $scrollRect.width
// }
$itemDom.scrollIntoView(true)
}
})
}

View File

@@ -26,6 +26,7 @@
<template #folder="{ item }">
<div
v-if="item._searchShow !== false"
:id="'magic-api-list-' + item.id"
:class="{ 'ma-tree-select': item.selectRightItem }"
:draggable="true"
:style="{ 'padding-left': 17 * item.level + 'px' }"
@@ -90,7 +91,7 @@ import MagicTree from '../common/magic-tree.vue'
import request from '@/api/request.js'
import MagicDialog from '@/components/common/modal/magic-dialog.vue'
import MagicInput from '@/components/common/magic-input.vue'
import { replaceURL, download as downloadFile, requestGroup } from '@/scripts/utils.js'
import { replaceURL, download as downloadFile, requestGroup, goToAnchor } from '@/scripts/utils.js'
import contants from '@/scripts/contants.js'
import Key from '@/scripts/hotkey.js'
@@ -522,6 +523,10 @@ export default {
bus.$emit('status', `分组「${this.createGroupObj.name}」创建成功`)
this.deleteOrAddGroupToTree(this.tree, this.createGroupObj)
this.rebuildTree()
const id = this.createGroupObj.id
this.$nextTick(() => {
goToAnchor('#magic-api-list-' + id)
})
this.initCreateGroupObj()
})
}

View File

@@ -89,10 +89,11 @@ import MagicTree from '@/components/common/magic-tree.vue'
import request from '@/api/request.js'
import MagicDialog from '@/components/common/modal/magic-dialog.vue'
import MagicInput from '@/components/common/magic-input.vue'
import { replaceURL, requestGroup } from '@/scripts/utils.js'
import { replaceURL, requestGroup, goToAnchor } from '@/scripts/utils.js'
import JavaClass from '@/scripts/editor/java-class.js'
import Key from '@/scripts/hotkey.js'
import contants from '@/scripts/contants.js'
export default {
name: 'MagicFunctionList',
props: {
@@ -490,6 +491,10 @@ export default {
bus.$emit('status', `分组「${this.createGroupObj.name}」创建成功`)
this.deleteOrAddGroupToTree(this.tree, this.createGroupObj)
this.rebuildTree()
const id = this.createGroupObj.id
this.$nextTick(() => {
goToAnchor('#magic-api-list-' + id)
})
this.initCreateGroupObj()
})
}

View File

@@ -84,4 +84,14 @@ const deepClone = (obj) => {
}
return o;
}
export {replaceURL, isVisible, formatJson, formatDate, paddingZero, download, requestGroup, deepClone}
// 展示锚点对象
const goToAnchor = (dom) => {
if (typeof dom === 'string') {
dom = document.querySelector(dom)
}
if (dom) {
dom.scrollIntoView(true)
}
}
export {replaceURL, isVisible, formatJson, formatDate, paddingZero, download, requestGroup, deepClone, goToAnchor}