vue 侧边可拖动导航栏(展开及收缩)_侧边导航收起

效果:

1.点击收起按钮,导航栏收起,鼠标移动到导航栏cursor:move鼠标移动光标提示导航栏可移动,鼠标移动到img上cursor:pointer出现小手,提示可点击跳转

2.导航栏展开或收起可移动到任何位置展开收起,展开或收起的位置随移动的位置改变

代码部分:

<template>
    <div id="index_tip_" :style="{padding:'20px 0',top:showIcon?boxTop:box2Top}">
       <div id="index_tip_in" v-show="showIcon">
       <div class="center center0" >
       <img @click="toItPageFn" src="../../../static/images/IT5000.png" alt="" />
       </div>
       <div class="center center1">
       <img  @click="toCommontProblemFn" src="../../../static/images/IT6000.png" alt=""/> 
       </div>
       <div class="center center2">
       <img  @click="toOperationFn" src="../../../static/images/IT7000.png" alt="" />
       </div>
       <div class="center center3"> 
       <div  @click="toOpenOrCloseFn(2)" class="iconfont iconpullup01"> 
       </div> 收起</div>
       </div>
 
       <div v-show="!showIcon" class="open-icon" >   
        <img  @click="showIcon=true" src="../../../static/images/IT4000.png" alt="" />
        <div class="iconfont iconpulldown01" @click="toOpenOrCloseFn(1)"></div>
        <div class="title">展开</div>
      </div>
    </div>
</template>
<script>
export default{
//main.js:Vue.prototype.$pageHeight = 1 * 100 + 'vh' 
  data(){
return{
 showIcon: true,
   boxTop:`calc(${this.$pageHeight} - 340px)`,
   box2Top:`calc(${this.$pageHeight} - 170px)`}
}
}
 mounted() { this.getmoveFn()}
methods:{
    toOpenOrCloseFn(flag){
      this.showIcon=flag==1
      let box=document.getElementById("index_tip_");
      this.boxTop=box.offsetTop+"px"
      this.box2Top=box.offsetTop+"px"
    },
  getmoveFn(){
      let divX=0;
        let divY=0;
        let mouseX=0;
        let mouseY=0;
       let box=document.getElementById("index_tip_");
        //为box绑定一个鼠标按下事件
        if(box){
           box.onmousedown=function(e){
          console.log(e);
            //获取盒子距离浏览器可视窗口的水平距离和垂直距离
            divX=this.offsetLeft;
            divY=this.offsetTop;
            //获取鼠标距离浏览器可视窗口的水平位置和垂直位置
            mouseX=e.clientX;
            mouseY=e.clientY;
            //为全局绑定一个鼠标移动事件（1.为什么不给box绑定？）
            document.onmousemove=function(e){
 
                //获取移动后的水平偏移量和垂直偏移量
                let disX=e.clientX-mouseX;
                let disY=e.clientY-mouseY;
                //令箱子移动：移动前的位置+移动后的位置
                box.style.left=disX+divX+"px";
                box.style.top=disY+divY+"px";
            }
            //为盒子绑定一个鼠标移出事件,使箱子停止移动
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
        }
    } 
     },
 
  toItPageFn(){},
  toCommontProblemFn() {},
  toOperationFn() {},
}
 
</script>
<style lang='less'>
#index_tip:hover {
  .open-icon {
         .iconfont{
        font-size: 33px !important;
         }
         img{
          width:81%;
         }
  }
}
 
#index_tip_{
  position: fixed;
  right: 16px;
  width:65px;
  z-index: 99999999;
  box-shadow: -1px 0px 7px #d3daeb;
  background-color: #ffffff;
  cursor: move;
  border-radius: 50px;
  #index_tip_in{
    img{
    margin: 10px 0;
    width: 80%;
    cursor: pointer;
  }
  img:hover {
    width: 83%;
    height: 32%;
    background-color: #eef4ff !important;
  }
  }
  .center3{
    font-size: 12px;
    color: rgb(51, 49, 49);
    font-weight: 550;
    margin-bottom: 9px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      .iconpullup01{   
        width: 50%;
       margin-left: 16px;
       font-size: 30px !important;
       color:  #bacdff;
  }
  }
  .open-icon {
    text-align: center;
    .title {
      color: #000;
      margin-bottom:8px;
      margin-top: -2px;
    
    }
    .iconfont {
      font-size: 25px !important;
      color:  #bacdff;
    }
    img{
      width:80%;
    }
    img:hover{
      width:81%;
      cursor: pointer;
 
    }
  }
}
</style>