部分字段截短

components/bussiness/exam-list.vue

@@ -7,7 +7,7 @@
     </ul>
     <ul class="list">
       <li v-for="(item, index) in dataList" :key="index">
-        <span>{{item.examName}}</span>
+        <span>{{item.examName | shortName}}</span>
         <span>{{(item.joinRate * 100).toFixed(1)}}%</span>
       </li>
     </ul>
@@ -21,6 +21,15 @@ export default {
       default: () => []
     }
   },
+  filters: {
+    shortName: function (value, length = 12, append = '...') {
+      if (value && value.length > length) {
+        return value.substring(0, length) + append
+      } else {
+        return value
+      }
+    },
+  },
   methods: {
 
   }

components/bussiness/ranking-item-days.vue

@@ -7,7 +7,7 @@
         <span v-else>{{index + 1}}</span>
       </div>
       <div class="content">
-        <p class="desc-3">{{item.subName}}</p>
+        <p class="desc-3">{{item.subName | shortName}}</p>
         <!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> -->
       </div>
       <div class="ratio">
@@ -25,6 +25,15 @@ export default {
       default: () => []
     }
   },
+  filters: {
+    shortName: function (value, length = 12, append = '...') {
+      if (value && value.length > length) {
+        return value.substring(0, length) + append
+      } else {
+        return value
+      }
+    },
+  },
   methods: {
     getRankImgUrl(index) {
       return require(`../../assets/images/rank-${index + 1}.png`);

components/bussiness/ranking-item.vue

@@ -8,7 +8,7 @@
           <span v-else>{{index + 1}}</span>
         </div>
         <div class="content">
-          <span class="desc-1">{{item.subName}}</span>
+          <span class="desc-1">{{item.subName | shortName}}</span>
           <span class="desc-2">{{certFlag ? '获证人数' : '完成人数'}} {{item.certCount}} | 参与人数 {{item.joinCount}}</span>
         </div>
         <div class="ratio">
@@ -31,6 +31,15 @@ export default {
       default: 0
     }
   },
+  filters: {
+    shortName: function (value, length = 12, append = '...') {
+      if (value && value.length > length) {
+        return value.substring(0, length) + append
+      } else {
+        return value
+      }
+    },
+  },
   methods: {
     getRankImgUrl(index) {
       return require(`../../assets/images/rank-${index + 1}.png`);