拖动元素边缘改变宽度

最近有个需求，需要可以手动拖动侧边栏菜单，改变其宽度。如下：

要完成这个功能，我们需要了解以下前端知识：

1. 鼠标按下、抬起事件（mousedown、mouseup）
2. 鼠标移动事件（mousemove）
3. 鼠标按下时在屏幕上的位置 clientX
4. 鼠标hover到元素上鼠标样式
5. 为了使调整过程比较顺滑，需要用到css transition

好，差不多了，开整。

添加页面元素

<template>
  <div class="m_wrapper">
    <div class="left">
      <div class="side_bar">
        Side Menu
        <div class="handle"></div>
      </div>
    </div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos error illum laboriosam laudantium natus quaerat tempora voluptatibus! Beatae dolor doloribus ex facere, iste iure maiores perferendis perspiciatis qui vel. Eligendi?</div>
  </div>
</template>

添加元素样式

<style scoped>
.m_wrapper {
  display: flex;
  padding: 10px;
  user-select: none;
}
.m_wrapper .side_bar {
  width: 250px;
  height: 300px;
  background-color: rgba(13, 202, 240, 0.32);
  position: relative;
  transition: width linear 100ms;
  box-sizing: border-box;
}
.m_wrapper .right {
  margin-left: 10px;
  border: 1px solid #ccc;
}
.handle {
  height: 100%;
  width: 2px;
  position: absolute;
  right: -1px;
  top: 0;
  transition: all linear 200ms;
}
.handle:hover {
  background-color: #4578FF;
  cursor: col-resize;
}
</style>

添加鼠标移动逻辑

<script>
export default {
  name: "MouseMove",
  mounted() {
    let th  = this
    // 通过鼠标按下事件来监听鼠标移动事件
    document.addEventListener('mousedown', function (e) {
      th.x = e.clientX
      document.addEventListener('mousemove', th.move)
    })
    document.addEventListener('mouseup', function () {
      document.removeEventListener('mousemove', th.move)
    })
    this.target = document.querySelector('.side_bar')
  },
  data() {
    return {
      target: '',
      x: '',
    }
  },
  methods: {
    move(e) {
      if (e.clientX - this.target.offsetLeft> 400) {
        this.target.style.width = '400px'
      } else if (e.clientX - this.target.offsetLeft<200) {
        this.target.style.width = '200px'
      } else {
        this.target.style.width = e.clientX - this.target.offsetLeft + 'px'
      }
    },
  }
}
</script>

在线演示地址

文章首发于我的个人博客 《IICCOOM-拖动元素边缘改变宽度》