可伸缩的aside 自定义指令

export const left2RightDrag = {  //从左到右
  inserted(el, binding) {
    const value = binding.value  //指令参数
    el.onmousedown = function(e) {
      const init = e.clientX
      const parent = el.parentNode   //父盒子
      const initWidth = parent.offsetWidth
      document.onmousemove = function(e) {
        const end = e.clientX
        const newWidth = end - init + initWidth
        if (newWidth < document.body.clientWidth - 10 && newWidth > 10) {
          parent.style.width = newWidth + 'px'
        }
      }
      document.onmouseup = function() {
        value && setLayout(value, parent.style.width)   //宽度通过localstorage传递

        document.onmousemove = document.onmouseup = null
      }
    }
  }
}

　　

使用

<template>
  <el-aside
    :width="currentWidth"
    class="ms-aside-container"
    :style="{'margin-left': !asideHidden ? 0 : '-' + currentWidth}"
  >
    <slot />
   
    <div v-left-to-right-drag="type" class="drag-bar" />
  </el-aside>
</template>


  props: {
//初始宽度
    width: {
      type: String,
      default: '260px'
    },
//可以设置不同类型aside
    type: {
      type: String,
      default: null
    }
  },
 computed: {
    currentWidth() {

      //getLayout获取本地的width
      return this.type && getLayout(this.type) || this.width
    }
  }