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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 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 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP连接access数据库
2015/03/27 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
python:socket传输大文件示例
2017/01/18 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
大学生年度自我鉴定
2013/10/31 职场文书
网站创业计划书
2014/04/30 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
学校捐款活动总结
2015/05/09 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
对讲机知识
2022/04/07 无线电
什么是css原子化,有什么用?
2022/04/24 HTML / CSS