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 03 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
使用 php4 加速 web 传输
2006/10/09 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
php常量详细解析
2015/10/27 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
numpy.random模块用法总结
2019/05/27 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
犯错检讨书
2014/02/21 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
品质标语大全
2014/06/21 职场文书
合作协议书范文
2014/08/20 职场文书
销售经理工作检讨书
2015/02/19 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL