console 命令行工具 X clear

console

const on = function () {
    if (document.addEventListener) {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            }
        };
    }
}();

const off = function () {
    if (document.removeEventListener) {
        return function (element, event, handler) {
            if (element && event) {
                element.removeEventListener(event, handler, false);
            }
        };
    } else {
        return function (element, event, handler) {
            if (element && event) {
                element.detachEvent('on' + event, handler);
            }
        };
    }
}();

let targetDrag = {  //托拽
    isDown: false,
    coord:{
        x: 0,
        y: 0
    }
}

//x轴拖动回调 鼠标按下
const scrollMousedown = event=>{
    targetDrag.isDown = true;
    targetDrag.coord.x = event.pageX;
    targetDrag.coord.y = event.pageY;
}
//x轴拖动回调  鼠标释放

const scrollMouseup = event=>{
    targetDrag.isDown = false;
    targetDrag.coord.x = 0;
    targetDrag.coord.y = 0;
}

new Vue({
  el: '#app',
  data: function() {
    return { 
      
    }
  },
  directives:{
    scroll:{
      inserted:function(el){
        //鼠标按下
        on(el,'mousedown',scrollMousedown);
        //鼠标释放
        on(el,'mouseup',scrollMouseup);
        //鼠标托拽
        on(el,'mousemove',event=>{
            let movX = targetDrag.coord.x - event.pageX;
            targetDrag.coord.x = event.pageX;
            if(targetDrag.isDown){
                el.scrollLeft = el.scrollLeft + movX;
            }
        });
    },
    unbind:function(el){
        off(el,'mousedown',scrollMousedown);
        off(el,'mouseup',scrollMouseup);
        off(el,'mousemove',scrollMousemove);
        //清空
        targetDrag = {  //托拽
            isDown: false,
            coord:{
                x: 0,
                y: 0
            }
        }
    }
    }
	}
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  
  
  <div id="app" v-scroll>
      <div id="content" >
        点击黑色区域，左右拖动
      </div>
  </div>
  
  
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</html>

#app{
  width:100%;
  overflow:hidden;
  overflow-x:scroll;
}
#content{
  width:3000px;
  height:500px;
  font-size:30px;
  color:#fff;
  background:#000;
}