介绍

分享一个自己写的简单的双栏页面，中间有个拖动条，可以左右拖动来改变左右双栏的大小。感觉自己写很多功能可以用到挺方便的，避免重复造轮子。

代码

TwoColumnsResizView.vue

<template>
  <div class="tccontainer">
    <div class="sidebar" ref="sidebar">
      <slot   name="left"></slot>
    </div>
    <div class="resizer" @mousedown="startResize"></div>
    <div  class="main-content" ref="maincontent">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>

export default {
  methods:{
    startResize(event) {
      this.initX = event.clientX;
      this.sidebarWidth = this.$refs.sidebar.offsetWidth;
      this.mainWidth = this.$refs.maincontent.offsetWidth;

      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stopResize);
    },
    resize(event) {
      const deltaX = event.clientX - this.initX;
      this.$refs.sidebar.style.width = `${this.sidebarWidth + deltaX}px`;
      this.$refs.maincontent.style.width = `${this.mainWidth - deltaX}px`;
    },
    stopResize() {
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('mouseup', this.stopResize);
    },
  },
}
</script>

<style scoped>
.tccontainer {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: row;
}
.sidebar {
  background-color: #f0f0f0;
  width: 500px;
  min-width: 100px;
  overflow-x: auto;
}
.resizer {
  cursor: col-resize;
  background-color: #333;
  width: 5px;
  height: 100%;
}
.main-content {
  flex-grow: 1;
  overflow-x: auto;
  width:calc(100vw - 500px);
}
</style>

使用的时候使用左右插槽即可

<template>
  <TwoColumnsResizView>
    <template v-slot:left>
      <FeedListManagerView></FeedListManagerView>
    </template>
    <template v-slot:right>
      <FeedArticlesManagerView></FeedArticlesManagerView>
    </template>
  </TwoColumnsResizView>
</template>

<script setup>
import TwoColumnsResizView from "@/components/BaseComponents/TwoColumnsResizView.vue";
import FeedArticlesManagerView from "@/components/RSSFeedListManager/FeedArticlesManagerView.vue";
import FeedListManagerView from "@/components/RSSFeedListManager/FeedListManagerView.vue";
</script>

<style scoped>
</style>

其他

后期考虑做一个支持三栏分割，同样都支持左右拖动的组件