VUE PC端可拖动悬浮按钮

一、实现效果:

二、FloatButton.vue

<template><div><div class="sssss"><div class="callback float" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseover="over" @mouseout="out"@mouseup="end" @touchend="end" ref="fu" style="color: #1a1919;"><el-button circle @click="screen()">{{name}}</el-button></div></div></div>
</template><script>export default {name: "suspensionBall",props: {name: {type: String,default: '打开全屏'},},data() {return {left: 0,top: 40,bg: 1,menu: false,isLoading: false,flags: false, //控制使用position: {x: 0,y: 0,},nx: "",ny: "",dx: "",dy: "",xPum: "",yPum: "",movb: 1,num: 1,};},created() { },mounted() {this.left = this.$refs.fu.offsetLeft - 750;},methods: {out2() {this.menu = false;},over2() { },out() {this.bg = 2;},over() {this.menu = true;this.num = 2;this.bg = 1;},callback() {this.$router.go(-1);},onRefresh() {// window.location.reload();setTimeout((res) => {console.log(res);this.isLoading = false;}, 1000);},down() {this.flags = true;var touch;if (event.touches) {touch = event.touches[0];} else {touch = event;}this.position.x = touch.clientX;this.position.y = touch.clientY;this.dx = this.$refs.fu.offsetLeft;this.dy = this.$refs.fu.offsetTop;},move() {if (this.flags) {this.movb = 2;this.menu = false;var touch;if (event.touches) {touch = event.touches[0];} else {touch = event;}this.nx = touch.clientX - this.position.x;this.ny = touch.clientY - this.position.y;this.xPum = this.dx + this.nx;this.yPum = this.dy + this.ny;let width = window.innerWidth - this.$refs.fu.offsetWidth; //屏幕宽度减去自身控件宽度let height = window.innerHeight - this.$refs.fu.offsetHeight; //屏幕高度减去自身控件高度this.xPum < 0 && (this.xPum = 0);this.yPum < 0 && (this.yPum = 0);this.xPum > width && (this.xPum = width);this.yPum > height && (this.yPum = height);// if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {this.$refs.fu.style.left = this.xPum + "px";this.$refs.fu.style.top = this.yPum + "px";this.left = this.xPum - 750;this.top = this.yPum;// }//阻止页面的滑动默认事件document.addEventListener("touchmove",function () {event.preventDefault();},false);}},//鼠标释放时候的函数end() {this.flags = false;},screen() {this.$emit("changeClick");},},};
</script>
<style scoped>.callback {position: fixed;width: 200px;height: 20px;background-repeat: no-repeat;background-size: 100% 100%;top: 200px;left: 90%;z-index: 99999;}.float {position: fixed;touch-action: none;text-align: center;border-radius: 24px;line-height: 48px;color: white;}.menuclass {text-align: left;position: absolute;color: #000;width: 764px;background: #ffffff;box-shadow: 0px 6px 26px 1px rgba(51, 51, 51, 0.16);padding: 20px;}.sssss {position: relative;background-color: #000;right: 0;z-index: 99999;}.titlea {font-size: 18px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;}.boxa {display: flex;flex-wrap: wrap;margin-top: 20px;z-index: 999999;}.item {width: 168px;height: 75px;border-radius: 4px 4px 4px 4px;font-size: 16px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #ffffff;text-align: center;margin-left: 7px;line-height: 75px;}
</style>

三、父页面引用

<template><div><float-button ref="floatButton" :name="buttonName" @changeClick="screen" /></div>
</template><script>
import FloatButton from './chart/FloatButton'
export default {name: 'Index',components: {FloatButton},
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/663508.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言——柔性数组

柔性数组概念&#xff1a; 这个概念你可能没听说过&#xff0c;但是这个概念确实存在&#xff0c;在C99中&#xff0c;结构体中最后一个成员允许是未知大小的数组&#xff0c;这就叫做【柔性数组】成员。 struct S {char c;int i;int arr[0];//未知大小的数组 - 柔性数组成员 }…

深度学习入门笔记(三)常用AI术语

本节我们介绍一些深度学习领域常用的术语。 训练 确定模型中的参数的过程,我们就称为“训练”。 Epoch 遍历一遍训练数据就叫作“一个 Epoch”。训练模型的时候,我们要告诉模型预计训练多少个 Epoch,但这个值并不是固定的,因为并没有一个准确的 Epoch 数能一定能得到一…

Java项目:基于SSM框架实现的西安旅游管理系统(ssm+B/S架构+源码+数据库+毕业论文)

一、项目简介 本项目是一套ssm811基于SSM框架实现的西安旅游管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&am…

假如装修内行人给自己孩子装修,会有多用心?

假如装修师父给自己孩子装修&#xff0c;会怎么装呢&#xff1f;      雅静说买环保的材料&#xff0c;给你省几万块钱      给大家内行人装修&#xff0c;把环保&#xff0c;实用&#xff0c;省钱&#xff0c;都能拥有的方法      1&#xff0c;我不会换开发商给她…

Portainer访问远程Docker (TLS加密)

前言&#xff1a; docker的2375端口&#xff0c;出于安全性考虑即(Docker Remote API未授权访问漏洞)&#xff0c;是不开放的&#xff0c;如果想要管理远程docker&#xff0c;可以使用TLS机制来进行访问&#xff0c;这里以Portainer访问连接为例 文章参考&#xff1a;https://b…

【2023地理设计组一等奖】基于多元数据的新能源汽车充电站动态规划——以番禺区为例

作品介绍 1 设计思想 1.1 作品背景 据中国汽车工业协会统计,截至 2020 年底,我国新能源汽车保有量达到 480 万辆,占全球新能源汽车保有量的42%。然而,与之相对应的是,我国新能源汽车充电桩建设仍然滞后于需求,截至 2020 年底,我国公共充电桩数量仅为 79.4 万个,远低于…

单机搭建hadoop环境(包括hdfs、yarn、hive)

单机可以搭建伪分布式hadoop环境&#xff0c;用来测试和开发使用&#xff0c;hadoop包括&#xff1a; hdfs服务器 yarn服务器&#xff0c;yarn的前提是hdfs服务器&#xff0c; 在前面两个的基础上&#xff0c;课可以搭建hive服务器&#xff0c;不过hive不属于hadoop的必须部…

MacBook安装软件时允许任何来源的软件

MacBook安装软件时允许任何来源的软件 临时设置允许未知来源的app 当下载网上的软件并安装时,会安装失败, 因为MacOS默认只允许安装App Store上的软件 这时可以临时允许安装,如下设置 开启设置—->安全性与隐私—->未知来源的app 这种方式比较安全 设置允许任何来源…

计算机毕业设计 | SpringBoot 房屋租赁网 房屋租赁平台(附源码)

1&#xff0c;绪论 1.1 背景调研 在房地产行业持续火热的当今环境下&#xff0c;房地产行业和互联网行业协同发展&#xff0c;互相促进融合已经成为一种趋势和潮流。本项目实现了在线房产平台的功能&#xff0c;多种技术的灵活运用使得项目具备很好的用户体验感。 这个项目的…

2024年美国大学生数学建模比赛MCM问题A:资源可用性和性别比例-思路解析与代码解答

2024 MCM Problem A: Resource Availability and Sex Ratios 一、题目翻译 背景 虽然一些动物物种存在于通常的雄性或雌性性别之外&#xff0c;但大多数物种实质上是雄性或雌性。虽然许多物种在出生时的性别比例为1&#xff1a;1&#xff0c;但其他物种的性别比例并不均匀。…

【A题完整论文】2024美赛完整论文+代码参考(无偿分享)

A题&#xff1a;资源可用性和性别比例 一、问题分析 1.1 问题一分析 针对该问题&#xff0c;若七鳃鮼的性别比例受到外部环境因素的影响&#xff0c;那么这可能会导致种群大小和结构的变化。如果雌性在某些环境条件下更为优势&#xff0c;种群的增加可能对其他物种的竞争和资源…

闲聊电脑(4)硬盘分区

夜深人静&#xff0c;万籁俱寂&#xff0c;老郭趴在电脑桌上打盹&#xff0c;桌子上的小黄鸭和桌子旁的冰箱又开始窃窃私语…… 小黄鸭&#xff1a;冰箱大哥&#xff0c;上次你说的那个“分区”和“格式化”是什么意思&#xff1f; 冰箱&#xff1a;分区么&#xff0c;就是分…

数学建模 - 线性规划入门:Gurobi + python

在工程管理、经济管理、科学研究、军事作战训练及日常生产生活等众多领域中&#xff0c;人们常常会遇到各种优化问题。例如&#xff0c;在生产经营中&#xff0c;我们总是希望制定最优的生产计划&#xff0c;充分利用已有的人力、物力资源&#xff0c;获得最大的经济效益&#…

前端面试题-JavaScriptl原型,原型链?有什么特点?(2024.2.2)

一、先理解下构造函数&#xff0c;实例对象 &#xff08;看代码的打印结果和解释&#xff09; 构造函数&#xff08;Constructor&#xff09;的 prototype 属性&#xff1a; 当你创建一个函数时&#xff0c;JavaScript 会自动为该函数创建一个 prototype 属性。这个 prototype …

半桥式三相无刷直流电动机不同导通角的性能的变化

半桥式三相无刷直流电动机不同导通角的性能的变化 syms Omega clear clcOmega0pi/180*120 for Omega_x[pi/180*120,pi/180*130,pi/180*140,pi/180*150,pi/180*160,pi/180*170,pi/180*180]Omega_x*180/piOmega_x_0 (4*sin(Omega_x/2)/(Omega_xsin(Omega_x)))/(4*sin(Omega0/2)/…

2024美赛D题全保姆教程 代码思路

2024 ICM Problem D: Great Lakes Water Problem (最佳水位问题)题目要求 国际联合委员会&#xff08;IJC&#xff09;要求贵公司国际网络控制建模公司&#xff08;ICM&#xff09;提供支持&#xff0c;以协助管理和建模直接影响五大湖流量网络水位的控制机制&#xff08;两座…

使用gcc/g++查看C语言预处理,编译,汇编,连接,以及动静态库的区分

文章目录 使用gcc/ggcc如何完成编译后生成可执行文件&#xff1f;预处理(进行宏替换)编译&#xff08;生成汇编&#xff09;汇编&#xff08;生成机器可识别代码&#xff09;连接&#xff08;生成可执行文件或库文件&#xff09;最后记忆小技巧 在这里涉及到一个重要的概念&…

[css] 让文字进行竖着 分散对齐

.demo2 {width: 60px;background-color: aqua;height: 200px;display: grid;place-items: center;}参考&#xff1a; css 让文字进行竖着书写&#xff0c; 附带个小知识&#xff0c;行内块元素添加文字之后底部对不齐的问题

iOS 集成 Flutter Module

集成步骤 # Flutter flutter_application_path ./flutter_module_test/ load File.join(flutter_application_path, .ios, Flutter, podhelper.rb)target IntegrateFlutter douse_frameworks!# Flutterinstall_all_flutter_pods(flutter_application_path)end在主项目根目录下…

数据可视化市场概览:五款主流工具的优缺点解析

在数据可视化的世界中&#xff0c;选择一款合适的工具对于提升工作效率和洞察力至关重要。本文将为您介绍五款主流数据可视化工具&#xff0c;包括山海鲸可视化、Echarts、D3.js、Tableau和Power BI&#xff0c;并进行详细比较&#xff0c;帮助您做出明智的选择。 山海鲸可视化…