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>
相关推荐
随风一样自由2 小时前
【前端独角兽】刚进入前端领域的前端开发用jQuery还是Vue3?
前端·javascript·vue3·jquery
IMPYLH3 小时前
HTML 的 <data> 元素
前端·html
YHHLAI3 小时前
[特殊字符] 面试中的 Promise —— 从入门到精通
前端·javascript·面试
weixin_BYSJ19874 小时前
SpringBoot + MySQL 乒乓球运动员信息管理系统项目实战--附源码04954
java·javascript·spring boot·python·django·flask·php
沪飘大军5 小时前
ll-llm:一个零依赖、可插拔的 OpenAI 兼容 LLM 代理
javascript
kyriewen5 小时前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H6 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
山河木马6 小时前
GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)
javascript·webgl·图形学
陆枫Larry7 小时前
小程序包体积优化:用 SVG 图片替换 iconfont,并保留 CSS 控色能力
前端
Appthing7 小时前
在 TanStack Start 中使用 VitePWA 的正确配置
javascript