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+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
详解Vue router路由
Nov 20 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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 fckeditor 调用的函数
2009/06/21 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python批量修改交换机密码的示例
2020/09/22 Python
详解pandas映射与数据转换
2021/01/22 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
中秋手机店促销方案
2014/06/16 职场文书
暑期培训班招生方案
2014/08/26 职场文书
2015年公司新年寄语
2014/12/08 职场文书
2014年司法局工作总结
2014/12/11 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
分享几个简单MySQL优化小妙招
2022/03/31 MySQL