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——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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编程开发“虚拟域名”系统
2006/10/09 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
javascript 获取图片颜色
2009/04/05 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python元组操作实例解析
2014/09/23 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
pandas 选择某几列的方法
2018/07/03 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
python中如何使用虚拟环境
2020/10/14 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
法务专员岗位职责
2014/01/02 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
违纪学生保证书
2015/02/27 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js