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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
详解python3百度指数抓取实例
2016/12/12 Python
python装饰器实例大详解
2017/10/25 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Python配置文件处理的方法教程
2019/08/29 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
群众路线剖析材料
2014/02/02 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
《叶问2》观后感
2015/06/15 职场文书