From 99aea4b9d36f5f6e72027962b38e11d5fe8b9523 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
<1262327911@qq.com>
Date: Sun, 11 Sep 2022 01:26:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=83=A8=E5=88=86?=
=?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=94=B9=E6=88=90=E5=B1=82=E7=BA=A7=E4=B8=A2?=
=?UTF-8?q?=E5=A4=B1=E5=93=8D=E5=BA=94=E5=BC=8F=E7=9A=84=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/chart/ContentLayers/index.vue | 33 +++++++++++++++----------
1 file changed, 20 insertions(+), 13 deletions(-)
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index dcd61128..1c34c7b3 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -17,7 +17,7 @@
<n-text class="not-layer-text">暂无图层~</n-text>
</n-space>
<!-- https://github.com/SortableJS/vue.draggable.next -->
- <draggable item-key="id" v-model="reverseList" ghostClass="ghost" @change="onMoveCallback">
+ <draggable item-key="id" v-model="layerList" ghostClass="ghost" @change="onMoveCallback">
<template #item="{ element }">
<div class="go-content-layer-box">
<!-- 组合 -->
@@ -27,7 +27,7 @@
v-else
:componentData="element"
@mousedown="mousedownHandle($event, element)"
- @mouseenter="mouseenterHandle(element)"
+ @mouseenter="mouseenterHandle(element)"
@mouseleave="mouseleaveHandle(element)"
@contextmenu="handleContextMenu($event, element, optionsHandle)"
></layers-list-item>
@@ -38,7 +38,7 @@
</template>
<script setup lang="ts">
-import { computed, toRaw } from 'vue'
+import { computed, ref, watch } from 'vue'
import Draggable from 'vuedraggable'
import cloneDeep from 'lodash/cloneDeep'
import { ContentBox } from '../ContentBox/index'
@@ -58,9 +58,23 @@ import { icon } from '@/plugins'
const { LayersIcon } = icon.ionicons5
const chartLayoutStore = useChartLayoutStore()
const chartEditStore = useChartEditStore()
-
const { handleContextMenu, onClickOutSide } = useContextMenu()
+const layerList = ref<any>([])
+
+// 逆序展示
+const reverseList = computed(() => {
+ const list: Array<CreateComponentType | CreateComponentGroupType> = cloneDeep(chartEditStore.getComponentList)
+ return list.reverse()
+})
+
+watch(
+ () => reverseList.value,
+ newValue => {
+ layerList.value = newValue
+ }
+)
+
// 右键事件
const optionsHandle = (
targetList: MenuOptionsItemType[],
@@ -80,12 +94,6 @@ const optionsHandle = (
}
return targetList
}
-
-// 逆序展示
-const reverseList = computed(() => {
- const list: Array<CreateComponentType | CreateComponentGroupType> = cloneDeep(chartEditStore.getComponentList)
- return list.reverse()
-})
// 缩小
const backHandle = () => {
@@ -95,14 +103,13 @@ const backHandle = () => {
// 移动结束处理
const onMoveCallback = (val: any) => {
const { oldIndex, newIndex } = val.moved
- const moveTarget = toRaw(val.moved.element)
if (newIndex - oldIndex > 0) {
// 从上往下
- chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)
+ const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0]
chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget)
} else {
// 从下往上
- chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)
+ const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0]
if (newIndex === 0) {
chartEditStore.getComponentList.push(moveTarget)
} else {