JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-22 18:05:17 +08:00
Code Issues Projects Releases Wiki Activity

fix: 在tree上增加tabindex来监听focus事件,完善组件树多选体验

Browse Source
This commit is contained in:
parisma 2022-11-23 17:46:23 +08:00 committed by roymondchen
parent db91b3e6c6
commit 5ae32f0792
1 changed files with 65 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
packages/editor/src/layouts/sidebar/LayerPanel.vue
View File

@ -1,67 +1,68 @@
<template> <template>
<div ref="layerPanel" style="height: 100%"> <TMagicScrollbar class="magic-editor-layer-panel">
<TMagicScrollbar class="magic-editor-layer-panel"> <slot name="layer-panel-header"></slot>
<slot name="layer-panel-header"></slot>
<TMagicInput <TMagicInput
v-model="filterText" v-model="filterText"
class="search-input" class="search-input"
size="small" size="small"
placeholder="输入关键字进行过滤" placeholder="输入关键字进行过滤"
clearable clearable
:prefix-icon="Search" :prefix-icon="Search"
@change="filterTextChangeHandler" @change="filterTextChangeHandler"
></TMagicInput> ></TMagicInput>
<TMagicTree <TMagicTree
v-if="values.length" v-if="values.length"
class="magic-editor-layer-tree" tabindex="-1"
ref="tree" class="magic-editor-layer-tree"
node-key="id" ref="tree"
empty-text="页面空荡荡的" node-key="id"
draggable empty-text="页面空荡荡的"
:default-expanded-keys="defaultExpandedKeys" draggable
:load="loadItems" :default-expanded-keys="defaultExpandedKeys"
:data="values" :load="loadItems"
:default-expand-all="true" :data="values"
:expand-on-click-node="false" :default-expand-all="true"
:highlight-current="true" :expand-on-click-node="false"
:props="{ :highlight-current="true"
children: 'items', :props="{
}" children: 'items',
:filter-node-method="filterNode" }"
:allow-drop="allowDrop" :filter-node-method="filterNode"
:show-checkbox="isMultiSelectStatus || selectedIds.length > 1" :allow-drop="allowDrop"
@node-click="clickHandler" :show-checkbox="isMultiSelectStatus || selectedIds.length > 1"
@node-contextmenu="contextmenu" @node-click="clickHandler"
@node-drag-end="handleDragEnd" @node-contextmenu="contextmenu"
@node-collapse="handleCollapse" @node-drag-end="handleDragEnd"
@node-expand="handleExpand" @node-collapse="handleCollapse"
@check="multiClickHandler" @node-expand="handleExpand"
@mousedown="toggleClickFlag" @check="multiClickHandler"
@mouseup="toggleClickFlag" @mousedown="toggleClickFlag"
> @mouseup="toggleClickFlag"
<template #default="{ node, data }"> @mouseenter="mouseenterHandler"
<div @mouseleave="mouseleaveHandler"
:id="data.id" >
class="cus-tree-node" <template #default="{ node, data }">
@mouseenter="highlightHandler(data)" <div
:class="{ 'cus-tree-node-hover': canHighlight(data) }" :id="data.id"
> class="cus-tree-node"
<slot name="layer-node-content" :node="node" :data="data"> @mouseenter="highlightHandler(data)"
<span> :class="{ 'cus-tree-node-hover': canHighlight(data) }"
{{ `${data.name} (${data.id})` }} >
</span> <slot name="layer-node-content" :node="node" :data="data">
</slot> <span>
</div> {{ `${data.name} (${data.id})` }}
</template> </span>
</TMagicTree> </slot>
</div>
</template>
</TMagicTree>
<Teleport to="body"> <Teleport to="body">
<LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu> <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
</Teleport> </Teleport>
</TMagicScrollbar> </TMagicScrollbar>
</div>
</template> </template>
<script lang="ts" setup name="MEditorLayerPanel"> <script lang="ts" setup name="MEditorLayerPanel">
@ -263,24 +264,19 @@ watch([selectedIds, tree], async () => {
setTreeKeyStatus(); setTreeKeyStatus();
}); });
const layerPanel = ref<HTMLDivElement>();
const mouseenterHandler = () => { const mouseenterHandler = () => {
layerPanel.value?.focus(); tree.value?.$el.focus();
}; };
const mouseleaveHandler = () => { const mouseleaveHandler = () => {
layerPanel.value?.blur(); tree.value?.$el.blur();
// 如果鼠标移出监听范围，且当前只选中了一个，置为单选模式(修复按住ctrl不放但鼠标移出的情况) isMultiSelectStatus.value = false;
if (selectedIds.value.length === 1) isMultiSelectStatus.value = false;
}; };
let keycon: KeyController; let keycon: KeyController;
onMounted(() => { onMounted(() => {
layerPanel.value?.addEventListener('mouseenter', mouseenterHandler); keycon = new KeyController(tree.value?.$el);
layerPanel.value?.addEventListener('mouseleave', mouseleaveHandler);
keycon = new KeyController(layerPanel.value);
const isMac = /mac os x/.test(navigator.userAgent.toLowerCase()); const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
const ctrl = isMac ? 'meta' : 'ctrl'; const ctrl = isMac ? 'meta' : 'ctrl';
@ -289,9 +285,6 @@ onMounted(() => {
e.inputEvent.preventDefault(); e.inputEvent.preventDefault();
isMultiSelectStatus.value = true; isMultiSelectStatus.value = true;
}) })
.on('blur', () => {
isMultiSelectStatus.value = false;
})
.keyup(ctrl, (e) => { .keyup(ctrl, (e) => {
e.inputEvent.preventDefault(); e.inputEvent.preventDefault();
isMultiSelectStatus.value = false; isMultiSelectStatus.value = false;
@ -299,8 +292,6 @@ onMounted(() => {
}); });
onUnmounted(() => { onUnmounted(() => {
layerPanel.value?.removeEventListener('mouseenter', mouseenterHandler);
layerPanel.value?.removeEventListener('mouseleave', mouseleaveHandler);
keycon.destroy(); keycon.destroy();
}); });