|
@@ -1,10 +1,9 @@
|
|
|
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
|
|
|
import { TreeToolbars } from "@/modules/editor/objects/Toolbars";
|
|
|
import { css } from "@linaria/core";
|
|
|
import { Image } from "@queenjs/ui";
|
|
|
import { useReactive } from "@queenjs/use";
|
|
|
import { Tree } from "ant-design-vue";
|
|
|
-import { defineComponent, watch } from "vue";
|
|
|
+import { defineComponent, nextTick, watch } from "vue";
|
|
|
import { string } from "vue-types";
|
|
|
import { useEditor } from "../../../..";
|
|
|
import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
|
|
@@ -47,34 +46,34 @@ export const CompTree = defineComponent({
|
|
|
watch(
|
|
|
() => store.currCompId,
|
|
|
() => {
|
|
|
- state.expandedKeys = store.currCompId
|
|
|
- ? helper.getCompTrees(store.currCompId).map((comp) => comp.id)
|
|
|
- : [];
|
|
|
+ // expandedKeys需要等Tree的内部状态更新后再赋值
|
|
|
+ nextTick(() => {
|
|
|
+ state.expandedKeys = store.currCompId
|
|
|
+ ? helper.getCompTrees(store.currCompId).map((comp) => comp.id)
|
|
|
+ : [];
|
|
|
+ });
|
|
|
}
|
|
|
);
|
|
|
|
|
|
- return () => {
|
|
|
- return (
|
|
|
- <Tree
|
|
|
- class={treeStyle}
|
|
|
- treeData={state.treeData}
|
|
|
- v-model={[state.expandedKeys, "expandedKeys"]}
|
|
|
- selectedKeys={[store.currCompId]}
|
|
|
- blockNode={true}
|
|
|
- onSelect={(ids) => {
|
|
|
- const id =
|
|
|
- (ids[0] as string) || state.expandedKeys.at(-2) || "root";
|
|
|
- actions.pickComp(id);
|
|
|
- }}
|
|
|
- >
|
|
|
- {{
|
|
|
- title: (data: any) => {
|
|
|
- return <CompNode title={data.title} id={data.key} />;
|
|
|
- },
|
|
|
- }}
|
|
|
- </Tree>
|
|
|
- );
|
|
|
- };
|
|
|
+ return () => (
|
|
|
+ <Tree
|
|
|
+ class={treeStyle}
|
|
|
+ treeData={state.treeData}
|
|
|
+ v-model={[state.expandedKeys, "expandedKeys"]}
|
|
|
+ selectedKeys={[store.currCompId]}
|
|
|
+ blockNode={true}
|
|
|
+ onSelect={(ids) => {
|
|
|
+ const id = (ids[0] as string) || state.expandedKeys.at(-2) || "root";
|
|
|
+ actions.pickComp(id);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ title: (data: any) => {
|
|
|
+ return <CompNode title={data.title} id={data.key} />;
|
|
|
+ },
|
|
|
+ }}
|
|
|
+ </Tree>
|
|
|
+ );
|
|
|
},
|
|
|
});
|
|
|
|
|
@@ -101,11 +100,11 @@ const CompNode = defineComponent({
|
|
|
<Image src={thumbnail} size={240} />
|
|
|
<span class="w-0 flex-1 truncate">{props.title}</span>
|
|
|
<span class="space-x-4px">
|
|
|
- {actions.map((action) =>
|
|
|
+ {actions.map((action, i) =>
|
|
|
action.getVisible.call(editor, comp) ? (
|
|
|
<action.component
|
|
|
+ key={i}
|
|
|
class="p-4px"
|
|
|
- key={comp.id}
|
|
|
value={action.getValue?.(comp)}
|
|
|
onClick={(e: MouseEvent) => {
|
|
|
e.stopPropagation();
|