悬浮工具球(仿 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

相关文章

MySql match against工具详细用法

《MySqlmatchagainst工具详细用法》在MySQL中,MATCH……AGAINST是全文索引(Full-Textindex)的查询语法,它允许你对文本进行高效的全文搜素,支持自然语言搜... 目录一、全文索引的基本概念二、创建全文索引三、自然语言搜索四、布尔搜索五、相关性排序六、全文索引的限制七

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

基于Python打造一个全能文本处理工具

《基于Python打造一个全能文本处理工具》:本文主要介绍一个基于Python+Tkinter开发的全功能本地化文本处理工具,它不仅具备基础的格式转换功能,更集成了中文特色处理等实用功能,有需要的... 目录1. 概述:当文本处理遇上python图形界面2. 功能全景图:六大核心模块解析3.运行效果4. 相

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

基于Python实现高效PPT转图片工具

《基于Python实现高效PPT转图片工具》在日常工作中,PPT是我们常用的演示工具,但有时候我们需要将PPT的内容提取为图片格式以便于展示或保存,所以本文将用Python实现PPT转PNG工具,希望... 目录1. 概述2. 功能使用2.1 安装依赖2.2 使用步骤2.3 代码实现2.4 GUI界面3.效

基于Python和MoviePy实现照片管理和视频合成工具

《基于Python和MoviePy实现照片管理和视频合成工具》在这篇博客中,我们将详细剖析一个基于Python的图形界面应用程序,该程序使用wxPython构建用户界面,并结合MoviePy、Pill... 目录引言项目概述代码结构分析1. 导入和依赖2. 主类:PhotoManager初始化方法:__in

使用Python自建轻量级的HTTP调试工具

《使用Python自建轻量级的HTTP调试工具》这篇文章主要为大家详细介绍了如何使用Python自建一个轻量级的HTTP调试工具,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录一、为什么需要自建工具二、核心功能设计三、技术选型四、分步实现五、进阶优化技巧六、使用示例七、性能对比八、扩展方向建