<template>
    <button style="margin: 5px;position: relative;" v-on:click="load">{{ name }}
        <div class="delbtn" title="删除" style="position: absolute;top:-5px;right:-5px;" v-on:click.stop="del">
            <svg style="pointer-events: none;" t="1728198663794" class="icon" viewBox="0 0 1070 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="4287" width="16" height="16">
                <path
                    d="M729.098039 883.45098H342.588235c-81.568627 0-148.078431-66.509804-148.078431-148.078431V377.72549c0-10.039216 8.784314-18.823529 18.823529-18.823529s18.823529 8.784314 18.82353 18.823529v357.647059c0 61.490196 50.196078 110.431373 110.431372 110.431373h386.509804c61.490196 0 110.431373-50.196078 110.431373-110.431373V377.72549c0-10.039216 8.784314-18.823529 18.823529-18.823529s18.823529 8.784314 18.82353 18.823529v357.647059c0 81.568627-66.509804 148.078431-148.078432 148.078431z"
                    fill="#e6e6e6" p-id="4288"></path>
                <path
                    d="M783.058824 266.039216v-58.980392c0-71.529412-57.72549-129.254902-129.254902-129.254902H417.882353C346.352941 77.803922 288.627451 135.529412 288.627451 207.058824v58.980392"
                    fill="#e6e6e6" p-id="4289"></path>
                <path
                    d="M783.058824 284.862745c-10.039216 0-18.823529-8.784314-18.82353-18.823529v-58.980392c0-61.490196-50.196078-110.431373-110.431372-110.431373H417.882353c-61.490196 0-110.431373 50.196078-110.431373 110.431373v58.980392c0 10.039216-8.784314 18.823529-18.823529 18.823529s-18.823529-8.784314-18.823529-18.823529v-58.980392c0-81.568627 66.509804-148.078431 148.078431-148.078432h235.921569c81.568627 0 148.078431 66.509804 148.078431 148.078432v58.980392c0 10.039216-8.784314 18.823529-18.823529 18.823529z"
                    fill="#e6e6e6" p-id="4290"></path>
                <path
                    d="M921.098039 296.156863H149.333333c-10.039216 0-18.823529-8.784314-18.823529-18.82353s8.784314-18.823529 18.823529-18.823529h771.764706c10.039216 0 18.823529 8.784314 18.82353 18.823529s-8.784314 18.823529-18.82353 18.82353zM410.352941 773.019608c-10.039216 0-18.823529-8.784314-18.823529-18.82353v-376.470588c0-10.039216 8.784314-18.823529 18.823529-18.823529s18.823529 8.784314 18.82353 18.823529v376.470588c0 10.039216-8.784314 18.823529-18.82353 18.82353z"
                    fill="#e6e6e6" p-id="4291"></path>
                <path
                    d="M661.333333 773.019608c-10.039216 0-18.823529-8.784314-18.823529-18.82353v-376.470588c0-10.039216 8.784314-18.823529 18.823529-18.823529s18.823529 8.784314 18.82353 18.823529v376.470588c0 10.039216-8.784314 18.823529-18.82353 18.82353z"
                    fill="#e6e6e6" p-id="4292"></path>
            </svg>
        </div>
    </button>
</template>
<script setup>
const props = defineProps({
    name: String
})
const emits = defineEmits(
    ['load', 'del']
)
function load() {
    emits('load', props.name)
}
function del() {
    emits('del', props.name)
}

// const name = ref(props.name)

</script>
<style>
.delbtn {
    border-radius: 3px;
}

.delbtn:hover {
    /* background-color:red; */
    cursor: pointer;
    border: 2px solid #9B0000;
}
</style>