使用Vue配合插件實現進度條和提示信息功能

1.bootstrap4 中progress和tooltip

使用該插件我只是實現progress進度條功能，提示信息沒有顯示出來，原因可能是bootstrap和elementui插件混在一起優先級下降，或者是因爲我是想在該頁面中點擊按鈕彈出的模態框中顯示的進度條，這樣dom節點層級過高使用不便。
現在展示我實現的功能：
展示如下：

簡單介紹一下bootstrap4中的progress和tooltip
官方中文手冊

官方代碼展示如下：

<div class="progress">
  <div class="progress-bar" role="progressbar" 
  style="width: 25%;" 
  aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

官方樣式展示如下：

這裏要對進度條中的數值進行判斷，方法很多我選擇的是三目運算

1. 綁定vue使用寫法’v-bind==：’
2. 三目運算，我的參數detail.h_r_score，、
   如果參數：detail.h_r_score小於60分，增加一個class樣式，
   否則顯示另一個class樣式

:class="[ detail.h_r_score < 60 ? 'progress-bar bg-danger' : 'progress-bar bg-info' ]" 

完整代碼：

<table class="table card-table"  \:action="editPanel.action" >
    <thead>
       <tr>
         <th>課程標準名稱</th>
         <th>成績</th>
         <th>單個成績所佔比</th>
       </tr>
     </thead>
     <tbody>
        <tr v-for="detail in detailList" :key="detail.criteria_id">
           <td>{{detail.name}}</td>
           <td style="white-space:pre-wrap;">{{detail.h_r_score}}</td>
           <td style="white-space:pre-wrap;">
               <div class="progress" style="height:1.2rem">
                    <div :class="
                    [ detail.h_r_score < 60 ? 
                    'progress-bar bg-danger' : 'progress-bar bg-info' ]" 
                     role="progressbar" 
                    :style="{width: detail.h_r_score + '%'}" 
                    aria-valuenow="{detail.h_r_score}" 
                    aria-valuemin="0" aria-valuemax="100"
                    data-toggle="tooltip" 
                    data-placement="top" 
                    title="{{detail.h_r_score}}"
                    >{{detail.h_r_score}}%</div>
                 </div>
           </td>

2.vue+elementUI中progress和tooltip

完成效果展示如下：

首先需要了解elementUI的組件中progress進度條和tooltip提示信息的使用方法
官方文檔

progress官網代碼

<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>

tooltip官網代碼

<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
     <el-button>上邊</el-button>
</el-tooltip>

1. 結合v-if根據不同分數展示不同顏色樣式v-if="detail.h_r_score<=40"
2. el-progress中:stroke-width="18"爲進度條的寬度
3. el-progress中 :percentage="detail.h_r_score"綁定顯示的進度條文本信息
4. el-tooltip 中 :content="'總分：100，取得成績:'+ detail.h_r_score + ''"
5. el-tooltip 中 :content="detail.h_r_score + ''"

完整代碼：

 <td>
     <el-tooltip class="item" effect="dark" 
     :content="'總分：100，取得成績:'+ detail.h_r_score + ''" 
     placement="top">
        <div v-if="detail.h_r_score<=40">
            <#--  <el-progress :text-inside="true" :stroke-width="18" 
            :percentage="0"></el-progress>  -->
            <el-progress :text-inside="true" :stroke-width="18" 
            :percentage="detail.h_r_score" status="exception" ></el-progress>
        </div>
        <div v-else-if="detail.h_r_score > 40 && detail.h_r_score<=80">
             <el-progress :text-inside="true" :stroke-width="18" 
             :percentage="detail.h_r_score"></el-progress>
		</div>
        <div  v-else>
             <el-progress :text-inside="true" :stroke-width="18" 
             :percentage="detail.h_r_score" status="success"></el-progress>
        </div>
    </el-tooltip>
</td>

展示效果：