init

src/components/DelWrap/index.vue

@@ -0,0 +1,51 @@
+<template>
+	<div class="del-wrap">
+		<slot></slot>
+		<div v-if="showClose" class="icon-close" @click.stop="handleClose">
+			<el-icon><CloseBold /></el-icon>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+	props: {
+		showClose: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	emits: ['close'],
+	setup(props, { emit }) {
+		const handleClose = () => {
+			emit('close');
+		};
+		return {
+			handleClose,
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.del-wrap {
+	position: relative;
+	&:hover > .icon-close {
+		display: flex;
+	}
+	.icon-close {
+		display: none;
+		position: absolute;
+		top: -8px;
+		right: -8px;
+		width: 16px;
+		height: 16px;
+		background-color: rgba(0, 0, 0, 0.3);
+		justify-content: center;
+		align-items: center;
+		border-radius: 50%;
+		color: #fff;
+		cursor: pointer;
+	}
+}
+</style>