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中如何自定义右键菜单详解
Dec 08 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
js获取ip和地区
2017/03/10 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书