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中computed和watch有哪些区别
Dec 19 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
Vue Element plus使用方法梳理
Dec 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
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
Python虚拟环境项目实例
2017/11/20 Python
python实现简易云音乐播放器
2018/01/04 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
工艺员岗位职责
2014/02/11 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL