2022-06-08 14:51:11 +08:00

44 lines
1.3 KiB
Vue

<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>