diff --git a/devui/fullscreen/src/fullscreen.tsx b/devui/fullscreen/src/fullscreen.tsx
index d71c606c019f6083d9777119dc4babde2ded25d9..99495bf5d60d31ce005dd725264aedb56d28a756 100644
--- a/devui/fullscreen/src/fullscreen.tsx
+++ b/devui/fullscreen/src/fullscreen.tsx
@@ -1,6 +1,6 @@
import './fullscreen.scss'
-import {
+import {
defineComponent,
useSlots,
renderSlot,
@@ -18,8 +18,7 @@ export default defineComponent({
let currentTarget = ref(null)
const isFullscreen = ref(false)
const slotElement = ref(null)
- const doc = document
-
+
const onFullScreenChange = () => {
if (currentTarget.value) {
const targetElement: HTMLElement = currentTarget
@@ -32,11 +31,11 @@ export default defineComponent({
exitNormalFullscreen(targetElement)
}
// F11退出全屏时，需要将全屏状态传出去
- isFullscreen.value = !!(doc.fullscreenElement)
+ isFullscreen.value = !!(document.fullscreenElement)
ctx.emit('fullscreenLaunch', isFullscreen.value)
}
}
-
+
// 页面全屏
const launchNormalFullscreen = (targetElement: HTMLElement) => {
targetElement.classList.add('fullscreen')
@@ -50,7 +49,7 @@ export default defineComponent({
targetElement.classList.remove('fullscreen')
targetElement.style.zIndex = null
}
-
+
// 事件监听
const handleFullscreen = async () => {
// const targetElement = document.querySelector('[fullscreen-target]')
@@ -124,15 +123,15 @@ export default defineComponent({
removeFullScreenStyle()
exitNormalFullscreen(targetElement)
} else {
- if (doc.fullscreenElement) { exitImmersiveFullScreen(doc) }
+ if (document.fullscreenElement) { exitImmersiveFullScreen(document) }
}
isFullscreen.value = false
ctx.emit('fullscreenLaunch', isFullscreen.value)
}
}
}
-
- onMounted (() => {
+
+ onMounted(() => {
const btnLaunch = slotElement.value.querySelector('[fullscreen-launch]')
if (btnLaunch) { btnLaunch.addEventListener('click', handleFullscreen) }
document.addEventListener('fullscreenchange', onFullScreenChange)
@@ -144,7 +143,7 @@ export default defineComponent({
const defaultSlot = renderSlot(useSlots(), 'default')
// if (defaultSlot.children.length === 0) throw new Error('未发现全屏元素')
return (
- { defaultSlot }
+ {defaultSlot}
)
}
}
diff --git a/devui/splitter/src/splitter-bar.tsx b/devui/splitter/src/splitter-bar.tsx
index abdc62109994f901935f8a79bccc04acdd20a004..949640cc016fb7acee67fb82e12cc375da5b82e4 100644
--- a/devui/splitter/src/splitter-bar.tsx
+++ b/devui/splitter/src/splitter-bar.tsx
@@ -25,31 +25,22 @@ export default defineComponent({
wrapperClass: `devui-splitter-bar devui-splitter-bar-${props.orientation}`,
})
const domRef = ref()
+ onMounted(() => {
+ watch([() => props.splitBarSize, domRef], ([curSplitBarSize, ele]) => {
+ if (!(ele instanceof HTMLElement)) {
+ return;
+ }
+ setStyle(ele, { flexBasis: curSplitBarSize })
+ }, { immediate: true })
- watch(
- () => props.splitBarSize,
- (curSplitBarSize) => {
- nextTick(() => {
- const ele = domRef?.value
- setStyle(ele, { flexBasis: curSplitBarSize })
- })
- },
- { immediate: true }
- )
-
- watch(
- () => store.state.panes,
- () => {
+ watch([() => store.state.panes, domRef], ([panes, ele]) => {
if (!store.isStaticBar(props.index)) {
state.wrapperClass += ' resizable'
} else {
- nextTick(() => {
- setStyle(domRef.value, { flexBasis: props.disabledBarSize })
- })
+ setStyle(ele, { flexBasis: props.disabledBarSize })
}
- },
- { deep: true }
- )
+ }, { deep: true })
+ })
// 指令输入值
const coordinate = { pageX: 0, pageY: 0, originalX: 0, originalY: 0 }
diff --git a/devui/splitter/src/splitter-pane.tsx b/devui/splitter/src/splitter-pane.tsx
index c588a5188d8f1bdf22ca39a46cc235de91c3c01b..b6f17388181b6fd359f72abdb19134f60091b862 100644
--- a/devui/splitter/src/splitter-pane.tsx
+++ b/devui/splitter/src/splitter-pane.tsx
@@ -21,38 +21,6 @@ export default defineComponent({
const store: SplitterStore = inject('splitterStore');
const domRef = ref();
const order = ref();
- watch(
- () => order.value,
- (order) => {
- nextTick(() => {
- const ele = domRef.value;
- setStyle(ele, { order });
- });
- }
- );
-
- // pane 初始化大小
- const setSizeStyle = (curSize) => {
- const ele = domRef.value;
- ele.style.flexBasis = curSize;
- const paneFixedClass = 'devui-splitter-pane-fixed';
- if (curSize) {
- // 设置 flex-grow 和 flex-shrink
- addClass(ele, paneFixedClass);
- } else {
- removeClass(ele, paneFixedClass);
- }
- };
-
- watch(
- () => props.size,
- (newSize) => {
- nextTick(() => {
- setSizeStyle(newSize);
- });
- },
- { immediate: true }
- );
const orientation = inject('orientation');
let initialSize = ''; // 记录初始化挂载传入的大小
@@ -75,37 +43,49 @@ export default defineComponent({
}
};
- const toggleCollapseClass = () => {
- const paneHiddenClass = 'devui-splitter-pane-hidden';
- nextTick(() => {
- const el = domRef.value;
- if (!props.collapsed) {
- removeClass(el, paneHiddenClass);
- } else {
- addClass(el, paneHiddenClass);
+
+ onMounted(() => {
+ watch([order, domRef], ([order, dom]) => {
+ if (!(dom instanceof HTMLElement)) {
+ return;
}
+ setStyle(dom, { order });
+ });
- if (props.collapsed && props.shrink) {
- removeClass(el, paneHiddenClass);
- setStyle(el, { flexBasis: `${props.shrinkWidth}px` });
+ watch(() => props.size, (curSize: string) => {
+ const ele = domRef.value;
+ ele.style.flexBasis = curSize;
+ const paneFixedClass = 'devui-splitter-pane-fixed';
+ if (curSize) {
+ // 设置 flex-grow 和 flex-shrink
+ addClass(ele, paneFixedClass);
} else {
- setStyle(el, { flexBasis: initialSize });
+ removeClass(ele, paneFixedClass);
}
- });
- };
+ }, { immediate: true });
- watch(
- () => props.collapsed,
- () => {
+ watch(() => props.collapsed, (collapsed: boolean) => {
+ const paneHiddenClass = 'devui-splitter-pane-hidden';
nextTick(() => {
- toggleCollapseClass();
+ const el = domRef.value;
+ if (!collapsed) {
+ removeClass(el, paneHiddenClass);
+ } else {
+ addClass(el, paneHiddenClass);
+ }
+
+ if (collapsed && props.shrink) {
+ removeClass(el, paneHiddenClass);
+ setStyle(el, { flexBasis: `${props.shrinkWidth}px` });
+ } else {
+ setStyle(el, { flexBasis: initialSize });
+ }
});
- },
- { immediate: true }
- );
+ }, { immediate: true });
+ });
// 收起时用于改变相邻 pane 的 flex-grow 属性来改变非自适应 pane 的 size
- const toggleNearPaneFlexGrow = (collapsed) => {
+ const toggleNearPaneFlexGrow = (collapsed: boolean) => {
nextTick(() => {
const flexGrowClass = 'devui-splitter-pane-grow';
if (hasClass(domRef.value, flexGrowClass)) {
diff --git a/devui/splitter/src/splitter.tsx b/devui/splitter/src/splitter.tsx
index e9afe95fc3cd7c1b306a89a67e2f3e2bc4f0f910..aa524e40fb66c60ba794eb739f3d456356f4a555 100644
--- a/devui/splitter/src/splitter.tsx
+++ b/devui/splitter/src/splitter.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, reactive, ref, provide, nextTick } from 'vue'
+import { defineComponent, reactive, ref, provide, nextTick, onMounted } from 'vue'
import { splitterProps, SplitterProps } from './splitter-types'
import DSplitterBar from './splitter-bar'
import { SplitterStore } from './splitter-store'
@@ -25,16 +25,17 @@ export default defineComponent({
provide('orientation', props.orientation)
provide('splitterStore', store)
-
- nextTick(() => {
- let containerSize = 0
- if (props.orientation === 'vertical') {
- containerSize = domRef.value.clientHeight
- } else {
- containerSize = domRef.value.clientWidth
- }
- store.setSplitter({ containerSize })
- })
+ onMounted(() => {
+ nextTick(() => {
+ let containerSize = 0
+ if (props.orientation === 'vertical') {
+ containerSize = domRef.value.clientHeight
+ } else {
+ containerSize = domRef.value.clientWidth
+ }
+ store.setSplitter({ containerSize })
+ })
+ });
return () => {
const { splitBarSize, orientation, showCollapseButton } = props