前端左右架子布局，可进行宽度的拖动

Question

需要写一个左右布局的架子，右边有类似于侧边栏一样，点击侧边栏的菜单可以进行弹出一个页面，比如我点击这个侧边栏后弹出弹窗，然后弹窗页面可以与左边的那个布局页面进行自由的比例拖拉。需要用element-plus组件库+vue3，但我不清楚这个具体怎么实现的。

Answer 1

引自免费微信小程序：皆我百晓生

为了实现这个功能，我们可以使用Element Plus提供的el-dialog（弹窗）和el-slider（滑块）组件，并结合Vue3的状态管理。首先安装Element Plus库：

npm install element-plus --save

接下来，我们将创建两个主要的Vue组件：MainLayout.vue 和 SideBar.vue。

1. 创建 MainLayout.vue

在这个文件中，我们将设置基本的左右布局并添加滑块用于调整窗口大小。

<template>
  <div class="main-layout">
    <el-row :gutter="20" style="height: 100vh;">
      <el-col :span="leftColWidth" ref="leftCol" class="left-col">
        <slot name="left"></slot>
      </el-col>
      <el-col :span="rightColWidth" ref="rightCol" class="right-col">
        <el-button @click="openDialog">打开侧边栏</el-button>
        <el-dialog :visible.sync="dialogVisible" title="侧边栏" width="60%" @close="dialogVisible = false">
          <slot name="dialogContent"></slot>
        </el-dialog>
      </el-col>
    </el-row>
    <el-slider v-model="sliderValue" range min="50" max="90" step="1" @change="onSliderChange"></el-slider>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const leftColWidth = ref(70);
const rightColWidth = ref(30);
const sliderValue = ref([leftColWidth.value, rightColWidth.value]);
const dialogVisible = ref(false);

function openDialog() {
  dialogVisible.value = true;
}

function onSliderChange(values) {
  const [minValue, maxValue] = values;
  if (minValue > maxValue) {
    [minValue, maxValue] = [maxValue, minValue];
  }
  leftColWidth.value = minValue;
  rightColWidth.value = maxValue;
}
</script>

<style scoped>
.main-layout {
  display: flex;
  height: 100%;
}

.left-col,
.right-col {
  position: relative;
  overflow-y: auto;
}

.el-slider__bar::before,
.el-slider__button-wrapper {
  background-color: #409EFF !important;
}

.el-dialog {
  top: 50px;
}
</style>

2. 创建 SideBar.vue

在这个文件中，我们将放置侧边栏的菜单。

<template>
  <div class="side-bar">
    <el-menu mode="vertical" @select="handleSelect">
      <el-submenu index="1">
        <template #title><i class="el-icon-setting"></i> 设置</template>
        <el-menu-item index="1-1">选项一</el-menu-item>
        <el-menu-item index="1-2">选项二</el-menu-item>
      </el-submenu>
      <!-- 添加更多菜单项 -->
    </el-menu>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelect(item) {
      this.$emit('select', item);
    },
  },
};
</script>

<style scoped>
.side-bar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 20px;
}
</style>

3. 在App.vue中使用这两个组件

<template>
  <div id="app">
    <MainLayout>
      <template #left>
        <SideBar @select="handleSelect" />
      </template>
      <template #dialogContent>
        <p>{{ selectedOption }}</p>
      </template>
    </MainLayout>
  </div>
</template>

<script>
import MainLayout from './components/MainLayout.vue';
import SideBar from './components/SideBar.vue';

export default {
  components: {
    MainLayout,
    SideBar,
  },
  data() {
    return {
      selectedOption: '',
    };
  },
  methods: {
    handleSelect(item) {
      this.selectedOption = item.index;
    },
  },
};
</script>

现在你应该有了一个带有左右布局的页面，可以通过滑块调整左侧和右侧的宽度。当在侧边栏选择一个菜单项时，会触发一个事件，将选中的选项显示在弹窗中。你可以根据需求添加更多的侧边栏菜单项。

注意：上述代码示例未包含 Element Plus 的样式导入，你需要在你的项目中全局引入 Element Plus 的样式，例如在 src/App.vue 或其他适当的地方：

<style>
@import "~element-plus/lib/theme-chalk/index.css";
</style>

同时确保已正确配置 Vue3 项目，并且已经安装了依赖。运行项目，你会看到预期的效果。