[Splitter] 分割器的顶级容器使用 100vh 100vw 充满浏览器时（尺寸随浏览器的大小而变化），当浏览器改变宽度或者高度后，再进行拖拽出现鼠标位置和分隔条错位的bug

复现步骤
1、执行以下代码后，直接拖动分割线，交互是正常的
2、改变浏览器宽度，变大变小都可
3、再次拖动分割线，如果是改变了浏览器宽度，那就拖动左右布局的分割线，改变高度就拖动上下布局的分割线
4、会发现分割线是按着初始化时容器设定的比例计算的，出现跳动和无法交互的bug
```
<template>
  <section>
    <d-splitter class="splitter-border" style="height: 100vh" orientation="vertical">
      <template v-slot:DSplitterPane>
        <d-splitter-pane size="400px" minSize="100px" :sizeChange="sizeChange">
          <d-splitter style="height: 100%">
            <template v-slot:DSplitterPane>
              <d-splitter-pane size="30%" minSize="20%" :sizeChange="sizeChange">
                <div class="pane-content">
                  <h2>Left</h2>
                  <div>width: 30%, min-width: 20%</div>
                </div>
              </d-splitter-pane>
              <d-splitter-pane minSize="15%">
                <d-splitter style="height: 100%" orientation="vertical">
                    <template v-slot:DSplitterPane>
                      <d-splitter-pane size="50%" style="overflow: hidden">
                        <div class="pane-content">
                          <h2>Top</h2>
                          <div>height: 50%</div>
                        </div>
                      </d-splitter-pane>
                      <d-splitter-pane style="overflow: hidden">
                        <div class="pane-content">
                          <h2>Bottom</h2>
                          <div>height: auto</div>
                        </div>
                      </d-splitter-pane>
                   </template>
                </d-splitter>
              </d-splitter-pane>
            </template>
          </d-splitter>
        </d-splitter-pane>
        <d-splitter-pane style="overflow: hidden">
          <div class="pane-content">
            <h2>Bottom</h2>
            <div>height: auto</div>
          </div>
        </d-splitter-pane>
      </template>
    </d-splitter>
  </section>
</template>

export default defineComponent({
  name: "DSplitterDemoMulti",
  setup() {

const sizeChange = (size) => {
      console.log(size);
    }

return {
      sizeChange,
    }
  },
})
</script>

.splitter-border {
  border: 1px solid #dfe1e6;
}

</style>
```

DevUI/vue-devui

内容风险标识

评论 (0)

DevUI/vue-devui .gitee-modal { width: 500px !important; }

内容风险标识