实现一个左右拖拽可以控制元素的宽度的需求，其实这个实现起来非常的简单

效果如下图：

步骤： 1、首先先写一个div元素

<div id="tuozhuai" class="tuozhuai" @mousedown="handleDown"></div>

2、然后获取这个div元素并给元素定义鼠标down事件，当触发事件的时候给元素绑定鼠标移动事件（获取元素也可以使用ref，因为我是在vue项目中实现的）

handleDown (edown) {

      var tuozhuaiNode = document.getElementById('tuozhuai')

      var xNum = edown.clientX - tuozhuaiNode.offsetWidth

      tuozhuaiNode.onmousemove = function (eMove) {

        tuozhuaiNode.style.width = eMove.clientX - xNum + 'px'

      }

    }

3、当松开鼠标的时候要给元素接触移动事件

注意： 在这里松开鼠标事件我是绑定在最外层元素上了，利用冒泡来触发这个事件，防止当你移出目标元素的时候没有触发解绑事件。

handleUp () {

      var tuozhuaiNode = document.getElementById('tuozhuai')

      tuozhuaiNode.onmousemove = null

    }

最后贴上完整代码：

<template>
  <div class="wrap" @mouseup="handleUp">

    <div id="tuozhuai" class="tuozhuai" @mousedown="handleDown"></div>

  </div>

</template>

<script>

export default {

  name: 'pdf',

  data () {

    return {

    }

  },

  methods: {

    handleUp () {

      var tuozhuaiNode = document.getElementById('tuozhuai')

      tuozhuaiNode.onmousemove = null

    },

    handleDown (edown) {

      var tuozhuaiNode = document.getElementById('tuozhuai')

      var xNum = edown.clientX - tuozhuaiNode.offsetWidth

      tuozhuaiNode.onmousemove = function (eMove) {

        tuozhuaiNode.style.width = eMove.clientX - xNum + 'px'

      }

    }

  }

}

</script>

<style lang="scss" scoped>

.wrap {

  width: 100%;

  height: 100%;

  background-color: pink;

}

.tuozhuai {

  width: 100px;

  height: 500px;

  border: 1px solid blue;

  cursor: e-resize;

}
</style>