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基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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生成静态HTML速度快类库
2007/03/18 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php 字符转义 注意事项
2009/05/27 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
innerText 使用示例
2014/01/23 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
Python生成验证码实例
2014/08/21 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
Python subprocess模块详细解读
2018/01/29 Python
python 日志增量抓取实现方法
2018/04/28 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Python 下载及安装详细步骤
2019/11/04 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
节约用水标语
2014/06/11 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python