uniapp h5图片长按隐藏默认菜单弹出

uniapp 图片长按会之后会出现默认菜单,移动端会出现复制、分享等。我是直接封装成一个图片组件,长按和点击会触发不同的事件类型,图片组件如下:

javascript 复制代码
<template>
	<view>
		<image v-bind="$attrs" @touchstart="imgTouchStart" @touchend="imgTouchEnd"></image>
	</view>
</template>

<script setup>
	const props = defineProps({
		time:{//触发长按逻辑的时常,单位ms
			type:Number,
			default:800
		},
		stop:{//是否需要组织冒泡
			type:Boolean,
			default:true
		}
	})
	const emits = defineEmits(['customerClick'])
	let pressTimer = null;
	let longPressTriggered = false;
	const imgTouchStart = e => {
		e && e.preventDefault()
		if(props.stop){
			e && e.stopPropagation()
		}
		longPressTriggered = false;
		pressTimer = setTimeout(() => {
			longPressTriggered = true;
			emits('customerClick',{type:'longpress'})
		}, props.time);
	}
	
	const imgTouchEnd = (e) => {
		if(props.stop){
			e && e.stopPropagation()
		}
		pressTimer && clearTimeout(pressTimer);
		if (!longPressTriggered) {
			emits('customerClick',{type:'click'})
		}
	}
	
</script>

<style>
</style>

使用如下:

javascript 复制代码
<template>
    //组件名称自定义
    <sbtImage class="image no-select" :src="src" @customerClick="data=>imageClick(data,item)"></sbtImage>
</template>

<script setup>

const imageClick = (e,data) => {
	if(e.type == 'longpress'){
		//长按事件的处理逻辑
	}else if(e.type == 'click'){
		//点击事件的处理逻辑
	}
}
</script>
相关推荐
用户307675281127几秒前
💡 从"傻等"到"流淌":我在AI项目中实现流式输出的血泪史(附真实代码+深度解析)
前端
bluceli2 分钟前
前端性能优化实战指南:让你的网页飞起来
前端·性能优化
UIUV2 分钟前
RAG技术学习笔记(含实操解析)
javascript·langchain·llm
SuperEugene4 分钟前
Vue状态管理扫盲篇:如何设计一个合理的全局状态树 | 用户、权限、字典、布局配置
前端·vue.js·面试
没想好d5 分钟前
通用管理后台组件库-9-高级表格组件
前端
阿虎儿8 分钟前
React Hook 入门指南
前端·react.js
核以解忧31 分钟前
借助VTable Skill实现10W+数据渲染
前端
WangHappy33 分钟前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
李剑一38 分钟前
要闹哪样?又出现了一款新的格式化插件,尤雨溪力荐,速度提升了惊人的45倍!
前端·vue.js
闲云一鹤1 小时前
Git LFS 扫盲教程 - 你不会还在用 Git 管理大文件吧?
前端·git·前端工程化