Vue3 使用vue-resizer拖动改变左右2栏的宽度 比例resize

Vue3, 页面左右2栏布局，需要可以拖动改变左右2栏大小。原来打算用vue-draggable-resizable,简单尝试了下，发现页面布局乱了，调了一会儿没调好就放弃了，而且那个8个小矩形表示可以拖拽也不符合UI.改用vue-resizer.页面效果如下图。

安装pnpm i vue-resizer

引入import { DragCol, DragRow, ResizeCol, ResizeRow, Resize } from 'vue-resizer'

  <DragCol height="100%" width="100%" :leftPercent="15">
      <template #left>
        // 左侧内容
        <div class="left_tree">
          ...省略
          </div>
        </div>
      </template>
      <template #right>
         // 右侧内容省略
         ...
      </template>
    </DragCol>

自定义样式

<style>
.drager_col {
  background-color: #fff !important;
  height: 100vh !important;
  // 改变滑块列的样式
  .slider_col {
    background-color: #f8f8f8 !important;
  }
  .slider_col:hover {
    background-color: #f8f8f8 !important;
  }
  .slider_col:activate {
    background-color: #f8f8f8 !important;
  }
}
</style>

// 注意左右2列布局宽度不要写死，不然没法拖动的时候自适应宽度
<style lang="less" scoped>
// 设置左列宽度100% 但是默认只有15%的宽度:leftPercent="15"
.left_tree {
  width: 100%;
}

PS: 我按照官网那样定义props给width,height没有生效，始终都是400px,但是又不能强制写死宽度!important,那样拖动就改变不了宽度了，所以没有用props定义属性，而是这种方式<DragCol height="100%" width="100%" :leftPercent="15">

参考链接：
官方文档