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 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue @ ~ 相对路径 路径别名设置方式
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利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
jQuery Validate初步体验(一)
2015/12/12 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
javascript的this关键字详解
2019/05/20 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
个人求职信范文分享
2014/01/06 职场文书
大学老师推荐信
2014/02/25 职场文书
党员大会主持词
2014/04/02 职场文书
文明工地标语
2014/06/16 职场文书
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL