vue移动端项目拖拽客服组件

时间:2021-06-24 18:38:02   收藏:0   阅读:0
记录一下第一次封装组件
<template>
  <div  ref="kefu" class="kefu"
      @touchstart="touchstart"
      @touchend="touchend"
      @touchmove="mousemove">
    <slot>

    </slot>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
  },
  data() {
    return {
      falg: false,
    };
  },
  mounted() {},
  methods: {
    touchstart() {
      this.falg = true;
      this.$refs.kefu.style.transition="none";
    },
    touchend() {
      this.falg = false;
      this.$refs.kefu.style.transition="all 1s";
      let left = this.$refs.kefu.offsetLeft;
      let screenWidth = window.screen.width;
      let oWidth = this.$refs.kefu.offsetWidth;
      if (left + oWidth / 2 <= screenWidth / 2) {
        this.$refs.kefu.style.left = -oWidth / 2 + "px";
      } else {
        this.$refs.kefu.style.left = screenWidth  -oWidth / 2  + "px";
      }
    },
    mousemove(e) {
      if (this.falg) {
        let clientY = e.targetTouches[0].clientY;
        let clientX = e.targetTouches[0].clientX;
        let offsetHeight = this.$refs.kefu.offsetHeight;
        let offsetWidth = this.$refs.kefu.offsetWidth;
        let top = clientY - offsetHeight / 2;
        let left = clientX - offsetWidth / 2;
        // 屏幕得宽度
        let screenWidth = window.screen.width;
        let screenHeight = window.screen.height;
        let maxTop = screenHeight - offsetHeight;
        let maxLeft = screenWidth - offsetWidth;
        console.log(screenHeight);
        if (top <= 0) {
          top = 0;
        }
        if (top > maxTop) {
          top = maxTop;
        }
        if (left <= 0) {
          left = 0;
        }
        left = left > maxLeft ? maxLeft : left;

        this.$refs.kefu.style.top = top + "px";
        this.$refs.kefu.style.left = left + "px";
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.kefu {
  position: fixed;
}
</style>
评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!