vue自定义指令dragHeight（实现拖拽）

底部向上拉伸的弹窗
import Vue from "vue"
Vue.directive('dragHeight', {
bind (el,binding){
const dom = el
dom.style.overflow = 'auto' //缩小框内的标签会超出dialog
//在该dom元素中来回移动中触发该事件
dom.onmousemove = (e) => {
// 获取元素宽度$("id").width()
// e.clientY为鼠标到浏览器窗口顶部的高度， dom.offsetTop为当前元素到浏览器窗口顶部的高度， el.scrollTop的值为0
if (el.scrollTop + e.clientY > dom.offsetTop - 10 && e.clientY < dom.offsetTop + 100) {
// 这里判断拉伸的图标
dom.style.cursor = 'n-resize'

                dom.onmousedown = function (e) {
                    const elH = dom.clientHeight  //元素本身的高度
                    const clientY = e.clientY  //鼠标向上的高度
                    const offsetTop = dom.offsetTop //元素向上高度
                    dom.style.userSelect = 'none'  //防止在点击的选择文本内容
                }
                document.onmousemove = (e) => {
                    e.preventDefault()
                    // 向上拉伸
                    if (clientY > e.clientY) {
                        // clientY - e.clientY为向上移动的距离
                        dom.style.height = elH + (clientY - e.clientY) + 'px'
                    }

                    if (clientY < e.clientY) {
                        dom.style.height = elH - (e.clientY - clientY) + 'px'
                    }
                }
                document.onmouseup = function (e) {
                    dom.onmousedown = null
                    dom.onmousemove = null
                }
            } else {
                dom.style.cursor = 'default'
                dom.onmousedown = null
            }
            
          }
        }
    })

左侧导航栏的左右拉伸
dom.onmousemove = (e) {
if (e.clientX > dom.clientWidth - 10 && e.clientX < dom.clientWidth + 50) {
dom.style.cursor = 'n-resize'
}
dom.onmousedown = (e) => {
const elW = dom.clientWidth
const clientX = e.clientX
}
}

注意： 在main.js引入该js文件

功能场景： 左侧导航栏（可以自动展开与叠起）然后旁边是个需要拉伸的目录，那么就需要动态的获取左侧导航栏的动态宽度，用js（document获取只能是初始的宽度的值，但是获取不到动态的宽度值，所以需要用jquery来获取元素宽度，在鼠标onmousemove事件中）

参考文献： https://www.runoob.com/cssref/pr-class-cursor.html