悬浮工具球(仿 iphone 辅助触控)

2024-03-10 22:20

本文主要是介绍悬浮工具球(仿 iphone 辅助触控),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

悬浮工具球(仿 iphone 辅助触控)

  • 兼容移动端 touch 事件
  • 点击元素以外位置收起
  • 解决鼠标抬起触发元素的点击事件问题

Demo

Github

<template><divref="FloatingBal"class="floating_ball":class="[dragging, isClick]":style="dragStatus ? computedStyle : ''"@mouseenter="handleMouseEnter"@mouseleave="handleMouseLeave"@mousedown="onButtonDown"@touchstart="onButtonDown"@focus="handleMouseEnter"@blur="handleMouseLeave"><divclass="floating_ball_inner":class="[{ large }]"@click="handleBallClick"v-click-outside="handleClickOutside"><divclass="fbi_ring"v-show="!large"></div><divclass="fbi_nav"v-show="large"><divv-for="(item, index) of 9"class="fn_item":key="index">{{ index + 1 }}</div></div></div></div>
</template><script>
// 创建一个全局的点击事件处理函数
const handleClickOutside = (event, el, binding) => {// 检查点击的元素是否在绑定的元素内部if (!(el === event.target || el.contains(event.target))) {// 如果点击的元素不在绑定的元素内部,则触发绑定的回调函数binding.value()}
}
export default {name: 'FloatingBallVue',directives: {clickOutside: {bind: function (el, binding) {// 创建一个点击事件处理函数,并将它保存在元素的属性中const handleClick = event => handleClickOutside(event, el, binding)el.__vueClickOutside__ = handleClick// 在 document 上监听点击事件document.addEventListener('click', handleClick)},// 指令的解绑函数,在元素从 DOM 中移除时调用unbind(el) {// 移除之前保存在元素属性中的点击事件处理函数document.removeEventListener('click', el.__vueClickOutside__)delete el.__vueClickOutside__}}},components: {},props: {name: {type: String,default: ''},obj: {type: Object,default() {return {}}}},data() {return {large: false,newPosition: {left: 0,top: 0},startX: 0,startY: 0,currentX: 0,currentY: 0,disX: 0,disY: 0,grid: false,dragStatus: false,isClick: false,dragging: false,hovering: false}},computed: {computedStyle() {return {left: this.newPosition.left + 'px',top: this.newPosition.top + 'px',right: 'auto',bottom: 'auto'}}},watch: {},mounted() {window.addEventListener('touchmove',function (event) {event.preventDefault()},{ passive: false })},methods: {handleClickOutside() {this.large = false},handleBallClick() {if (this.dragging && this.isClick) {this.large = !this.large}},setPosition() {this.newPosition.left = this.currentX - this.disXthis.newPosition.top = this.currentY - this.disY},onDragging(event) {if (event.type === 'touchmove') {event.clientY = event.touches[0].clientYevent.clientX = event.touches[0].clientX}this.currentY = event.clientYthis.currentX = event.clientXconst disX = this.currentX - this.startXconst disY = this.currentY - this.startYif (Math.abs(disX) < 5 && Math.abs(disY) < 5) {// 未移动} else {this.dragStatus = trueif (this.dragging) {this.isClick = falsethis.setPosition()}}},onDragEnd() {if (this.dragging) {/** 防止在 mouseup 后立即触发 click,导致滑块有几率产生一小段位移* 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上*/setTimeout(() => {this.dragging = falseif (!this.isClick) {this.setPosition()}}, 0)window.removeEventListener('mousemove', this.onDragging)window.removeEventListener('touchmove', this.onDragging)window.removeEventListener('mouseup', this.onDragEnd)window.removeEventListener('touchend', this.onDragEnd)window.removeEventListener('contextmenu', this.onDragEnd)}},onDragStart(event) {this.dragging = truethis.isClick = trueif (event.type === 'touchstart') {event.clientY = event.touches[0].clientYevent.clientX = event.touches[0].clientX}this.startY = event.clientYthis.startX = event.clientXthis.disX = this.startX - this.$refs.FloatingBal.offsetLeftthis.disY = this.startY - this.$refs.FloatingBal.offsetTop},onButtonDown(event) {if (event.type === 'touchstart') {event.stopPropagation()} else {event.stopPropagation()event.preventDefault()}this.onDragStart(event)window.addEventListener('mousemove', this.onDragging)window.addEventListener('touchmove', this.onDragging)window.addEventListener('mouseup', this.onDragEnd)window.addEventListener('touchend', this.onDragEnd)window.addEventListener('contextmenu', this.onDragEnd)},handleMouseLeave() {this.hovering = false},handleMouseEnter() {this.hovering = true}}
}
</script><style lang='scss' scoped>
.floating_ball {position: absolute;z-index: 9;top: 160px;right: 80px;cursor: pointer;transform: translateX(-50%) translateY(-50%);.floating_ball_inner {width: 80px;height: 80px;transition: all 0.2s;border-radius: 12px;background-color: rgba($color: #333333, $alpha: 0.4);.fbi_ring {position: absolute;top: 50%;left: 50%;width: 60%;height: 60%;transform: translateX(-50%) translateY(-50%);border-radius: 50%;background-color: rgba($color: #ffffff, $alpha: 0.3);&::before,&::after {position: absolute;top: 50%;left: 50%;content: '';transform: translateX(-50%) translateY(-50%);border-radius: 50%;}&::before {width: 80%;height: 80%;background-color: rgba($color: #ffffff, $alpha: 0.4);}&::after {width: 60%;height: 60%;background-color: rgba($color: #ffffff, $alpha: 0.5);}}.fbi_nav {display: flex;flex-wrap: wrap;width: 100%;height: 100%;.fn_item {display: flex;align-items: center;flex-flow: column;justify-content: center;width: 33.3%;height: 33.3%;}}&.large {width: 240px;height: 240px;}}
}
</style>

这篇关于悬浮工具球(仿 iphone 辅助触控)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/795698

相关文章

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

使用Java实现通用树形结构构建工具类

《使用Java实现通用树形结构构建工具类》这篇文章主要为大家详细介绍了如何使用Java实现通用树形结构构建工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录完整代码一、设计思想与核心功能二、核心实现原理1. 数据结构准备阶段2. 循环依赖检测算法3. 树形结构构建4. 搜索子

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

jvm调优常用命令行工具详解

《jvm调优常用命令行工具详解》:本文主要介绍jvm调优常用命令行工具的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一 jinfo命令查看参数1.1 查看jvm参数二 jstack命令2.1 查看现场堆栈信息三 jstat 实时查看堆内存,gc情况3.1

MySQL使用binlog2sql工具实现在线恢复数据功能

《MySQL使用binlog2sql工具实现在线恢复数据功能》binlog2sql是大众点评开源的一款用于解析MySQLbinlog的工具,根据不同选项,可以得到原始SQL、回滚SQL等,下面我们就来... 目录背景目标步骤准备工作恢复数据结果验证结论背景生产数据库执行 SQL 脚本,一般会经过正规的审批

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)

《Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)》:本文主要介绍Java导入、导出excel的相关资料,讲解了使用Java和ApachePOI库将数据导出为Excel文件,包括... 目录前言一、引入Apache POI依赖二、用法&步骤2.1 创建Excel的元素2.3 样式和字体2.

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图

MyBatis-Plus中静态工具Db的多种用法及实例分析

《MyBatis-Plus中静态工具Db的多种用法及实例分析》本文将详细讲解MyBatis-Plus中静态工具Db的各种用法,并结合具体案例进行演示和说明,具有很好的参考价值,希望对大家有所帮助,如有... 目录MyBATis-Plus中静态工具Db的多种用法及实例案例背景使用静态工具Db进行数据库操作插入