fix(components): [splitter] display the mask after panel update (#22954)

* fix(components): [splitter] display the mask when there is no panel

* fix: update

packages/components/splitter/__tests__/splitter.test.tsx

@@ -411,4 +411,24 @@ describe('Splitter', () => {
     expect(panels[0].attributes('style')).toContain('flex-basis: 150px;')
     expect(panels[1].attributes('style')).toContain('flex-basis: 250px;')
   })
+
+  it('should not still display the mask after the panel updates', async () => {
+    const show = ref(true)
+    const wrapper = mount(() => (
+      <ElSplitter onResizeStart={() => (show.value = false)}>
+        <ElSplitterPanel v-if={show.value}>Left Panel</ElSplitterPanel>
+        <ElSplitterPanel>Right Panel</ElSplitterPanel>
+      </ElSplitter>
+    ))
+    await nextTick()
+
+    expect(wrapper.find('.el-splitter__mask').exists()).toBeFalsy()
+
+    const splitBar = wrapper.find('.el-splitter-bar__dragger')
+    const mousedown = new MouseEvent('mousedown', { bubbles: true })
+    Object.defineProperty(mousedown, 'pageX', { value: 200 })
+    splitBar.element.dispatchEvent(mousedown)
+    await nextTick()
+    expect(wrapper.find('.el-splitter__mask').exists()).toBeFalsy()
+  })
 })

packages/components/splitter/src/splitter.vue

@@ -37,6 +37,7 @@ const {
 } = useOrderedChildren<PanelItemState>(getCurrentInstance()!, 'ElSplitterPanel')
 
 watch(panels, () => {
+  movingIndex.value = null
   panels.value.forEach((instance: PanelItemState, index: number) => {
     instance.setIndex(index)
   })