vue 拖动改变布局

最新推荐文章于 2025-08-22 13:37:36 发布

原创最新推荐文章于 2025-08-22 13:37:36 发布 · 3.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3 #css

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种利用Vue和CSS3实现横向布局拖动调整的方法，通过CSS的calc()函数轻松计算并更新左右两侧元素的宽度，简化了传统通过$refs获取和计算宽度的过程。

横向布局需要拖动框选区域改变两边元素宽度

<template>
    <div> 
        <div :style="setLeftStyle()" class="view"></div>
        <div id="line" class="line"></div>
        <div :style="setRightStyle()" class="view"></div>
    </div>
</template>

<script>
    data(){
        return{
            width:400,     //默认右边div的宽度
            lastClientX:0 ,  //记录最后一次拖动的横向位置
        }
    },
    mounted(){
        const _this = this;
        this.$nextTick(() => {
            const moveDom = document.getElementById('line');   //拖动元素
            moveDom.onmousedown = function (e) {
              _this.clientStartX = e.clientX;
              document.onmousemove = function (e) {
                _this.moveHandle(e.clientX);
                return false
              };

            document.onmouseup = function () {
               document.onmousemove = null;
               document.onmouseup = null;
               _this.lastClientX = 0;       //清零
            };
          return false
        }
      })
    },
    methods:{
        moveHandle(nowClient) {
            if (this.lastClientX === 0) {   
              // 第一次拖动 记录起始位置  
              this.lastClientX = nowClient;
            } else {
              // 计算拖动的距离 赋值给右边div
              this.width += (this.lastClientX - nowClient);
              // 记录最后一个的拖动位置
              this.lastClientX = nowClient;
            }
       },
       setLeftStyle: function () {
          let wid= this.width+ 7 + 'px';
          //左边div的宽度 等于 100% - （右边div + line的宽度）
          return `width: calc(100% - ${wid});`     
       },
        setRightStyle: function () {
          let wid= this.width+'px';
          return `width:${wid};`
       },
    }
</script>

<style>
    .view{
        height: 100%;
        float: left;
        overflow: auto;
    }
    .line{
        float: left;
        width: 7px;
        height: 100%;
        background: #CEDEF5;
        border-radius: 5px;
        cursor: e-resize;
    }
</style>

之前有看到别的写法通过$refs获取左右两边的div 再通过计算确定两边宽度再赋值觉得复杂了
我这样写感觉很简单知道右边宽度左边的直接calc() 就可以了