vue怎么实现吸壁悬浮球

这篇文章主要介绍“Vue怎么实现吸壁悬浮球”，在日常操作中，相信很多人在vue怎么实现吸壁悬浮球问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现吸壁悬浮球”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创建一个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>

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>

样式设置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怎么实现吸壁悬浮球”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！