opentiny
🐛 [Bug]: tiny-split使用嵌套，拖拽中下面板时，导致右侧面板过度动画不流畅，中部面板元素超出中部面板
Version
3.21
Vue Version
3.2.13
Link to minimal reproduction
<template>
<div class="split-nest">
<tiny-split v-model="split1" trigger-simple three-areas>
<template #left>
<tiny-split v-model="split2" trigger-simple three-areas>
<template #left>
<div class="split-content">内容 A 区</div>
</template>
<template #right>
<div class="split-content">
<tiny-split v-model="split1" mode="vertical" trigger-simple>
<!-- 上面板 -->
<template #top>
<div class="demo-split-pane">
<tiny-tabs v-model="activeName1" separator :editable="false" :with-close="true" :with-add="true" @add="handleadd" :before-close="beforeClose" @close="close">
<tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
{{ item.content }}
</tiny-tab-item>
</tiny-tabs>
</div>
</template>
<template #bottom>
<div class="demo-split-pane">下面板</div>
</template>
</tiny-split>
</div>
</template>
</tiny-split>
</template>
<template #right>
<div class="split-content">内容 C 区</div>
</template>
</tiny-split>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { TinySplit,TinyTabs, TinyTabItem } from '@opentiny/vue'
const split1 = ref(0.8)
const split2 = ref(0.25)
const activeName1 = ref('first')
const tabIndex = ref(2)
const tabs = ref([
{
title: '表单组件',
name: 'first',
content: '表单组件，具有与用户交互，并可完成数据采集功能的控件。 '
},
{
title: '数据组件',
name: 'second',
content: ' 数据组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件，帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件，与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件。',
withClose: false
}
])
const handleadd = () => {
console.log(222)
tabs.value.push({
title: 'Tab ++',
name: ++tabIndex.value + '',
content: '动态增加 tabitem'
})
}
const beforeClose=(name)=> {
// 只能关闭标签页“其他组件”
return name === 'fifth'
}
const close=(name)=> {
$message({
title: 'close 事件',
message: '关闭 ' + name + ' 页签'
})
tabs = tabs.filter((tab) => {
return tab.name !== name
})
}
</script>
<style scoped>
.split-nest {
height: 100%;
}
.split-content {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
Step to reproduce
<template>
<div class="split-nest">
<tiny-split v-model="split1" trigger-simple three-areas>
<template #left>
<tiny-split v-model="split2" trigger-simple three-areas>
<template #left>
<div class="split-content">内容 A 区</div>
</template>
<template #right>
<div class="split-content">
<tiny-split v-model="split1" mode="vertical" trigger-simple>
<!-- 上面板 -->
<template #top>
<div class="demo-split-pane">
<tiny-tabs v-model="activeName1" separator :editable="false" :with-close="true" :with-add="true" @add="handleadd" :before-close="beforeClose" @close="close">
<tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
{{ item.content }}
</tiny-tab-item>
</tiny-tabs>
</div>
</template>
<template #bottom>
<div class="demo-split-pane">下面板</div>
</template>
</tiny-split>
</div>
</template>
</tiny-split>
</template>
<template #right>
<div class="split-content">内容 C 区</div>
</template>
</tiny-split>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { TinySplit,TinyTabs, TinyTabItem } from '@opentiny/vue'
const split1 = ref(0.8)
const split2 = ref(0.25)
const activeName1 = ref('first')
const tabIndex = ref(2)
const tabs = ref([
{
title: '表单组件',
name: 'first',
content: '表单组件，具有与用户交互，并可完成数据采集功能的控件。 '
},
{
title: '数据组件',
name: 'second',
content: ' 数据组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件，帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件，与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件。',
withClose: false
}
])
const handleadd = () => {
console.log(222)
tabs.value.push({
title: 'Tab ++',
name: ++tabIndex.value + '',
content: '动态增加 tabitem'
})
}
const beforeClose=(name)=> {
// 只能关闭标签页“其他组件”
return name === 'fifth'
}
const close=(name)=> {
$message({
title: 'close 事件',
message: '关闭 ' + name + ' 页签'
})
tabs = tabs.filter((tab) => {
return tab.name !== name
})
}
</script>
<style scoped>
.split-nest {
height: 100%;
}
.split-content {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
What is expected
No response
What is actually happening
No response
What is your project name
demo
Any additional comments (optional)
No response
Bot detected the issue body's language is not English, translate it automatically.
Title: 🐛 [Bug]: tiny-split uses nesting. When dragging and dropping the lower panel, the right panel will be over-animated and the middle panel elements will exceed the middle panel.
感谢您提供详细的代码和描述。您提到在使用 tiny-split 组件嵌套时，拖拽下面板会导致右侧面板动画不流畅，并且中部面板的元素超出中部面板。
这个问题可能与 CSS 样式、组件的属性设置或事件处理有关。以下是一些可能的解决方案：
-
检查 CSS 样式：
- 确保所有面板的高度和宽度设置正确，避免使用固定的像素值，尽量使用百分比或
flex布局。 - 确保
.split-content和.demo-split-pane的样式不会导致内容溢出。
- 确保所有面板的高度和宽度设置正确，避免使用固定的像素值，尽量使用百分比或
-
调整组件属性：
- 确保
v-model绑定的值在合理范围内，避免面板过小或过大。 - 检查
trigger-simple和three-areas属性是否正确配置。
- 确保
-
优化动画：
- 如果动画不流畅，可以尝试减少动画的复杂性，或者在 CSS 中调整动画的持续时间和缓动函数。
-
调试事件处理：
- 确保事件处理函数（如
handleadd、beforeClose和close）不会阻塞主线程。 - 检查是否有不必要的 DOM 操作或复杂的计算影响了性能。
- 确保事件处理函数（如
如果这些建议没有解决问题，您可以尝试简化代码，逐步排查问题所在。或者，您可以提供更多的上下文信息，我将尽力帮助您解决问题。
🪧 Tips
For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.![petercat-assistant[bot] avatar](https://avatars.githubusercontent.com/in/875736?v=4 "Published by a pub.dev verified publisher"){kind=small}
Bot detected the issue body's language is not English, translate it automatically.
Thank you for the detailed code and description. You mentioned that when using the tiny-split component nesting, dragging the lower panel will cause the right panel animation to be unsmooth and the elements of the middle panel will exceed the middle panel.
This issue may be related to CSS styles, component property settings, or event handling. Here are some possible solutions:
-
Check CSS Style:
- Make sure that the height and width of all panels are set correctly, avoid using fixed pixel values, and try to use percentage or
flexlayout. - Make sure that the styles of
.split-contentand.demo-split-panedo not cause content overflow.
- Make sure that the height and width of all panels are set correctly, avoid using fixed pixel values, and try to use percentage or
-
Adjust component properties:
- Make sure that the value of
v-modelis within a reasonable range and avoid the panel being too small or too large. - Check that the
trigger-simpleandthree-areasproperties are configured correctly.
- Make sure that the value of
-
Optimized animation:
- If the animation is not smooth, you can try to reduce the complexity of the animation, or adjust the duration and easing functions of the animation in CSS.
-
Debug event handling:
- Ensure that event handlers such as
handleadd,beforeClose, andclosedo not block the main thread. - Check whether there are unnecessary DOM operations or complex calculations that affect performance.
- Ensure that event handlers such as
If these suggestions don't solve the problem, you can try simplifying the code and troubleshooting the problem step by step. Or, you can provide more context information and I will do my best to help you solve the problem.
🪧 Tips
For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.
It seems like you are sharing the same information again. If you have any further questions or need additional assistance regarding the tiny-split component or any other aspect of opentiny/tiny-vue, feel free to ask!
🪧 Tips
For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.
Bot detected the issue body's language is not English, translate it automatically.
This issue has been fixed