tiny-vue icon indicating copy to clipboard operation
tiny-vue copied to clipboard

🐛 [Bug]: tiny-split支持拖拽,合并布局吗?例如通过嵌套使用template,分左,中上中下,右布局,拖拽右侧,将原中上中下右部分,合并成左,右两栏,其中原中上中下右部分作为现右侧多tabs页签展示

Open thestar077 opened this issue 8 months ago • 4 comments

Version

3.21

Vue Version

3.2.13

Link to minimal reproduction

🐛 [Bug]: tiny-split支持拖拽,合并布局吗?例如通过嵌套使用template,分左,中上中下,右布局,拖拽右侧,将原中上中下右部分,合并成左,右两栏,其中原中上中下右部分作为现右侧多tabs页签展示

<template>
  <div class="split-nest">
    <tiny-split v-model="split1" trigger-simple collapse-right-bottom three-areas>
      <template #left>
        <tiny-split v-model="split2" trigger-simple collapse-left-top 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">上面板</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 } from 'vue'
import { TinySplit } from '@opentiny/vue'

const split1 = ref(0.8)
const split2 = ref(0.25)
</script>

<style scoped>
.split-nest {
  height: 300px;
}

.split-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Step to reproduce

🐛 [Bug]: tiny-split支持拖拽,合并布局吗?例如通过嵌套使用template,分左,中上中下,右布局,拖拽右侧,将原中上中下右部分,合并成左,右两栏,其中原中上中下右部分作为现右侧多tabs页签展示

<template>
  <div class="split-nest">
    <tiny-split v-model="split1" trigger-simple collapse-right-bottom three-areas>
      <template #left>
        <tiny-split v-model="split2" trigger-simple collapse-left-top 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">上面板</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 } from 'vue'
import { TinySplit } from '@opentiny/vue'

const split1 = ref(0.8)
const split2 = ref(0.25)
</script>

<style scoped>
.split-nest {
  height: 300px;
}

.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

thestar077 avatar Mar 24 '25 10:03 thestar077

Bot detected the issue body's language is not English, translate it automatically.


Title: 🐛 [Bug]: Does tiny-split support drag and drop, merge layouts? For example, by nesting template, divide left, middle, upper, middle, lower, right layout, drag the right side, merge the original upper, middle, lower right parts into left and right columns, where the original upper, middle, lower right parts are displayed as the multi-tabs tabs on the right side.

Issues-translate-bot avatar Mar 24 '25 10:03 Issues-translate-bot

您提到的问题是关于 tiny-split 组件是否支持拖拽合并布局的功能。根据您提供的描述,您希望通过拖拽操作,将原有的布局合并成新的布局形式,并在右侧展示为多标签页签。

目前,tiny-split 组件的功能主要集中在分割布局和简单的拖拽调整尺寸上。对于您描述的复杂布局合并和多标签页签展示的功能,可能需要通过自定义实现或者结合其他组件来实现。

如果您希望此功能能够被官方支持,您可以考虑提交一个功能请求(Feature Request)到 opentiny/tiny-vue 的 GitHub 仓库中,以便开发团队评估和考虑在未来的版本中加入此功能。

如果您有其他问题或者需要进一步的帮助,请随时告诉我。

🪧 Tips For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

petercat-assistant[bot] avatar Mar 24 '25 10:03 petercat-assistant[bot]

Bot detected the issue body's language is not English, translate it automatically.


The question you mentioned is about whether the tiny-split component supports drag-and-drop merge layout functionality. According to the description you provide, you want to merge the original layout into a new layout form through drag and drop, and display it as a multi-tab tab on the right.

At present, the functions of the tiny-split component are mainly focused on split layout and simple drag-and-drop adjustment. The functions you describe for complex layout merging and multi-tab display may need to be implemented through custom implementations or combined with other components.

If you want this feature to be officially supported, you can consider submitting a Feature Request to the GitHub repository of opentiny/tiny-vue for the development team to evaluate and consider adding this feature in future releases.

If you have any other questions or need further assistance, feel free to let me know.

🪧 Tips For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

Issues-translate-bot avatar Mar 24 '25 10:03 Issues-translate-bot

It seems like you are referring to a previous response about the tiny-split component and its capabilities. If you have any further questions or need additional assistance regarding tiny-split or any other aspect of opentiny/tiny-vue, please feel free to ask!

🪧 Tips For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

petercat-assistant[bot] avatar Mar 24 '25 10:03 petercat-assistant[bot]