fix(editor): 组件树右键菜单子菜单出不来

This commit is contained in:
roymondchen 2022-04-01 11:37:03 +08:00 committed by khuntoriia
parent faa6c6d9fe
commit be4df0fc9b

View File

@ -3,8 +3,8 @@
<div <div
v-if="node.items" v-if="node.items"
class="magic-editor-content-menu-item" class="magic-editor-content-menu-item"
@mouseenter="setSubVisiable(true)" @mouseenter="setSubVisitable(true)"
@mouseleave="setSubVisiable(false)" @mouseleave="setSubVisitable(false)"
> >
新增 新增
</div> </div>
@ -16,7 +16,7 @@
> >
删除 删除
</div> </div>
<div class="subMenu" v-show="subVisible" @mouseenter="setSubVisiable(true)" @mouseleave="setSubVisiable(false)"> <div class="subMenu" v-show="subVisible" @mouseenter="setSubVisitable(true)" @mouseleave="setSubVisitable(false)">
<el-scrollbar> <el-scrollbar>
<template v-if="node.type === 'tabs'"> <template v-if="node.type === 'tabs'">
<div <div
@ -31,20 +31,8 @@
标签 标签
</div> </div>
</template> </template>
<template v-else-if="node.type === 'app'">
<div
class="magic-editor-content-menu-item"
v-for="item in menu.app"
:key="item.type"
@click="() => append(item)"
>
{{ item.text }}
</div>
</template>
<template v-else-if="node.items"> <template v-else-if="node.items">
<div v-for="list in menu.component" :key="list.title"> <div v-for="list in componentGroupList" :key="list.title">
<template v-for="item in list.items"> <template v-for="item in list.items">
<div class="magic-editor-content-menu-item" v-if="item" :key="item.type" @click="() => append(item)"> <div class="magic-editor-content-menu-item" v-if="item" :key="item.type" @click="() => append(item)">
{{ item.text }} {{ item.text }}
@ -59,21 +47,16 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, inject, PropType, ref } from 'vue'; import { computed, defineComponent, inject, ref } from 'vue';
import type { ComponentGroup, Services } from '@editor/type'; import type { MNode } from '@tmagic/schema';
import type { AddMNode, Services } from '@editor/type';
export default defineComponent({ export default defineComponent({
name: 'magic-editor-content-menu', name: 'magic-editor-content-menu',
props: { setup() {
componentGroupList: {
type: Array as PropType<ComponentGroup[]>,
default: () => [],
},
},
setup(props) {
const services = inject<Services>('services'); const services = inject<Services>('services');
const subVisible = ref(false); const subVisible = ref(false);
const node = computed(() => services?.editorService.get('node')); const node = computed(() => services?.editorService.get('node'));
@ -83,17 +66,9 @@ export default defineComponent({
node, node,
menu: computed(() => ({ componentGroupList: computed(() => services?.componentListService.getList()),
app: [
{
type: 'page',
text: '页面',
},
],
component: props.componentGroupList,
})),
append(config: any) { append(config: AddMNode) {
services?.editorService.add({ services?.editorService.add({
name: config.text, name: config.text,
type: config.type, type: config.type,
@ -104,11 +79,11 @@ export default defineComponent({
node.value && services?.editorService.remove(node.value); node.value && services?.editorService.remove(node.value);
}, },
copy(node: any) { copy(node?: MNode) {
services?.editorService.copy(node); node && services?.editorService.copy(node);
}, },
setSubVisiable(v: any) { setSubVisitable(v: boolean) {
subVisible.value = v; subVisible.value = v;
}, },
}; };