div宽度自适应_怎么在Vue项目中实现拖拽分割线自适应布局？

雷霆领主杨永信

于 2020-12-26 19:11:56 发布

阅读量926

点赞数

文章标签： div宽度自适应

本文链接：https://blog.csdn.net/weixin_34476159/article/details/112111252

版权

在Vue项目开发中遇到一个需求，需要实现页面左右布局，通过拖拽分割线来动态调整宽度。解决方案是监听分割线的事件，计算并更新左右DOM元素的宽度，达到自适应的效果。提供了模板、CSS和JavaScript部分的示例代码，并可下载查看完整示例。

摘要由CSDN通过智能技术生成

效果图

最近项目开发中遇到一个需求：页面左右布局，需要拖拽分割线，实现宽度自动适应。

总体来说，就是在mounted生命周期，监听分割线DOM的onmousedown事件，在拖拽过程中动态计算，然后赋值改变左右DOM元素的宽度，这样就大功告成了。

template部分：class为"touch-div"就是分割线DOM。

<template>
  <div class="wrap">
    <div class="lf" ref="letfDom" style="width: 280px;">
      <router-link to="/moreClick"

关注