aiot-app/components/PopupOper.vue

<template>
	<view class="popup" :class="'popup-'+ point" v-if="optionShow">
		<view class="pop_content " @click="operate(item.type)" v-for="(item,index) in operationList" :key="index">
			<!-- <view class="ziyuan" v-if="index==0">
				<span class="iconfont icon-shangjiantou"></span>
			</view> -->
			<view class="ziyuan" :class="'ziyuan-' + point" v-if="index==0 && point== 'top'"></view>
			<text v-if="item.class" class="icon" :class="item.class"></text>
			<text class="title" v-text="item.title"></text>
			<view class="ziyuan" :class="'ziyuan-' + point" v-if="index==operationList.length-1 && point== 'bottom'"></view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			optionShow: {
				type: Boolean,
			},
			operationList:{
				type: Array,
			},
			point: {
				type: String,
				default: 'top'
			}
		},
		methods: {
			operate(type) {
				this.$emit("operate", type)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		border-radius: 12rpx;
		background-color: #555555;
		width: 160rpx;
		
		z-index: 99999;
	}
	.popup-top{
		position: fixed;
		right: 20rpx;
	}
	.popup-bottom{
		position: fixed;
		bottom: 160rpx;
		right: 20rpx;
		width: 180rpx;
	
	
	}

	.pop_content {
		border-bottom: 1rpx solid #5c5c5c;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		height: 80rpx;
		// line-height: 72rpx;
		padding-left: 10rpx;
		font-size: 28rpx;

		.ziyuan {
			position: absolute;
			
			color: #5c5c5c;
			width: 0;
			height: 0;
			border-bottom: 10px solid #555555;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
		}
		.ziyuan-top{
			right: 25rpx;
			top: -16rpx;
			
		}
		.ziyuan-bottom{
			bottom: -18rpx;
			right: 50rpx;
			transform: rotate(180deg);
		}
		.icon {
			color: #fff;
			font-size: 32rpx;
			margin-left: 10rpx;
		}

		.title {
			color: #fff;
			margin-left: 10rpx;
		}
	}

	.pop_content:last-child {
		border-bottom: none;
	}
</style>