<template><!--自定义的tag标签-->
    <span>
        <el-tag v-if="!type">{{text}}</el-tag>
        <el-tag v-if="type ==='violet'" class="violet-tag" color="rgba(136, 83, 215, 0.15)">{{text}}</el-tag>
        <el-tag v-if="type ==='grey'" class="grey-tag" color="rgba(105, 108, 120, 0.15)">{{text}}</el-tag>
        <el-tag v-if="type ==='normal'" class="normal-tag" color="rgba(68, 215, 182, 0.15)">{{text}}</el-tag>
        <el-tag v-if="type === 'warning'" type="warning">{{text}}</el-tag>
        <el-tag v-if="type==='danger'" type="danger">{{text}}</el-tag>
        <el-tag v-if="type==='success'" type="success">{{text}}</el-tag>
        <el-tag v-if="type==='info'" type="info">{{text}}</el-tag>
    </span>
</template>

<script>
    export default {
        name: "tag",
        props: {
            type: String,//类型
            text: String,//文本
        }
    }
</script>

<style lang="less" scoped>
    .violet-tag {
        color: rgba(127, 68, 215, 1);
    }

    .grey-tag {
        color: rgba(105, 108, 120, 100);
    }

    .normal-tag {
        color: rgba(68, 215, 182, 100);
    }

    /deep/ .el-tag {
        font-size: 13px;
        height: unset;
        line-height: unset;
        padding: 4px 10px;
        border-radius: 12px;
    }
</style>