vue實現(xiàn)吸壁懸浮球

更新時間：2022年04月15日 15:20:34 作者：LvyYoung

這篇文章主要為大家詳細介紹了vue實現(xiàn)吸壁懸浮球，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)吸壁懸浮球的具體代碼，供大家參考，具體內(nèi)容如下

最近接到一個需求，需要一個客服懸浮按鈕，可以拖拽并吸壁到頁面周邊，我們一起看看吧

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

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

2.drag指令主要監(jiān)聽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;
? ? ? // 禁止選擇網(wǎng)頁上的文字
? ? ? document.onselectstart = function () {
? ? ? ? return false;
? ? ? };
? ? ? oDiv.onmousedown = function (e) {
? ? ? ? // 鼠標按下，計算當前元素距離可視區(qū)的距離
? ? ? ? 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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: