효과를 얻다
실패 스크린샷은 없습니다. 실패는 빨간 점으로 표시됩니다.
구성 요소 캡슐화
<template>
<span class="badge">
<span
:class="{
'badge-status-dot': !!status,
[`badge-status-${
status}`]: !!status
}"
/>
<span class="badge-status-text">{
{
text }}</span>
</span>
</template>
<script>
export default {
name: 'status-badge',
props: {
status: String,
text: String
}
};
</script>
<style lang="scss" scoped>
$badge-status-size: 6px;
.badge {
position: relative;
display: inline-block;
line-height: 1;
color: unset;
&-status {
line-height: inherit;
vertical-align: baseline;
&-dot {
width: $badge-status-size;
height: $badge-status-size;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
position: relative;
top: -1px;
}
&-success {
background-color: $--color-success;
}
&-processing {
background-color: $--color-primary;
position: relative;
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid $--color-primary;
content: '';
animation: statusProcessing 1.2s infinite ease-in-out;
}
}
&-default {
background-color: $--color-info;
}
&-error {
background-color: $--color-danger;
}
&-warning {
background-color: $--color-warning;
}
&-text {
margin-left: 8px;
}
}
}
@keyframes statusProcessing {
0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(2.4);
opacity: 0;
}
}
</style>
구성요소 사용법
<status-badge
:status="BUILD_STATUS_BADGE_MAP[getBuildStatus(row)]"
:text="BUILD_STATUS_TEXT[getBuildStatus(row)]"
></status-badge>
색상 상태 상수 구성
export const BUILD_STATUS_TEXT = {
[BUILD_STATUS.All]: '全部',
[BUILD_STATUS.UNDO]: '未构建',
[BUILD_STATUS.DOING]: '构建中',
[BUILD_STATUS.FAIL]: '失败',
[BUILD_STATUS.CANCEL]: '取消',
[BUILD_STATUS.SUCCESS]: '成功'
};
export const BUILD_STATUS_BADGE_MAP = {
[BUILD_STATUS.UNDO]: 'warning',
[BUILD_STATUS.DOING]: 'processing',
[BUILD_STATUS.FAIL]: 'error',
[BUILD_STATUS.CANCEL]: 'default',
[BUILD_STATUS.SUCCESS]: 'success '
};