front-end/admin-update/src/components/module/operate-line.vue

<template>
		<!--  -->
	<el-popover
		v-model="show"
		class="operate-module-line"
		popper-class="liu-popover-line"
		placement="top"
		width="104"
		trigger="manual"
	>
		<div class="operate-wrap">
			<div class="operate-list" v-for="(item, index) in data.children" :key="index">
				<i class="iconfont iconcaozuojihuo" @click.stop="listDel(index)"></i>
				<div class="btn-text" @click="listClick(item, index)">{{ item.name }}</div>
			</div>
			<div
				class="operate-list operate-list-add"
				@click="addFn()"
			>
				<i class="iconfont icontupiantianjia icon-add"></i>
			</div>
		</div>
		<el-button type="text" icon="el-icon-s-fold" slot="reference" class="operate-btn">{{
			data.name
		}}</el-button>
	</el-popover>
</template>

<script>
export default {
	name: 'operate-module',
	data() {
		return {};
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		// 触发后传入的数据
		data: {
			type: Object,
			default: () => {}
		}
	},
	mounted() {
		// console.log(this.data);
	},
	methods: {
		showFn() {
			this.$emit('show', this.data);
		},
		listClick(item, index) {
			this.$emit('click', {...item, ...{index: index}});
		},
		listDel(index) {
			this.$emit('del', index);
		},
		addFn() {
			this.$emit('add');
		}
	}
};
</script>

<style lang="scss">
.liu-popover-line {
	min-width: 100px !important;
	padding: 0 !important;

	.operate-wrap {
		border-radius: 10px;
		.operate-list {
			width: 104px;
			height: 50px;
			line-height: 50px;
			flex-shrink: 0;
			text-align: center;
			position: relative;
			border-top: 1px solid #f7f7f7;
			&:first-child {
				border-top: none;
			}
			.iconfont {
				font-size: 16px;
				cursor: pointer;
				&:hover {
					color: $mainColor;
				}
			}
			.iconcaozuojihuo {
				position: absolute;
				top: -12px;
				right: 6px;
				font-size: 16px;
			}
			.btn-text {
				// margin-top: 2px;
				cursor: pointer;
				&:hover {
					color: $mainColor;
					background-color: $backColor;
				}
			}
		}
		.operate-list-add {
			cursor: pointer;
			&:hover {
				color: $mainColor;
				background-color: $backColor;
				.iconfont {
					color: $mainColor;
				}
			}
		}
	}
}
.operate-module-line {
	.operate-btn {
		color: #666;
		font-size: 16px;
		&:hover {
			color: $mainColor;
		}
	}
}
</style>