How to realize the draggable width div in vue

This article mainly introduces "how to realize the draggable width div in vue". In the daily operation, I believe that many people have doubts about how to realize the draggable width div in vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the question of "how to realize the draggable width div in vue". Next, please follow the editor to study!

Main ideas

Set a div in the area where you need to drag the width. The height is set to 100%, and the width is as narrow as possible (not too narrow, about 3~6px).

Bind on this div when "mouse down" triggers document binding "mouse move" method and "mouse up" method

Through the mouse movement method to continuously obtain the current mouse position, set the width and height of the div that needs to be changed.

Unbind the mouse movement method and the mouse lift method when the mouse is raised.

Left Tab left menu center area operating area export default {name: "dropWidth", mounted () {this.$nextTick (() = > {this.dropSize ();})}, methods: {dropSize () {let that = this, menuWidth = 200, operaHeight = 200 This.$refs.menuResize.onmousedown = function () {_ document.onmousemove = function (e) {let clientX = e.clientX; / / maximum width if (clientX > = 330) {clientX = 330;} / minimum width if (clientX)