iview progress

html:

            <div class="rateCard" v-for="item in rateList1">
                <div class="rateCard1 ha">{{item.target_type}}</div>
                <div class="rateCard4"></div>
                <div class="rateCard3"></div>
                <div class="rateCard2">
                    <div class="rateCard2_1">
                        <span class="ha rateCard2_1_span1">目前狀態：</span>
                        <span class="ha detailClick" @click="detail">详情</span>
                    </div>
                    <div class="mLine"></div>
                    <div class="rateCard2_2">
                        <span class="ha rateCard2_2_span2">目標：<span style="color:#0f0">98%</span></span>
                        <div v-for="items in item.target_detail">
                            <div v-if="items.index==0">
                                <span class="ha rateCard2_2_span1">T-1</span>
                                <i-progress class="progress2" :percent=items.result></i-progress>
                            </div>
                            <div v-else-if="items.index==1">
                                <span class="ha rateCard2_2_span1">T-2</span>
                                <i-progress class="progress2" :percent=items.result></i-progress>
                            </div>
                            <div v-else-if="items.index==2">
                                <span class="ha rateCard2_2_span1" style="marginBottom:5px">T-3</span>
                                <i-progress class="progress2" :percent=items.result></i-progress>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

1.避免进度条为100%时显示状态对号的图片任让其显示100%

<i-progress class="progress1 mPercent" :percent="percent">
                                        <span>{{percent}}%</span>
                                </i-progress>

2.根据状态让其显示不同渐变颜色

<div id="app">

<div  v-if='aa==100'><i-progress   :percent=aa  :stroke-color="['#0f0','#0f0']" > <span>{{aa}}%</span></i-progress>  </div>
<div  v-else-if='aa>=90'><i-progress   :percent=aa  :stroke-color="['#f78603','#0f0']" /> </div>
<div v-else><i-progress   :percent=aa  :stroke-color="['#f00','#f78603']" /> </div>

</div>

 var Main = {
         data(){
            return {
              aa:99
            }
         }
    }

var Component = Vue.extend(Main)
new Component().$mount('#app')