@@ -24,7 +26,9 @@ import { useZIndex } from './index';
import type { PopoverProps } from './types';
defineSlots<{
+ /** 触发 Popover 显示的 HTML 元素 */
reference(props: {}): any;
+ /** Popover 内嵌 HTML 文本 */
default(props: {}): any;
}>();
@@ -37,6 +41,8 @@ const props = withDefaults(defineProps
(), {
trigger: 'hover',
disabled: false,
visible: undefined,
+ tabindex: 0,
+ destroyOnClose: false,
});
const popoverVisible = ref(false);
@@ -84,12 +90,11 @@ onMounted(() => {
});
const zIndex = useZIndex();
-watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => {
+watch([referenceElementRef, popperElementRef, popoverVisible], ([referenceElement, popperElement, popoverVisible]) => {
destroy();
- if (!referenceElement || !popperElement) return;
+ if (!referenceElement || !popperElement || !popoverVisible) return;
popperElement.style.zIndex = `${zIndex.nextZIndex()}`;
- popperElement.focus();
instanceRef.value = createPopper(referenceElement, popperElement, {
placement: props.placement || 'bottom',
@@ -105,6 +110,10 @@ watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement
});
});
+const popperMouseenterHandler = () => {
+ popperElementRef.value?.focus();
+};
+
const clickHandler = () => {
if (props.disabled) return;
@@ -129,9 +138,9 @@ const mouseleaveHandler = () => {
clearTimeout(timer);
}
- timer = setTimeout(() => {
+ timer = globalThis.setTimeout(() => {
popoverVisible.value = false;
- }, 500);
+ }, 350);
};
if (props.trigger === 'click' && typeof props.visible === 'undefined') {
diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts
index e447bb5f..3118e2fa 100644
--- a/packages/design/src/types.ts
+++ b/packages/design/src/types.ts
@@ -230,6 +230,8 @@ export interface PopoverProps {
disabled?: boolean;
visible?: boolean;
popperClass?: string;
+ tabindex?: number;
+ destroyOnClose?: boolean;
}
export interface RadioProps {
diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts
index e51f3143..77ece155 100644
--- a/packages/editor/src/editorProps.ts
+++ b/packages/editor/src/editorProps.ts
@@ -82,7 +82,7 @@ export interface EditorProps {
/** 禁用属性配置面板右下角显示源码的按钮 */
disabledShowSrc?: boolean;
/** 中间工作区域中画布渲染的内容 */
- render?: (stage: StageCore) => HTMLDivElement | Promise;
+ render?: (stage: StageCore) => HTMLDivElement | void | Promise;
/** 选中时会在画布上复制出一个大小相同的dom,实际拖拽的是这个dom,此方法用于干预这个dom的生成方式 */
updateDragEl?: UpdateDragEl;
/** 用于设置画布上的dom是否可以被选中 */
diff --git a/packages/editor/src/layouts/page-bar/PageBar.vue b/packages/editor/src/layouts/page-bar/PageBar.vue
index 8e798e96..c6662689 100644
--- a/packages/editor/src/layouts/page-bar/PageBar.vue
+++ b/packages/editor/src/layouts/page-bar/PageBar.vue
@@ -24,7 +24,13 @@
-