Antd-vue菜单宽度伸缩

最近使用antd的菜单时碰到一个问题,当菜单名称过长时会显示不全

于是我就想着是否可以将菜单的宽度改造成可以拉伸的样子

思路

思路1

通过ref获取到菜单的宽度

思路2

在菜单的右侧增加一个元素A,用来控制菜单的拉伸

思路3

当鼠标点击元素A并且按住鼠标时

   触发鼠标移动事件并将鼠标的X轴位置实时赋值给菜单的宽度

当鼠标点了元素A之后松开

   触发鼠标抬起事件 释放鼠标捕获

实现方法

自己写一下这个元素的样式

页面中

 <div class="menuMove" title="收缩菜单" @mousedown="menuDrag">        ┋  </div>

方法中

按住元素A拖动事件

 menuDrag() {      var menuMove = document.getElementsByClassName('menuMove')      let that = this // 鼠标移动事件      document.onmousemove = function(e) {        that.$refs.Menu.$el.style.minWidth = e.clientX + 'px'      } // 鼠标松开事件      document.onmouseup = function() {        document.onmousemove = null        document.onmouseup = null        menuMove.releaseCapture && menuMove.releaseCapture()      }    }