添加拖拽条改变外层容器宽度

【V3.0】使用自定义指令绑定拖拽

官方文档：
https://cn.vuejs.org/v2/guide/custom-directive.html#%E7%AE%80%E4%BB%8B

<div></div>
<div v-barDrag></div>
<div></div>

Vue.directive('barDrag', {
  bind (el, binding, vnode, oldVnode) {
    Vue.nextTick(() => { // 不用nextTick获取不到其他dom节点
      // 设置是否移动标识
      let removeFlag = false
      // 获取左边缩放的div对象
      let bar = el
      let dragLeft = el.previousElementSibling.style
      let dragRight = el.nextElementSibling.style
      let doc = el.parentNode
      let x = 0 // 鼠标的 X 和 Y 轴坐标
      // 挂载鼠标事件
      bar.addEventListener('mousedown', moveDownMouse, false)
      // 注意移动和鼠标失焦事件需要绑定在dom上，若只是绑定在bar上只能在bar上移动\失焦才有效
      doc.addEventListener('mousemove', mouseMove, false)
      doc.addEventListener('mouseup', mouseUp, false)

      function moveDownMouse (e) {
        removeFlag = true
        // 按下元素后 计算当前鼠标与对象计算后的坐标
        x = e.clientX - bar.offsetWidth - dragLeft.width.replace('px', '')
        // 支持 setCapture时 捕捉焦点 // 设置事件 // 绑定事件
        if (bar.setCapture) {
          bar.setCapture()
          bar.onmousemove = function (ev) {
            mouseMove(ev || event)
          }
          bar.onmouseup = mouseUp
        } else {
          // bar.addEventListener('mousemove', mouseMove, false)
          // bar.addEventListener('mouseup', mouseUp, false)
          // jQuery(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp)
        }
        // 防止默认事件发生
        e.preventDefault()
        store.state.