vue 可拖动调整宽度的侧边栏

使用vue变量来控制侧边栏宽度
不受窗口大小影响

在这里插入图片描述

 

<template>
  <div class="page">
    <div class="top">顶部导航</div>
    <div id="box">
      <div id="left">
        主界面
      </div>
      <div id="resize"></div>
      <div id="right" v-bind:style="{ width: detailWidth + 'px' }">
        侧边栏 width: {{ detailWidth }}
      </div>
      <p></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "page",
  props: {
    msg: String
  },
  data: function() {
    return {
      detailWidth: 200
    };
  },
  methods: {
    dragControllerDiv: function() {
      // 保留this引用
      let data = this;
      let resize = document.getElementById("resize");
      resize.onmousedown = function(e) {
        // 颜色改变提醒
        resize.style.background = "#818181";
        let startX = e.clientX;
        resize.left = resize.offsetLeft;
        document.onmousemove = function(e) {
          // 计算并应用位移量
          let endX = e.clientX;
          let moveLen = endX - startX;
          startX = endX;
          data.detailWidth -= moveLen;
        };
        document.onmouseup = function() {
          // 颜色恢复
          resize.style.background = "";
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    }
  },
  mounted() {
    this.dragControllerDiv();
  }
};
</script>

<style scoped>
#box {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  display: flex;
}
.top {
  width: 100%;
  height: 80px;
  background: #ffe0c6;
}
#left {
  height: 100%;
  background: #ffc5c1;
  flex: 1;
}

#resize {
  width: 5px;
  height: 100%;
  cursor: w-resize;
}

#right {
  height: 100%;
  background: #ffc0cb;
}
</style>


————————————————
版权声明:本文为CSDN博主「3D_DLW」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/DLW__/article/details/106039428

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值