JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 编辑器左边栏支持配置不可拖出，支持before-click函数配置

Browse Source
This commit is contained in:
roymondchen 2024-07-25 20:53:03 +08:00
parent 72a7c151e9
commit 837daf6cab
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/editor/src/layouts/sidebar/Sidebar.vue
View File

@ -5,11 +5,11 @@
class="m-editor-sidebar-header-item" class="m-editor-sidebar-header-item"
v-for="(config, index) in sideBarItems" v-for="(config, index) in sideBarItems"
v-show="!floatBoxStates[config.$key]?.status" v-show="!floatBoxStates[config.$key]?.status"
draggable="true" :draggable="config.draggable ?? true"
:key="config.$key ?? index" :key="config.$key ?? index"
:class="{ 'is-active': activeTabName === config.text }" :class="{ 'is-active': activeTabName === config.text }"
:style="config.tabStyle || {}" :style="config.tabStyle || {}"
@click="activeTabName = config.text || config.$key || `${index}`" @click="headerItemClickHandler(config, index)"
@dragstart="dragstartHandler" @dragstart="dragstartHandler"
@dragend="dragendHandler(config.$key, $event)" @dragend="dragendHandler(config.$key, $event)"
> >
@ -24,7 +24,7 @@
v-show="[config.text, config.$key, `${index}`].includes(activeTabName)" v-show="[config.text, config.$key, `${index}`].includes(activeTabName)"
> >
<component <component
v-if="config && !floatBoxStates[config.$key]?.status" v-if="config?.component && !floatBoxStates[config.$key]?.status"
:is="config.component" :is="config.component"
v-bind="config.props || {}" v-bind="config.props || {}"
v-on="config?.listeners || {}" v-on="config?.listeners || {}"
@ -284,6 +284,15 @@ watch(
}, },
); );
const headerItemClickHandler = async (config: SideComponent, index: number) => {
if (typeof config.beforeClick === 'function') {
if ((await config.beforeClick(config)) === false) {
return;
}
}
activeTabName.value = config.text || config.$key || `${index}`;
};
defineExpose({ defineExpose({
activeTabName, activeTabName,
}); });

2
packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
View File

@ -53,7 +53,7 @@ import type { MNode } from '@tmagic/schema';
import SearchInput from '@editor/components/SearchInput.vue'; import SearchInput from '@editor/components/SearchInput.vue';
import Tree from '@editor/components/Tree.vue'; import Tree from '@editor/components/Tree.vue';
import { useFilter } from '@editor/hooks/use-filter'; import { useFilter } from '@editor/hooks/use-filter';
import { LayerPanelSlots, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type'; import type { LayerPanelSlots, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
import LayerMenu from './LayerMenu.vue'; import LayerMenu from './LayerMenu.vue';
import LayerNodeTool from './LayerNodeTool.vue'; import LayerNodeTool from './LayerNodeTool.vue';

4
packages/editor/src/type.ts
View File

@ -385,6 +385,10 @@ export interface SideComponent extends MenuComponent {
icon?: any; icon?: any;
/** slide 唯一标识 key */ /** slide 唯一标识 key */
$key: string; $key: string;
/** 是否可以将面板拖出，默认为true */
draggable?: boolean;
/** 点击切换tab前调用，返回false阻止切换 */
beforeClick?: (config: SideComponent) => boolean | Promise<boolean>;
/** 组件扩展参数 */ /** 组件扩展参数 */
boxComponentConfig?: { boxComponentConfig?: {