Vue中如何轻松实现可调整大小的容器布局——vue-resizeable组件教程介绍 vue-resizeable是一款

介绍

vue-resizeable是一款在vue项目中可调整各个区域大小的组件，支持任意组合，支持自定义样式

演示

体验地址

安装及使用

安装

npm i vue-resizeable

使用

全局注册

import { createApp } from 'vue'
import VueResizeable from 'vue-resizeable'
import 'vue-resizeable/style.css'

createApp(App).use(VueResizeable).mount('#app')

按需引入

<script setup>
    import { ResizeableContainer, ResizeablePanel, ResizeableSplitter } from 'vue-resizeable'
    import 'vue-resizeable/style.css'
</script>

ResizeableContainer：主区域，用来控制主轴方向

ResizeablePanel：每个可放大缩小的区域

ResizeableSplitter：可拖动分隔条，存在于ResizeablePanel之间，拖动控制面板大小

模板使用

<template>
  <!-- horizontal -->
  <ResizeableContainer direction="horizontal" style="height: 100vh">
    <ResizeablePanel style="min-width: 150px; background: #ffe0b2">Left</ResizeablePanel>
    <ResizeableSplitter />
    <ResizeablePanel :style="middleStyle">
      <!-- vertical -->
      <ResizeableContainer direction="vertical">
        <ResizeablePanel style="min-height: 150px">Top</ResizeablePanel>
        <ResizeableSplitter style="background: #000" />
        <ResizeablePanel style="height: 200px; min-height: 150px">center</ResizeablePanel>
        <ResizeableSplitter />
        <ResizeablePanel style="height: 300px; min-height: 50px; border: 1px solid #ccc">Bottom</ResizeablePanel>
      </ResizeableContainer>
    </ResizeablePanel>
    <ResizeableSplitter />
    <ResizeablePanel :style="rightStyle">Right</ResizeablePanel>
  </ResizeableContainer>
</template>

<script setup>
const rightStyle = {
  width: '500px',
  minWidth: '150px',
  border: '1px solid #ccc'
}
const middleStyle = {
  width: '500px',
  minWidth: '150px',
  border: '1px solid #ccc',
  display: 'flex',
  flexDirection: 'column',
  height: '100%',
  overflow: 'hidden'
}
</script>