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>
相关推荐
爱勇宝几秒前
《道德经》第 10 章:真正成熟的人,能成事但不控制一切
前端·后端·程序员
看谷秀27 分钟前
arkts- 8 三方库介绍
前端·arkts
六边形66628 分钟前
独立开发不知道做什么?使用 TRAE Work 抓取差评痛点,快速跑通产品立项流
前端·后端·面试
亿元程序员29 分钟前
小伙伴发我一个 1G 的 Cocos 项目,assets 只有几十兆
前端
paopaokaka_luck31 分钟前
基于springboot3+vue3的文山民族文化资源展示与推广平台(协同过滤算法、Echarts 图形化分析)
java·前端·spring boot·学习·echarts
临江仙45533 分钟前
同一个 AI Agent 如何同时服务 Web、微信和 QQ:PureChat 的渠道架构实践
前端·人工智能·后端
程序员鱼皮36 分钟前
16 个超火的 DeepSeek Harness 插件,大肥鱼已经落后 N 个版本了。。。
前端·后端·ai编程
马可家的菠萝41 分钟前
AI Agent Demo 10 分钟就能跑,真正难的是让它 200 个场景都别乱来
前端·后端·aigc
Vuji1 小时前
Pi 插件解剖|summarize.ts:199 行,给 Agent 的对话做一份 Markdown 总结
前端·人工智能·agent
逻辑帧1 小时前
给 AI 时代找工作的同学一些实用建议
前端·后端