uniapp vue3 长按弹框组件

功能

在可视区域长按弹出操作框,点击操作框，进行想要的操作。

lq-toptips.vue

<template>
	<view class="lq-totips" >
		<lq-mask :show="showtips && mask"
		Bgcolor="rgba(0, 0, 0, 0)"
		@close="maskClick"
		></lq-mask>
		<view class="lq-totips__wrapper" @longpress.stop="longpress">
			<slot>
				<text>{{text}}</text>
			</slot>

			<lq-transition
			mode="fade"
			:show="showtips"
			duration="300"
			:customStyle="siteStyle"
			>
				<view class="lq-totips__wrapper__popup"
				:style="[tipStyle]">
					<view class="lq-totips__wrapper__popup__list">
						<view class="lq-totips__wrapper__popup__list__btn" @click.stop="btnCopy(0,'复制')" v-if="iScopy">
							<text> 复制</text>
						</view>
						<block v-for="(item , index) in buttons" :key="index">
							<view class="lq-totips__wrapper__popup__list__btn" @click.stop="btnClick(index,item)">
								<text> {{item}} </text>
							</view>
						</block>
					</view>
				</view>
			</lq-transition>
		</view>
	</view>
</template>

<script>
import { computed, ref } from 'vue';
import { props } from './props';
import { sys ,endsWith ,guid, Copy } from '../../libs/common/common';
	export default{
		props:props,
		setup(props, context) {
			const showtips = ref(false);
			const xy = ref({
				top:'',
				left:'',
				right:'',
				bottom:''
			})
			
			const siteStyle = computed(()=>{
				return {
					position: 'absolute',
					zIndex:props.zIndex,	
					...xy.value
				} 
			})
			
			const tipStyle = computed(()=>{
				return{
					backgroundColor:props.tipBgcolor,
					boxShadow:props.boxShadow,
					borderRadius:endsWith(props.round),
					width:endsWith(props.tipWidth)
				}
			})
			
			const longpress = (event)=>{
				if(showtips.value==true){
					return
				}
				const infoWidth = sys().windowWidth
				const infoHeight = sys().windowHeight
				// console.log(event);
				if(event.touches[0].pageY > infoHeight/2){
					xy.value.bottom = infoHeight-event.touches[0].pageY + 'px'
					xy.value.top=''
				}else{
					xy.value.top=event.touches[0].pageY + 'px'
					xy.value.bottom=''
				}
				if(event.touches[0].pageX > infoWidth/2){
					xy.value.right= infoWidth - event.touches[0].pageX + 'px'
					xy.value.left=''
				}else{
					xy.value.left=event.touches[0].pageX + 'px'
					xy.value.right=''
				}
				showtips.value=true
				context.emit('longpress',event)
			}
			
			const maskClick = () =>{
				showtips.value=false
				context.emit('close',false)
			}
			
			const	btnCopy = ()=>{
				showtips.value=false
				Copy(props.text)
				context.emit('click',0)
			}
			
			const  btnClick = (i,item) =>{
				showtips.value=false
				context.emit('click',props.iScopy?{i:i+1,item}:{i,item})
				context.emit('close',false)
			}
			
			return {
				longpress,
				showtips,
				maskClick,
				siteStyle,
				tipStyle,
				btnClick,
				btnCopy
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lq-totips{
		&__wrapper {
			display: flex;
			justify-content: center;
			/* #ifndef APP-NVUE */
			white-space: nowrap;
			/* #endif */
		
			&__text {
				font-size: 14px;
			}
		
			&__popup {
				display: flex;
				justify-content: center;
		
				&__list {
					position: relative;
					flex: 1;
					border-radius: 5px;
					padding: 0px 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					overflow: hidden;
		
					&__btn {
						padding: 11px 13px;
						width: 100%;
						box-sizing: border-box;
						text-align: center;
		
						&--hover {
							background-color: #58595B;
						}
		
						&__text {
							line-height: 12px;
							font-size: 13px;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>

所需传参

props.js

export const props = {
	//是否开启遮罩层 默认true 开启
	mask:{
		type:Boolean,
		default:true
	},
	//弹窗的层级 默认 2025
	zIndex:{
		type:[Number,String],
		default:2025
	},
	//自定义操作按钮
	buttons:{
		type:Array,
		default:()=>[]
	},
	//弹窗的颜色
	tipBgcolor:{
		type:String,
		default:"#FFFFFF"
	},
	//弹窗的阴影
	boxShadow:{
		type:String,
		default:'0px 0px 10px #cccccc'
	},
	//弹窗的圆角
	round:{
		type:[String,Number],
		default:0
	},
	//弹窗的宽度 如果宽度过宽，长按最左面会出现超出可视区，显示不全
	tipWidth:{
		type:[String,Number],
		default:150
	},
	//弹窗按钮颜色
	tipColor:{
		type:String,
		default:'#333333',
	},
	//弹窗按钮字体大小
	tipSize:{
		type:[String,Number],
		default:14
	},
	//弹窗按钮字体是否加粗
	blod:{
		type:Boolean,
		default:false
	},
	//没有slot 的时候需要传text  有slot时开启复制所复制的也是text内容
	text:{
		type:String,
		default:''
	},
	//(是否开启复制)
	iScopy:{
		type:Boolean,
		default:true
	}
}

效果如下