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

记录一下第一次封装组件

<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>