<template>
    <div class="del-wrap">
        <slot></slot>
        <div v-if="showClose" class="icon-close" @click.stop="handleClose">
            <icon :size="12" name="el-icon-CloseBold" />
        </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>