WeChatAppH5/pages/task/components/H5RecorderPopup.vue

<template>
	<uni-popup ref="popupRef" type="bottom">

		<view class="long-press-box">
			<canvas type="2d" class="recwave-WaveView" style="width:300px;height:100px"></canvas>
			<!-- @longpress="longPressEvent" -->
			<view class="long-press-btn" @longpress="longPressEvent" @touchend="handleTouchEnd"
				@touchcancel="handleTouchEnd">
				长按
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			longPressEvent(e) {
				console.log(e);
				console.log('长按事件触发');
			},
			handleTouchStart(event) {
				console.log('触发长按事件');
				// 触发长按事件
				// this.longPressTimer = setTimeout(() => {
				// 	this.$emit('longpress');
				// }, this.longPressThreshold);
			},
			handleTouchEnd(event) {
				console.log('结束长按事件' , event);
				 event.preventdefault()
				// 清除长按事件计时器
				// clearTimeout(this.longPressTimer);
				// this.longPressTimer = null;
				// // 处理touchend事件
				// this.$emit('touchend');
			}
		},
		mounted() {
			this.$refs.popupRef.open()
		}
	}
</script>

<style lang="scss">
	.long-press-box {
		width: 100%;
		padding: 30rpx;
		background-color: #fff;
	}

	.long-press-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(92deg, #3cb7d2 2%, #44c5d5 98%);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: Regular;
		text-align: center;
		color: #ffffff;
		line-height: 80rpx;
	}
</style>