50行代码用Vue实现可拖拽调节的分割布局

简介: 【10月更文挑战第4天】

image.png


当鼠标在分割线位置按下时
triggerDragging变量变为true

这时split-pane-wrapper的mousemove中判断triggerDragging
如果为true则改变leftOffset,pane-left的width就会随之改变

pane-trigger-con的width是固定的
而pane-right采用了弹性布局的flex: 1;
使其填充剩余部分,填充部分适合用于网页的内容展示部分

<template>
  <div class="split-pane-wrapper" @mousemove="mouseMoveTrigger">
    <div class="pane-left" :style="{ width: leftOffset + 'px' }"></div>
    <div class="pane-trigger-con" @mousedown="mouseDownTrigger"></div>
    <div class="pane-right"></div>
  </div>
</template>
<script>
export default {
   
  name: "Home",
  data() {
   
    return {
   
      leftOffset: 300,
      triggerDragging: false,
    };
  },
  methods: {
   
    mouseMoveTrigger(event) {
   
      if (!event.which) this.triggerDragging = false;
      if (this.triggerDragging) {
   
        this.leftOffset = event.clientX;
      }
    },
    mouseDownTrigger(event) {
   
      this.triggerDragging = true;
    },
  },
};
</script>
<style scoped>
.split-pane-wrapper {
   
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.pane-left {
   
  background: brown;
}
.pane-right {
   
  flex: 1;
  background: chartreuse;
}
.pane-trigger-con {
   
  width: 8px;
  background: red;
  cursor: ew-resize;
}
</style>
目录
相关文章
|
2天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
3天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
13 6
|
3天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
15 6
|
2天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
10 3
|
2天前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
8 1
|
1天前
|
缓存 JavaScript 数据管理
优化 Vue 应用中的性能
【10月更文挑战第22天】优化 Vue 应用性能需要综合考虑多个方面,从数据管理、组件化、虚拟 DOM 操作、网络请求、代码结构等多方面入手,不断进行优化和改进,以提供更流畅的用户体验。同时,要根据具体的应用场景和需求,选择合适的优化策略,确保性能优化的效果和可行性。
|
2天前
|
JavaScript 前端开发 C#
从入门到放弃,我们为何从 Blazor 回到 Vue
【10月更文挑战第29天】在前端开发中,许多开发者从尝试新技术 Blazor 最终回到熟悉的 Vue。主要原因包括:1) Blazor 学习曲线陡峭,Vue 上手容易;2) Vue 开发工具成熟,开发效率高;3) Vue 性能优异,优化简单;4) Vue 社区庞大,生态丰富;5) 项目需求和团队协作更适配 Vue。选择技术栈需综合考虑多方面因素。
|
5天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
35 7
|
5天前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
21 1
|
4天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
33 18