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

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

样式如图：

 

 

代码如下：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<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> <p><script><br> export default {<br> props: {<br> status: {<br> default: null,<br> },<br> option: {<br> required: false,<br> },<br> },<br> };<br> </script></p> <p><style lang="scss" scoped><br> .dot {<br> width: 8px;<br> height: 8px;<br> border-radius: 50%;<br> display: inline-block;<br> margin-right: 6px;<br> &::before {<br> content: none;<br> }<br> }<br> .dot.success {<br> background-color: #67c23a;<br> }<br> .dot.danger {<br> background-color: #f56c6c;<br> }<br> .dot.info {<br> background-color: #909399;<br> }<br> .dot.warning {<br> background-color: #e6a23c;<br> }<br> .dot.none {<br> display: none;<br> }<br> .danger {<br> color: #f56c6c;<br> }<br> </style><br> </p>

　

 

传参：

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