vue之封装一个用来展示状态用的组件

table等其他地方可能需要根据某个字段的值展示不同的状态，但是状态比较多的话却是需要很多的判断或者繁杂的三目判断，所以封装了一个用来展示的组件：

样式如图：

 

 

代码如下：

 

<template>
  <div>
    <span>
      <span v-for="item in option" :key="item.value">
        <span v-if="item.value === status">
          <span class="dot" :class="item.type"></span>
          <span :class="item.color">{{ item.label }}</span>
        </span>
      </span>
    </span>
    <span v-if="status === null || status === '-'">-</span>
    <slot></slot>
  </div>
</template>
<script>

export default {

props: {

status: {

default: null,

},

option: {

required: false,

},

},

};

</script>
<style lang="scss" scoped>

.dot {

width: 8px;

height: 8px;

border-radius: 50%;

display: inline-block;

margin-right: 6px;

&::before {

content: none;

}

}

.dot.success {

background-color: #67c23a;

}

.dot.danger {

background-color: #f56c6c;

}

.dot.info {

background-color: #909399;

}

.dot.warning {

background-color: #e6a23c;

}

.dot.none {

display: none;

}

.danger {

color: #f56c6c;

}

</style>

　

 

传参：

• status：当前的状态
• option：所有状态的数组，对应下方css样式