siyu_app/components/menu-pop/menu-pop.vue

<template>
	<view v-show="isShowMsgPop">
		<view class="mask" @tap='clickMask' @touchmove.stop.prevent="moveHandle"></view>
		<view class="pop-menu">
			<view class="arrow">
				<image src="/static/images/customer/pop_arrow.png" mode="widthFix"></image>
			</view>
			<view class="menu">
				<view class="u-f-ac" @tap='clickOrder'>
					<image src="/static/images/customer/sq_zb.png" mode="widthFix"></image>
					<text>生成订单</text>
				</view>
				<view class="u-f-ac" @tap='clickTransfer'>
					<image src="/static/images/customer/zhuangyi.png" mode="widthFix"></image>
					<text>转移</text>
				</view>
				<view class="u-f-ac" @tap='clickRecovery'>
					<image src="/static/images/customer/recyle.png" mode="widthFix"></image>
					<text>回收</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			isShowMsgPop:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			//蒙层点击
			clickMask(){
				return this.$emit('clickMask');
			},
			
			clickOrder(){
				return this.$emit('clickOrder');
			},
			
			clickTransfer(){
				return this.$emit('clickTransfer');
			},
			clickRecovery(){
				return this.$emit('clickRecovery');
			},
			moveHandle(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.u-f-ac{
		display: flex;
		align-items: center;
	}
	
	.pop-menu {
		margin-top: -30rpx;
		width: 350rpx;
		height: 230rpx;
		position: absolute;
		z-index: 666;
		right: 16rpx;
	
		.arrow {
			text-align: right;
			padding-right: 25rpx;
			image {
				width: 30rpx;
				height: 15rpx;
			}
		}
	
		.menu {
			margin-top: -13rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			text-align: center;
			padding: 0 30rpx;
	
			view {
				width: 270rpx;
				height: calc(200rpx/2);
			}
	
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
		}
	}
	
	.mask {
		position: fixed;
		z-index: 600;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}
</style>