diff --git a/frontend/src/components/canvas/store/layer.js b/frontend/src/components/canvas/store/layer.js index b485b86b61..7eb799156f 100644 --- a/frontend/src/components/canvas/store/layer.js +++ b/frontend/src/components/canvas/store/layer.js @@ -1,9 +1,11 @@ -import { toBottom, toTop, moveUp, moveDown } from '@/components/canvas/utils/utils' +import { findCurComponentIndex, moveDown, moveUp, toBottom, toTop } from '@/components/canvas/utils/utils' import toast from '@/components/canvas/utils/toast' export default { mutations: { - upComponent({ componentData, curComponentIndex }) { + + upComponent({ componentData, curComponent }) { + const curComponentIndex = findCurComponentIndex(componentData, curComponent) // 上移图层 index,表示元素在数组中越往后 if (curComponentIndex < componentData.length - 1) { moveUp(componentData, curComponentIndex) @@ -12,7 +14,8 @@ export default { } }, - downComponent({ componentData, curComponentIndex }) { + downComponent({ componentData, curComponent }) { + const curComponentIndex = findCurComponentIndex(componentData, curComponent) // 下移图层 index,表示元素在数组中越往前 if (curComponentIndex > 0) { moveDown(componentData, curComponentIndex) @@ -21,14 +24,16 @@ export default { } }, - topComponent({ componentData, curComponentIndex }) { + topComponent({ componentData, curComponent }) { + const curComponentIndex = findCurComponentIndex(componentData, curComponent) // 置顶 if (curComponentIndex < componentData.length - 1) { toTop(componentData, curComponentIndex) } }, - bottomComponent({ componentData, curComponentIndex }) { + bottomComponent({ componentData, curComponent }) { + const curComponentIndex = findCurComponentIndex(componentData, curComponent) // 置底 if (curComponentIndex > 0) { toBottom(componentData, curComponentIndex) diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index bb8e851623..b02e2dd98a 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -246,3 +246,15 @@ export function getNowCanvasComponentData(canvasId, showPosition) { return store.state.componentData.filter(item => item.canvasId === canvasId) } } + +export function findCurComponentIndex(componentData, curComponent) { + let curIndex = 0 + for (let index = 0; index < componentData.length; index++) { + const element = componentData[index] + if (element.id && element.id === curComponent.id) { + curIndex = index + break + } + } + return curIndex +}