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>
相关推荐
福兮说3 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理4 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆6664 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
凤城老人4 小时前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
Dovis(誓平步青云)4 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan5 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_6 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒6 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技6 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端
yivifu7 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub