siyu_app/components/message/msg-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/message/pop_arrow.png" mode="widthFix"></image>
			</view>
			<view class="menu">
				<view class="u-f-ac" @tap='clickChat'>
					<image src="/static/message/talk36_2.png" mode="widthFix"></image>
					<text>发起聊天</text>
				</view>
				<view class="u-f-ac" @tap='clickScan'>
					<image src="/static/message/scan36.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');
			},
			//聊天点击
			clickChat(){
				return this.$emit('clickChat');
			},
			//扫一扫点击
			clickScan(){
				return this.$emit('clickScan');
			},
			moveHandle(){}
		}
	}
</script>

<style lang="scss">
	.pop-menu {
		margin-top: -40rpx;
		width: 350rpx;
		height: 230rpx;
		position: absolute;
		z-index: 666;
		right: 20rpx;
	
		.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>