<template>
    <div>
        <span class="tag-box" :class="{'remove-tag': shwoRemove}" :style="{
            'border-color': color || '#FF4436',
            'color': color || '#FF4436',
        }">
            <i class="dot" :style="{'background': color || '#FF4436'}"></i>
            {{ text || '标签' }}
            <i v-if="!loading" class="el-icon el-icon-close" @click="callback"></i>
            <i v-if="loading" class="el-icon el-icon-loading"></i>
        </span>
    </div>
</template>

<script>
export default {
    name: "veTag",
    data() {
        return {};
    },
    props: {
        text: {
            default: '标签'
        },
        shwoRemove: {
            default: false,
        },
        color: {
            default: '#FF4436',
        },
        loading: {
            default: false,
        }
    },
    created() {

    },
    methods: {
        callback() {
            this.$emit("callBack")
        }
    }
};
</script>

<style scoped lang="less">
.tag-box {
    position: relative;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    padding: 0 20px;
    border: 1px solid;
    border-radius: 0 12px 12px 12px;

    .dot {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        top: 6px;
        left: 4px;
    }

    .el-icon {
        position: absolute;
        margin-left: 5px;
        font-size: 14px;
        top: 5px;
        right: 5px;
    }

    .el-icon-close {
        cursor: pointer;
        display: none;
    }
}

.remove-tag:hover .el-icon-close {
    display: inline-block;
}
</style>
