html 可移动悬浮按钮,vue悬浮按钮 vue实现可移动的悬浮按钮
想了解vue实现可移动的悬浮按钮的相关内容吗,丢失的蓝胖子在本文为您仔细讲解vue悬浮按钮的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue移动悬浮按钮,vue悬浮按钮,vue按钮,下面大家一起来学习吧。
1.html代码
class="callback float"
@click="onClick"
@mousedown="down"
@touchstart="down"
@mousemove="move"
@touchmove="move"
@mouseup="end"
@touchend="end"
ref="fu"
>
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样式
.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;
}
相关文章
html 可移动悬浮按钮,vue悬浮按钮 vue实现可移动的悬浮按钮相关推荐
- ipad 悬浮按钮 自定_如何在iPad上自定义鼠标按钮
ipad 悬浮按钮 自定 You can now control your iPad with a mouse, and it does much more than just simulate ta ...
- vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、vue
vue 所有按钮属性.vue Button 所有按钮属性事件.vue a-button 所有按钮属性事件.vue 按钮所有属性事件.vue 1.组件注册 1.按钮类型 2.按钮组合 3.不可用状态 4 ...
- 解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 参考文章: (1)解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 (2)https://www.cnblogs.com/zlfP ...
- 前端学习(1977)vue之电商管理系统电商系统之按钮与文本框的切换
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
- vue element-ui只有一条信息时默认选中按钮,且不能取消,多条信息时可以手动选择
vue element-ui只有一条信息时默认选中按钮,且不能取消,多条信息时可以手动选择 用lodash方法进行原数据的深拷贝 // 编辑多规格产品时必须选中一个默认规格setColumnData( ...
- 基于 vue 编写的vue图片预览组件,支持单图和多图预览,仅传入一个图片地址,即可实现图片预览效果,可自定义背景、按钮颜色等
hevue-img-preview 简介 完整版下载地址:基于 vue 编写的vue图片预览组件 本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传 ...
- vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...
- vue两个按钮切换_在vue中实现多个按钮样式的点击切换?
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
- mfc点击按钮让对话框关闭_WinXP系统开始菜单中关机按钮消失的恢复教程
WinXP系统开始菜单里面的关机按钮不见了怎么办?最近有用户反映,打开WinXP系统的开始菜单准备关机时,却发现无法关机了,开始菜单里面没有关机按钮,这是怎么回事?本文就为大家介绍XP系统恢复开始菜单 ...
- layui select日期_layui给下拉框、按钮状态、时间赋初始值的方法,按钮的状态
layui给下拉框.按钮状态.时间赋初始值的方法,按钮的状态 如下所示: 编辑 layui.use('table', function() { var table = layui.table; //监 ...
最新文章
- Docker入门六部曲——服务
- linux学习总结-----web前端①
- 梯形积分法【OpenMP实现】多个版本
- BZOJ 2820 YY的GCD 莫比乌斯反演
- os_mutex.c(全)
- http81僵尸网络预警:专门攻击摄像头,国内5万台设备已沦陷
- ListBox类似组件,鼠标右键点击事件得到选中Item
- ❤『面试知识集锦100篇』3.mysql篇丨mysql基础知识和面试真题,看完不收藏算我输!!
- 5G网络打破专有系统的桎梏
- CSS练习_无限滚动
- mlock家族:锁定物理内存
- 服务器4通道性能相当于多少人民币,有钱人的世界我们不懂,组装电脑花费百来万,跑分世界第四...
- winform自定义用户控件
- Flask组件之Flask-SQLAlchemy
- 如何使用计算机?【快速上手】带你了解计算机!
- 系统论、控制论和信息论
- jzoj2574 统计方案
- 快递/短信等热门API大全分享
- 深度学习与计算机视觉教程(11) | 循环神经网络及视觉应用(CV通关指南·完结)
- iOS系列教程之常见开发Tips(转自阿峰的博客)
热门文章
- 【附源码】计算机毕业设计SSM社区养老信息管理系统
- 湖南省计算机等级考试(二级)题库 第二部分
- NPS配置---从腾讯云服务器配置到客户端、服务器及管理页面
- C#关于打印90度转换
- 数据中心网络虚拟化技术 概要
- ijkplayer的时序与状态图分析
- Conda镜像源错误 ConnectionError(ReadTimeoutError(“HTTPSConnectionPool(host=‘mirrors.tuna.tsinghua.edu.cn‘
- 幼儿园课件软件测试,幼儿园大班测试题
- DSPE-PEG-GE11,GE11-PEG-DSPE,磷脂-聚乙二醇-靶向多肽GE11供应
- 【Gin框架一】Gin简介