From bd8b3ddc5eabd0d892a76ee4aab3dbe511760557 Mon Sep 17 00:00:00 2001 From: zhuchenxi Date: Sat, 9 Oct 2021 12:33:12 +0800 Subject: [PATCH] =?UTF-8?q?fix(build):=20=E4=BF=AE=E5=A4=8D=E5=9B=A0?= =?UTF-8?q?=E8=B0=83=E7=94=A8=20nextTick=20=E5=AF=BC=E8=87=B4=E6=9C=AA?= =?UTF-8?q?=E8=83=BD=E6=8D=95=E6=8D=89=E5=88=B0=E7=9A=84=E9=94=99=E8=AF=AF?= =?UTF-8?q?=EF=BC=8C=E5=AE=9E=E9=99=85=E4=B8=8A=E4=BB=8D=E7=84=B6=E6=98=AF?= =?UTF-8?q?=20ssr=20=E5=87=BA=E7=8E=B0=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/fullscreen/src/fullscreen.tsx | 19 +++--- devui/splitter/src/splitter-bar.tsx | 31 ++++------ devui/splitter/src/splitter-pane.tsx | 88 +++++++++++----------------- devui/splitter/src/splitter.tsx | 23 ++++---- 4 files changed, 66 insertions(+), 95 deletions(-) diff --git a/devui/fullscreen/src/fullscreen.tsx b/devui/fullscreen/src/fullscreen.tsx index d71c606c..99495bf5 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 abdc6210..949640cc 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 c588a518..b6f17388 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 e9afe95f..aa524e40 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 -- Gitee