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
Takagi 2024-04-18 12:24:06 +08:00 committed by GitHub
parent ab7c598f7b
commit 0ba50b806e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 18 deletions

View File

@ -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>

View File

@ -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>