html 可移动悬浮按钮,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实现可移动的悬浮按钮相关推荐
- html 可移动悬浮按钮,vue悬浮按钮 vue实现可移动的悬浮按钮
想了解vue实现可移动的悬浮按钮的相关内容吗,丢失的蓝胖子在本文为您仔细讲解vue悬浮按钮的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue移动悬浮按钮,vue悬浮按钮,vue按钮,下 ...
- vue移动端拖拽悬浮按钮
vue移动端拖拽悬浮按钮 功能介绍: 大致需求: 整体思路: 简单效果展示: 具体实现: 一.position:fixed布局: 二.touch事件绑定: 三.页面引入: 功能介绍: 在移动端开发中, ...
- VUE PC端可拖动悬浮按钮改进
VUE PC端可拖动悬浮按钮改进 之前发过一篇悬浮球的,但是那个不太好用,鼠标移动过快会脱标,就很难受,最近又改了一下,这是加了个监听,拖动结束的时候改变top和left,应该还能改进,欢迎大佬们提出 ...
- android悬浮按钮弹出与隐藏,Android悬浮窗按钮实现点击并显示/隐藏多功能列表
前言 最近在一个项目中,需要制作录屏的功能,原先是在应用中有录屏/控制的按钮,思考之下觉得这种效果并不好,因此就想制作一个可以悬浮的悬浮窗,这样不论手机在什么界面中都可以对录屏功能进行控制. 这里就来 ...
- VUE 切换页面后点击按钮没有反应
问题 昨天线上环境出现了一个页面问题,据当事人称,他当时在这个页面停留了很久,因为吃饭去了,然后回来发现此页面按钮点不了了,除了按钮点不了外没有其他问题,按钮就跟不存在一样 页面因不好对外展示已换成其 ...
- android悬浮按钮功能实现,Android中实现悬浮按钮
在有些APP中我们需要实现一个悬浮按钮,比如图片浏览应用左右翻页功能,比如左侧悬浮功能按钮.我们要实现此功能时,最开始想到的就是用FrameLayout来实现,但是如果把按钮简单的放到FrameLay ...
- android 悬浮按钮和可交互提示,android ——悬浮按钮及可交互提示
一.悬浮按钮 FloatingActionButton是Design Support中的一个控件,它会默认colorAccent作为按钮的颜色,还可以给按钮一个图标. 这是没有图标的 ,这是有图标的 ...
- 标题Ant Design of Vue 组件库中Modal“确认“按钮和“取消“按钮成英文状态
标题Ant Design of Vue 组件库中Modal"确认"按钮和"取消"按钮成英文状态 因为是国际化的原因,造成确定按钮和取消按钮变成英文,需要设置 o ...
- 点击文字或者按钮在本页面中弹出悬浮小窗口
HTML代码 <body><!--用来引出悬浮窗口的div--><div><a href="javascript:void(0)" onc ...
最新文章
- 读取本地照片 以流的形式进行显示
- jzoj6001. 【PKUWC2019模拟2019.1.15】Mines (tarjan)
- 动感灯箱制作流程培训_向客户推荐灯箱,这16种灯箱你一定要知道
- 软件项目管理0720:读一页项目管理-项目子目标
- VC++ 6.0 C8051F340 MFC programming note
- 解决redhat的未注册问题
- Java中反射机制(Reflection)学习
- G - 变形课 HDU - 1181(搜索之dfs)
- 数据操作语言DML及数据定义语言DDL的区别
- Python全栈开发——subprocess struct
- Blog主场转至51CTO.com
- DNN深度神经网络、RBM受限玻尔兹曼机、DBN深度置信网络
- python调用通达信函数用户指标_通达信公式之间如何调用,如何引用通达信tdxwave指标...
- LeCun、Bengio、Hinton三巨头曾合体,Nature发文综述深度学习(论文精华)
- dw文件html代码预览效果,VSCode设置网页代码实时预览
- 微信测试号实现微信网页的分享
- 中国首台超级计算机“天河一号,我国首台超级计算机“天河一号”超负荷运行...
- 房东家的网线不用账号和密码就能上网怎么设置路由器
- A. 拼音魔法 大学生程序设计邀请赛(华东师范大学)
- [Discuz!模板] 听雨轩风格[GBK][utf8][一键安装 DIY][20110918更新]
热门文章
- 「三年河东、三年河西」ADAS新一轮竞赛“重构”市场格局
- 因续订费用过高,中科院被传停用知网数据库,科技类期刊和硕博论文无法下载...
- 抽象、低内聚、难变更,你还在用“堆栈”组织代码?
- 专题:固体力学中应力与应变分析详解(7.应变分析 7.3位移变换(平面应变) 7.4应变变换(平面应变))
- Java中的DO,DTO,VO,POJO
- 只选对的,不选贵的,近期热门显卡导购
- Python | Python 实现RSA加解密 验签 无 长度限制 加密解密, 分段加密
- Seqlist顺序表的实现
- 人工智能知识全面讲解:数据预处理
- 「Java工具类」发现一个身份证地址解析出省市区的工具类