vue下鼠标按住滑动

源码：

mounted(){
//   上面nav
        function $(a) {
            return document.getElementsByClassName(a);
        }
        /*怎么获取li的margin-right的值？
         * 如何用js获取某个元素的css样式
         *
         * */
        var navh = $("swipterWrap")[0];
//        console.log(navh);
        var ul = navh.children[0];
        var lis = ul.children;
        var movelong=0;        
//      鼠标点击向右
var directionright=document.getElementsByClassName('slibutton')[0];
directionright.addEventListener('click',function(){
movelong-=100;
if(movelong<-long){
              movelong=-long
              }
ul.style.transform="translateX("+movelong+"px)";
})
        /*元素.style.样式只能获取行内的样式
         * 如果你的行内没有这个样式，返回空白
         * */
        var ww = 200; 
//      console.log(ww+'ssee')
        var sty = window.getComputedStyle(lis[0], null);
        var ff = parseFloat(sty.marginRight);
//        什么什么。style。什么只能获取行内样式
        var ll = 0;
        for (let i = 0; i < lis.length; i++) {
            ll = lis[i].offsetWidth + ll + ff; 
            console.log(lis[i].offsetWidth);
// console.log(111111)
//         console.log(window.getComputedStyle(document.documentElement)["fontSize"]) 
//         console.log(lis[i].offsetWidth)
        } 
        ul.style.width = ll+180+ "px";
//      console.log(ul.style.width);
//      console.log(ll)
        var long = ll-50;
//      console.log(long+'ssss')
        /*滑动的范围等于 ul的宽减去父盒子的宽*/
//
//
//       /*滑动动画*/
//
        var starth = 0,
            moveh = 0,
            cch= 0,
            chah=0,
            flag=false;


        navh.addEventListener("mousedown",function(e){
            starth= e.clientX;
//          console.log(e.clientX);
            flag=true;            
     
            
        });
        navh.addEventListener("mousemove",function(e){
        if(flag){
        moveh= e.clientX;
              chah=moveh-starth;
               movelong=chah+cch; 
              if(movelong>0){
              movelong=0
              }else if(movelong<-long){
              movelong=-long
              }
//           console.log(movelong)
//           console.log(-long)
            ul.style.transform="translateX("+movelong+"px)";
        }           
        });

        navh.addEventListener("mouseup",function(e){
//       
            cch=cch+chah;
            flag=false;           
//          alert(long);
//          if(cch<-long){
//              cch=-long;
//              ul.style.transform="translateX("+cch+"px)";
//          }else if(cch>0){
//              cch=0;
//              ul.style.transform="translateX("+cch+"px)";
//          }
//          starth=0;
//          moveh=0;
//
        });


}

布局：

css：
.right .main .swipterWrap{
width: 2.55rem;
height: 1.4rem;
float: left; 
overflow: hidden;
}
.right .main .swipterWrap ul{
padding-top: 0.05rem;
transform: translateX(0px);
height: 1.5rem;  
transition: .5s;
}
.right .main .swipterWrap ul li{
width: 117px;
height: 1.10rem;
padding: .14rem .1rem 0rem 0.13rem;
border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
float: left;
margin-right: .09rem;  
    cursor: pointer;
    list-style: none;
    /*transition: 1s;*/   
}