vue怎么實現吸壁懸浮球

這篇文章主要介紹“vue怎么實現吸壁懸浮球”，在日常操作中，相信很多人在vue怎么實現吸壁懸浮球問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue怎么實現吸壁懸浮球”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1.創建一個template，定義客服按鈕，自定義v-drag指令

<template>
  <div class="container">
    <div
      class="btn"
      id="btn"
      :
      v-drag="{ set: openDialog }"
      draggable="false"
    >
      <img src="@/assets/images/cust-service.png" alt="" />
      <span>聯<br />系<br />客<br />服</span>
    </div>
    <chat-dialog v-model="dialogVisible" @on-close="closeDialog"></chat-dialog>
  </div>
</template>

2.drag指令主要監聽el的onmousedown、onmousemove、onmouseup事件，在onmouseup事件通過偏移量判斷是點擊還是拖拽，如果是拖拽計算偏移量從而判斷吸附于哪個壁

<script>
import chatDialog from "./chatDialog";
export default {
  components: { chatDialog },
  data() {
    return {
      dialogVisible: false,
    };
  },
  mounted() {
    // 初始化按鈕位置
    let clientW = document.documentElement.clientWidth;
    let clientH = document.documentElement.clientHeight;
    let div = document.getElementById("btn");
    div.style.top = clientH / 2 + "px";
    div.style.left = clientW - 80 + "px";
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  },
  directives: {
    drag(el, binding) {
      let oDiv = el;
      // 禁止選擇網頁上的文字
      document.onselectstart = function () {
        return false;
      };
      oDiv.onmousedown = function (e) {
        // 鼠標按下，計算當前元素距離可視區的距離
        let disX = e.clientX - oDiv.offsetLeft;
        let disY = e.clientY - oDiv.offsetTop;
        // 記錄初始位置
        let firstX = oDiv.offsetLeft;
        let firstY = oDiv.offsetTop;
        let l = oDiv.offsetLeft;
        let t = oDiv.offsetTop;
        document.onmousemove = function (e) {
          // 通過事件委托，計算移動的距離
          l = e.clientX - disX;
          t = e.clientY - disY;
          // 移動當前元素
          oDiv.style.left = l + "px";
          oDiv.style.top = t + "px";
        };
        document.onmouseup = function (e) {
          // 點擊事件
          if (Math.abs(l - firstX) < 3 || Math.abs(t - firstY) < 3) {
            binding.value.set(true);
          } else {
            // 拖拽事件
            let clientW = document.documentElement.clientWidth;
            let clientH = document.documentElement.clientHeight;
            // 判斷偏移量,并吸壁
            // 垂直偏移量大于水平偏移量，左右吸壁，垂直控制范圍
            if (Math.abs(t - firstY) > Math.abs(l - firstX)) {
              if (l > clientW / 2 - 80) {
                l = clientW - 80;
              } else {
                l = 80;
              }
              if (t < 40) t = 40;
              else if (t > clientH - 140) t = clientH - 140;
            } else {
              // 上下吸壁，水平控制范圍
              if (t > clientH / 2 - 140) {
                t = clientH - 140;
              } else {
                t = 40;
              }
              if (l < 80) l = 80;
              else if (l > clientW - 80) l = clientW - 80;
            }
            oDiv.style.top = t + "px";
            oDiv.style.left = l + "px";
          }
          document.onmousemove = null;
          document.onmouseup = null;
        };
        // return false不加的話可能導致黏連，就是拖到一個地方時div粘在鼠標上不下來，相當于onmouseup失效
        return false;
      };
    },
  },
};
</script>

3.樣式設置z-index始終保持在頁面頂層，定義position定位

<style lang="scss" scoped>
.container {
  .btn {
    z-index: 9999;
    position: fixed;
    width: 40px;
    height: 130px;
    overflow: hidden;
    background: linear-gradient(210deg, #f3f5f8, #ffffff);
    border: 2px solid #ffffff;
    box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    text-align: center;
    img {
      margin: 5px 0;
      width: 30px;
      height: 30px;
    }
    span {
      font-size: 14px;
      color: #333333;
      cursor: pointer;
      font-family: PingFang SC;
    }
  }
}
</style>

到此，關于“vue怎么實現吸壁懸浮球”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！