add vue directive to round number

src/directives/numberToPercent.ts

@@ -0,0 +1,16 @@
+export default {
+  created(el: HTMLElement) {
+    // created(el, binding, vnode, prevVnode) {
+    // console.log(el, binding, vnode, prevVnode);
+    const ft = parseFloat(el.innerText);
+    if (typeof ft === "number") {
+      el.innerText = (Math.round(ft * 100) / 100) * 100 + "%";
+    }
+  }, // new
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {}, // new
+  updated() {},
+  beforeUnmount() {}, // new
+  unmounted() {},
+};

src/directives/roundNumber.ts

@@ -0,0 +1,16 @@
+export default {
+  created(el: HTMLElement) {
+    // created(el, binding, vnode, prevVnode) {
+    // console.log(el, binding, vnode, prevVnode);
+    const ft = parseFloat(el.innerText);
+    if (typeof ft === "number") {
+      el.innerText = Math.round(ft * 100) / 100 + "";
+    }
+  }, // new
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {}, // new
+  updated() {},
+  beforeUnmount() {}, // new
+  unmounted() {},
+};

src/features/allAnalysis/ScoreFirstTryRate.vue

@@ -29,19 +29,19 @@
               <td>
                 {{ scoreTitle(item.totalScoreRangeTitle[index]) || "全体考生" }}
               </td>
-              <td>
+              <td v-number-to-percent>
                 {{ item2.countRate }}
               </td>
-              <td>
+              <td v-round-number>
                 {{ item2.avgTotalScore }}
               </td>
-              <td>
+              <td v-round-number>
                 {{ item2.avgScore }}
               </td>
-              <td>
+              <td v-round-number>
                 {{ item2.difficulty }}
               </td>
-              <td>
+              <td v-number-to-percent>
                 {{ item2.scoreRate }}
               </td>
             </tr>

src/main.ts

@@ -13,6 +13,8 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "@/router";
 import filters from "@/filters";
+import roundNumber from "@/directives/roundNumber";
+import numberToPercent from "@/directives/numberToPercent";
 // import Antd from "ant-design-vue";
 // import "ant-design-vue/dist/antd.css";
 import ECharts from "vue-echarts";
@@ -44,5 +46,7 @@ app.use(createPinia());
 app.config.globalProperties.$filters = filters;
 
 app.component("v-chart", ECharts);
+app.directive("round-number", roundNumber);
+app.directive("number-to-percent", numberToPercent);
 
 app.mount("#app");