vue实现可移动的悬浮按钮


Posted in Vue.js onMarch 04, 2021

本文实例为大家分享了vue实现可随处移动悬浮按钮的具体代码,供大家参考,具体内容如下

1.html代码

<div
 class="callback float"
 @click="onClick"
 @mousedown="down"
 @touchstart="down"
 @mousemove="move"
 @touchmove="move"
 @mouseup="end"
 @touchend="end"
 ref="fu"
 >
 <!-- <p @click="callback">返回</p> -->
 <img @click="callback" src="@/assets/images/callbs.jpg" alt />
</div>

2.再data中定义

data() {
 return {
  isLoading: false,
  flags: false, //控制使用
  position: {
  x: 0,
  y: 0,
  },
  nx: "",
  ny: "",
  dx: "",
  dy: "",
  xPum: "",
  yPum: "",
 };
 },

3.js代码

methods: {
 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) {
  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";
  // }
  //阻止页面的滑动默认事件
  document.addEventListener(
   "touchmove",
   function () {
   event.preventDefault();
   },
   false
  );
  }
 },
 //鼠标释放时候的函数
 end() {
  this.flags = false;
 },
 onClick() {
  //在这里我是作为子组件来使用的
  this.$emit("click");
 },
 },

4.style样式

<style scoped>
.callback p {
 font-size: 16px;
 color: #fff;
 background: rgba(56, 57, 58, 0.5);
 border-radius: 50%;
 text-align: center;
 width: 50px;
 height: 50px;
 line-height: 50px;
 font-family: PingFang SC;
 font-weight: 600;
 box-shadow: 0 0 10px #fff;
}
.callback img {
 display: block;
 width: 50px;
 height: 50px;
 box-shadow: 0 0 10px rgb(133, 129, 129);
 border-radius: 50%;
 background: #fff;
}
.callback {
 position: fixed;
 top: 40px;
 left: 20px;
 z-index: 99999;
}
.float {
 position: fixed;
 right: 20px;
 top: 60%;
 touch-action: none;
 text-align: center;
 width: 50px;
 height: 50px;
 border-radius: 24px;
 line-height: 48px;
 color: white;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
vue中axios封装使用的完整教程
Mar 03 #Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 #Vue.js
详解vue3中组件的非兼容变更
Mar 03 #Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 #Vue.js
Vue多选列表组件深入详解
Mar 02 #Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 #Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 #Vue.js
You might like
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
js实现查询商品案例
2020/07/22 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
django如何实现视图重定向
2019/07/24 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python bisect模块原理及常见实例
2020/06/17 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
会计岗位职责范本
2014/03/07 职场文书
六一儿童节标语
2014/10/08 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
出国留学英文自荐信
2015/03/25 职场文书
2015年推普周活动总结
2015/03/27 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL