front-end/hd/src/components/module/operate.vue

<template>
	<el-popover
		class="operate-module"
		popper-class="liu-popover"
		placement="bottom-end"
		width="200"
		trigger="hover"
		@show="showFn"
	>
		<div class="operate-wrap">
			<div
				class="operate-list"
				v-for="(item, index) in btnData"
				:key="index"
				@click="item.click()"
			>
				<i class="iconfont" :class="[item.icon]"></i>
				<div class="btn-text">{{ item.text }}</div>
			</div>
		</div>
		<el-button
			type="text"
			icon="el-icon-s-operation"
			slot="reference"
			class="operate-btn"
		></el-button>
	</el-popover>
</template>

<script>
export default {
	name: 'operate-module',
	data() {
		return {};
	},
	props: {
		// 按钮列表
		btnData: {
			type: Array,
			default: () => []
		},
		// 触发后传入的数据
		item: {
			type: Object,
			default: () => {}
		}
	},
	methods: {
		showFn() {
			this.$emit('show', this.item);
		}
	}
};
</script>

<style lang="scss">
.liu-popover {
	background: rgba(0, 0, 0, 0.8);
	border-color: #000;
	.popper__arrow::after {
		border-bottom-color: rgba(0, 0, 0, 0.8) !important;
	}

	.operate-wrap {
		// background: rgba(0, 0, 0, 0.8);
		box-shadow: 0px 3px 6px 0px rgba(29, 29, 29, 0.7);
		border-radius: 10px;
		// width: max-content;
		height: 50px;
		@include disFlex(center, space-around);
		.operate-list {
			width: 30%;
			height: 50px;
			line-height: 24px;
			flex-shrink: 0;
			// padding: 0 24px;
			text-align: center;
			color: #fff;
			cursor: pointer;
			.iconfont {
				font-size: 16px;
			}
			.btn-text {
				transform: scale(0.8);
				margin-top: 2px;
			}
			&:hover {
				color: $mainColor;
				.iconfont {
					color: $mainColor;
				}
			}
		}
	}
}
.operate-module {
	.operate-btn {
		color: #666;
		font-size: 24px;
		&:hover {
			color: $mainColor;
		}
	}
}
</style>