Vue 動態繫結CSS樣式

我本樑人發表於2021-08-07
VueCSS

   今天在做專案上遇見了一個需求，通過不能的進度型別展示不同的進度形態，進度形態通過背景色和背景色上的文字顯示。

效果圖：

 

 

由於Element UI版本我用的是2.5.4  使用進度條的話 就沒有2.9.2及更高版本的format屬性，format屬性：自定義進度條的文字內容

所以就只能自己實現類似於進度條的形狀：

實現步驟：

1.定義一個p標籤，p標籤裡面包含顯示文字的a標籤，內顯文字顯示為白色

<p class="rcorners4" :style="scope.row.firstQuarterSpeedofProgress|getBackgroundColor"><a style="color:white">{{scope.row.firstQuarterSpeedofProgress|getSpeedofProgress}}</a></p>

 2.定義基本rcorners4樣式

 .rcorners4 {
    text-align: center;
    border-radius: 50px 50px 50px 50px;  
    width: 80px;
    height: 26px; 
   }

3.通過Vue過濾器實現動態切換顏色及文字文字

            getSpeedofProgress(val){
              if(val==1){return '已完成'}
              if(val==2){return '應完未完'}
              if(val==3){return '進度滯後'}
              if(val==4){return '正常推進'}
            }, 
            getBackgroundColor(val){ 
                 switch(val){
                    case 1: return 'background: #22A7FF';break
                    case 2: return 'background: red';break
                    case 3: return 'background: #EEEE11';break
                    case 4: return 'background: #2BD54D';break
                    default:return 'background: white';
                }  
            }

 

相關文章