mirror of https://github.com/halo-dev/halo
pref: optimize the pop-up mode of toolbar submenu (#5682)
#### What type of PR is this? /kind improvement /area editor #### What this PR does / why we need it: 优化默认富文本编辑器中,顶部工具栏子菜单的弹出方式,将原有的鼠标移入弹出改为点击左键弹出。并且为了显示效果,将会在具有子菜单的工具栏后方显示额外的下拉图标。 #### How to test it? 查看顶部工具栏子菜单弹出方式是否已改变。(插入组件未进行更改,仍旧保持原有鼠标移入弹出方式) #### Which issue(s) this PR fixes: Fixes #5668 #### Does this PR introduce a user-facing change? ```release-note 优化默认富文本编辑器中顶部工具栏的子菜单弹出方式 ```pull/5724/head^2
parent
ab7c598f7b
commit
0ba50b806e
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts" setup>
|
||||
import { Menu as VMenu } from "floating-vue";
|
||||
import { Menu as VMenu, Dropdown as VDropdown } from "floating-vue";
|
||||
import { Editor, type AnyExtension } from "@/tiptap/vue-3";
|
||||
import MdiPlusCircle from "~icons/mdi/plus-circle";
|
||||
import type { ToolbarItem, ToolboxItem } from "@/types";
|
||||
|
@ -93,22 +93,34 @@ function getToolboxItemsFromExtensions() {
|
|||
v-bind="item.props"
|
||||
tabindex="-1"
|
||||
/>
|
||||
<VMenu v-else class="inline-flex" tabindex="-1">
|
||||
<component :is="item.component" v-bind="item.props" tabindex="-1" />
|
||||
<template #popper>
|
||||
<div
|
||||
class="relative rounded-md bg-white overflow-hidden drop-shadow w-48 p-1 max-h-72 overflow-y-auto"
|
||||
>
|
||||
<component
|
||||
v-bind="child.props"
|
||||
:is="child.component"
|
||||
v-for="(child, childIndex) in item.children"
|
||||
:key="childIndex"
|
||||
tabindex="-1"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VMenu>
|
||||
<template v-else>
|
||||
<VDropdown
|
||||
class="inline-flex"
|
||||
tabindex="-1"
|
||||
:triggers="['click']"
|
||||
:popper-triggers="['click']"
|
||||
>
|
||||
<component
|
||||
:is="item.component"
|
||||
v-bind="item.props"
|
||||
:children="item.children"
|
||||
tabindex="-1"
|
||||
/>
|
||||
<template #popper>
|
||||
<div
|
||||
class="relative rounded-md bg-white overflow-hidden drop-shadow w-48 p-1 max-h-72 overflow-y-auto"
|
||||
>
|
||||
<component
|
||||
v-bind="child.props"
|
||||
:is="child.component"
|
||||
v-for="(child, childIndex) in item.children"
|
||||
:key="childIndex"
|
||||
tabindex="-1"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VDropdown>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
<script lang="ts" setup>
|
||||
import type { Component } from "vue";
|
||||
import { VTooltip } from "floating-vue";
|
||||
import IconArrowDown from "~icons/ri/arrow-down-s-fill";
|
||||
import type { ToolbarItem } from "@/types";
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
|
@ -9,6 +11,7 @@ withDefaults(
|
|||
title?: string;
|
||||
action?: () => void;
|
||||
icon?: Component;
|
||||
children: ToolbarItem[];
|
||||
}>(),
|
||||
{
|
||||
isActive: false,
|
||||
|
@ -16,6 +19,7 @@ withDefaults(
|
|||
title: undefined,
|
||||
action: undefined,
|
||||
icon: undefined,
|
||||
children: undefined,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
@ -28,11 +32,12 @@ withDefaults(
|
|||
{ 'cursor-not-allowed opacity-70': disabled },
|
||||
{ 'hover:bg-gray-100': !disabled },
|
||||
]"
|
||||
class="p-1 rounded-sm"
|
||||
class="inline-flex items-center space-x-1 p-1 rounded-sm"
|
||||
:disabled="disabled"
|
||||
tabindex="-1"
|
||||
@click="action"
|
||||
>
|
||||
<component :is="icon" />
|
||||
<IconArrowDown v-if="children?.length" />
|
||||
</button>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue