test/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2024-12-05 05:09:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 新增多选的右键处理

Browse Source
This commit is contained in:
奔跑的面条 2022-08-09 19:50:03 +08:00
parent fbc689b235
commit 5cadcc8259
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/chart/ContentEdit/components/EditGroup/index.vue
View File

@ -16,7 +16,7 @@
@mousedown="mousedownHandle($event, groupData)" @mousedown="mousedownHandle($event, groupData)"
@mouseenter="mouseenterHandle($event, groupData)" @mouseenter="mouseenterHandle($event, groupData)"
@mouseleave="mouseleaveHandle($event, groupData)" @mouseleave="mouseleaveHandle($event, groupData)"
@contextmenu="handleContextMenu($event, groupData, undefined, undefined, pickOptionsList)" @contextmenu="handleContextMenu($event, groupData, undefined, undefined)"
> >
<!-- 组合组件 --> <!-- 组合组件 -->
<edit-shape-box <edit-shape-box
@ -74,9 +74,6 @@ const props = defineProps({
const chartEditStore = useChartEditStore() const chartEditStore = useChartEditStore()
const { handleContextMenu } = useContextMenu() const { handleContextMenu } = useContextMenu()
// 右键
const pickOptionsList = [MenuEnum.UN_GROUP]
// 点击事件 // 点击事件
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle() const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()

2
src/views/chart/hooks/useContextMenu.hook.d.ts vendored
View File

@ -9,6 +9,8 @@ export enum MenuEnum {
UP = 'up', UP = 'up',
DOWN = 'down', DOWN = 'down',
CLEAR = 'clear', CLEAR = 'clear',
GROUP = 'group',
UN_GROUP = 'unGroup'
} }
export interface MenuOptionsItemType { export interface MenuOptionsItemType {

20
src/views/chart/hooks/useContextMenu.hook.ts
View File

@ -1,4 +1,4 @@
import { ref, nextTick, toRaw } from 'vue'; import { ref, nextTick, toRaw } from 'vue'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { renderIcon, loadingError } from '@/utils' import { renderIcon, loadingError } from '@/utils'
@ -13,7 +13,7 @@ const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Car
const chartEditStore = useChartEditStore() const chartEditStore = useChartEditStore()
// * 默认单组件选项 // * 默认单组件选项
const defaultOptions: MenuOptionsItemType[] = [ export const defaultOptions: MenuOptionsItemType[] = [
{ {
label: '复制', label: '复制',
key: MenuEnum.COPY, key: MenuEnum.COPY,
@ -79,7 +79,7 @@ const defaultOptions: MenuOptionsItemType[] = [
] ]
// * 默认多选组件选项 // * 默认多选组件选项
const defaultMultiSelectOptions: MenuOptionsItemType[] = [ export const defaultMultiSelectOptions: MenuOptionsItemType[] = [
{ {
label: '创建分组', label: '创建分组',
key: MenuEnum.GROUP, key: MenuEnum.GROUP,
@ -91,7 +91,7 @@ const defaultMultiSelectOptions: MenuOptionsItemType[] = [
key: MenuEnum.UN_GROUP, key: MenuEnum.UN_GROUP,
icon: renderIcon(Carbon3DCursorIcon), icon: renderIcon(Carbon3DCursorIcon),
fnHandle: chartEditStore.setUnGroup fnHandle: chartEditStore.setUnGroup
}, }
] ]
// * 无数据传递拥有的选项 // * 无数据传递拥有的选项
@ -105,9 +105,11 @@ const defaultNoItemKeys = [MenuEnum.PARSE, MenuEnum.CLEAR]
*/ */
const pickOption = (options: MenuOptionsItemType[], pickList?: MenuEnum[]) => { const pickOption = (options: MenuOptionsItemType[], pickList?: MenuEnum[]) => {
if (!pickList) return options if (!pickList) return options
return options.filter((op: MenuOptionsItemType) => { const list: MenuOptionsItemType[] = []
return pickList.findIndex((e: MenuEnum) => e === op.key) !== -1 pickList.forEach(e => {
list.push(...options.filter(op => op.key === e))
}) })
return list
} }
/** /**
@ -168,7 +170,11 @@ const handleContextMenu = (
} }
if (optionsHandle) { if (optionsHandle) {
// 自定义函数能够拿到当前选项和所有选项 // 自定义函数能够拿到当前选项和所有选项
menuOptions.value = optionsHandle(cloneDeep(toRaw(menuOptions.value)), [...defaultMultiSelectOptions, ...defaultOptions], item) menuOptions.value = optionsHandle(
cloneDeep(toRaw(menuOptions.value)),
[...defaultMultiSelectOptions, ...defaultOptions],
item
)
} }
nextTick().then(() => { nextTick().then(() => {
chartEditStore.setMousePosition(e.clientX, e.clientY) chartEditStore.setMousePosition(e.clientX, e.clientY)