front-end/mobile-code/src/admin/home/components/module/operate-line.vue

<template>
	<div class="operate-line-module" :class="[isModify ? 'witer' : 'back']" :style="{bottom: bottom + 'rpx', left: left + 'rpx'}">
		<div class="operate-list" :style="{height: listHei + 'rpx'}" v-for="(item, index) in btnData" :key="index" @click="clickFn(item, index)">
			<div v-if="isModify" class="icon-del" @click.stop="delFn(index)">
				<i class="iconfont iconguanbi"></i>
			</div>
			<div class="btn-text">{{ item.name }}</div>
		</div>
		<div v-if="isModify" class="operate-list" :style="{height: listHei + 'rpx'}" @click="addFn">
			<i class="iconfont icontupiantianjia icon-add"></i>
		</div>
	</div>
</template>

<script>
export default {
	name: 'operate-line-module',
	props: {
		// 是否可以操作
		isModify: {
			type: Boolean,
			default: false
		},
		bottom: {
			type: Number,
			default: 480
		},
		left: {
			type: Number,
			default: 40
		},
		// 按钮列表
		btnData: {
			type: Array,
			default: () => []
		},
		// 按钮列表高度
		listHei: {
			type: Number,
			default: 100
		}
	},
	methods: {
		addFn() {
			this.$emit('add')
		},
		delFn(index) {
			this.$emit('del', index)
		},
		clickFn(item, index) {
			if (item.click) {
				item.click()
				return false
			}
			this.$emit('clickFn', index)
		}
	}
}
</script>

<style lang="scss" scoped>
	.operate-line-module {
		position: absolute;
		border-radius: 10px;
		padding: 0 10px;
		width: 170px;
		z-index: 999;
		&.witer {
			background-color: #fff;
			&::after {
				border-color: #fff transparent transparent transparent !important;
			}
		}
		&.back {
			color: #fff;
			background: rgba(0, 0, 0, 0.8);
			box-shadow: 0px 3px 6px 0px rgba(29, 29, 29, 0.7);
			&::after {
				opacity: 0.8;
				border-color: #000 transparent transparent transparent !important;
			}
		}
		&::after {
			content: '';
			position: absolute;
			bottom: -28px;
			left: 80px;
			width: 0;
			height: 0;
			// top: 16px;
			border: 14px solid #fff;
		}
		// 操作列表
		.operate-list {
			@include disFlex(center, center);
			border-top: 1px solid $borderColor;
			position: relative;
			&:first-child {
				border-top: 0;
			}
			.icon-del {
				position: absolute;
				top: 12px;
				right: 0;
				.iconfont {
					font-size: 24px;
					transform: scale(0.6);
				}
			}
			.icon-add {
				color: #09bb07;
				font-size: 24px;
			}
		}
	}
</style>