http://www.cnblogs.com/mdengc. google to implement this v-selectable does not know to meet the requirements

export default (Vue, options = {}) =>{
    const listener = (ele, binding) =>{
        let reactArea = {
            startX: 0,
            startY: 0,
            endX: 0,
            endY: 0
        }
        //
        let isMouseDown = false
        let areaSelect = {}
        //relative
        ele.style.position = 'relative'
        ele.addEventListener('mousedown', function(e) {
            reactArea.startX = e.layerX;
            reactArea.startY = e.layerY;
            isMouseDown = true
        })

        ele.addEventListener('mousemove', function(e) {
             if(isMouseDown){
                 let preArea = ele.getElementsByClassName('v-selected-area')
                if(preArea.length){
                    ele.removeChild(preArea[0])
                }
                reactArea.endX = e.layerX
                reactArea.endY = e.layerY
                let leftValue = 0
                let topValue = 0
                let widthValue = Math.abs(reactArea.startX - reactArea.endX)
                let heightValue =  Math.abs(reactArea.startY - reactArea.endY)

                if(reactArea.startX >= reactArea.endX){
                    leftValue = reactArea.endX
                }else{
                    leftValue = reactArea.startX
                }
                if(reactArea.startY > reactArea.endY ){
                    topValue = reactArea.endY
                }else{
                    topValue = reactArea.startY
                }

                //
                if(reactArea.startX != reactArea.endX && reactArea.startY !=reactArea.endY){
                    areaSelect = document.createElement('div')
                    areaSelect.classList.add("v-selected-area")
                    areaSelect.style.position = "absolute";
                    areaSelect.style.left = leftValue + 'px'
                    areaSelect.style.top = topValue + 'px'
                    areaSelect.style.width = widthValue + 'px'
                    areaSelect.style.height = heightValue + 'px'
                    areaSelect.style.border = "1px dashed grey"
                    ele.append(areaSelect)
                }

                let children = ele.getElementsByTagName('li')
                for(let i =0 ; i < children.length ; i PP ){
                    let childrenHeight = children[i].getBoundingClientRect().height
                    let childrenWidth = children[i].getBoundingClientRect().width
                    //li
                    let offsetLeft = children[i].offsetLeft
                    let offsetTop = children[i].offsetTop
                    //li
                    let endPositionH = childrenHeight + offsetTop
                    let endPositionW = childrenWidth + offsetLeft
                    //
                    //
                    let require1 = endPositionH > topValue && endPositionW > leftValue && endPositionH < topValue + heightValue && endPositionW < leftValue + widthValue
                    //
                    let require2 = offsetTop > topValue && offsetLeft > leftValue && offsetTop < topValue + heightValue && offsetLeft < leftValue + widthValue
                    //
                    let require3 = offsetTop > topValue && offsetLeft + childrenWidth > leftValue && offsetTop < topValue + heightValue && offsetLeft + childrenWidth< leftValue + widthValue
                    //
                    let require4 = offsetTop + childrenHeight > topValue && offsetLeft > leftValue && offsetTop + childrenHeight < topValue + heightValue && offsetLeft < leftValue + widthValue
                    //
                    let require5 = offsetTop < topValue && offsetLeft < leftValue && offsetTop + childrenHeight > topValue + heightValue && offsetLeft + childrenWidth > leftValue + widthValue

                    if(require1 || require2 || require3 || require4 || require5){
                        children[i].classList.add('active')
                    }else{
                        children[i].classList.remove('active')
                    }
                }
             }
        })

        ele.addEventListener('mouseup', function(e) {
            isMouseDown = false
            if(areaSelect && areaSelect.childNodes && ele.contains(areaSelect)){
                ele.removeChild(areaSelect)
            }
            areaSelect = null
        })
    }

     Vue.directive('selectable',{
        inserted:listener,
        updated:listener
    })
}