浮动Icon

style样式：

<style scoped>
  #block img{
    width: 100%;
  }
  #block {
    color:#fff;
    font-size: 0.6rem;
    text-align: center;
    line-height: 3rem;
    width:3rem;
    height:3rem;
    position: fixed;
    right: 2%;
    bottom: 13%;
    border-radius: 50%;
    z-index: 500;
  }
</style>

html结构

<template>
  <div id="block" @click="home">
    ![](../static/img/home.png)
  </div>
</template>

js内容

<script>
export default {
  mounted:function () {
    this.drag();
  },
  methods:{
    home:function(){
      this.$router.push({path:'/main'});
    },
    drag:function(){
      var block = document.getElementById("block");
      var oW,oH;
      // 绑定touchstart事件
      block.addEventListener("touchstart", function(e) {
        var touches = e.touches[0];
        oW = touches.clientX - block.offsetLeft;
        oH = touches.clientY - block.offsetTop;

      },false);
      block.addEventListener("touchmove", function(e) {
        e.preventDefault();
        var touches = e.touches[0];
        var oLeft = touches.clientX - oW;
        var oTop = touches.clientY - oH;
        if(oLeft < 0) {
          oLeft = 0;
        }else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) {
          oLeft = (document.documentElement.clientWidth - block.offsetWidth);
        }else if(oTop<0){
          oTop=0;
        }else if(oTop>document.documentElement.clientHeight-block.offsetHeight){
          oTop=document.documentElement.clientHeight-block.offsetHeight;
        }
        block.style.left = oLeft + "px";
        block.style.top = oTop + "px";
      },false);

      block.addEventListener("touchend", function(e) {
        var endLeft = e.changedTouches[0].pageX;
        if(endLeft> document.documentElement.clientWidth/2){
          block.style.left=(document.documentElement.clientWidth-block.offsetWidth-5)+'px';
        }else if(endLeft<document.documentElement.clientWidth/2){
          block.style.left=5+'px';
        }
      },false);
    },
  }
}
</script>