srollRankingBoard: Add value formatter

update version to 2.9.8
update change log
2020-08-20 19:58:40 +08:00 · 2020-08-20 19:58:14 +08:00 · 2020-08-20 19:58:05 +08:00 · 2020-08-19 19:30:32 +08:00 · 2020-08-19 19:26:05 +08:00 · 2020-08-19 19:25:25 +08:00
8 changed files with 102 additions and 28 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,22 @@
+# 2.9.8-alpha (2020-08-20)
+
+### Optmization
+
+- **scrollRankingBoard:** Add value formatter.
+
+# 2.9.7-alpha (2020-08-19)
+
+### Optmization
+
+- **scrollBoard:** Optimize the update effect of updateRows.
+
+# 2.9.6-alpha (2020-08-05)
+
+### Bug Fixes
+
+- **scrollBoard:** Carousel is abnormal when carousel is page.
+- **scrollRankingBoard:** Carousel is abnormal when carousel is page.
+
 # 2.9.5-alpha (2020-08-05)

 ### Optmization
--- a/dist/datav.map.vue.js
+++ b/dist/datav.map.vue.js
@ -23018,7 +23018,8 @@
        aligns: [],
        animationIndex: 0,
        animationHandler: '',
-        updater: 0
+        updater: 0,
+        needCalc: false
      };
    },

@ -23208,6 +23209,18 @@
      },

      async animation(start = false) {
+        const {
+          needCalc,
+          calcHeights,
+          calcRowsData
+        } = this;
+
+        if (needCalc) {
+          calcRowsData();
+          calcHeights();
+          this.needCalc = false;
+        }
+
        let {
          avgHeight,
          animationIndex,
@ -23232,7 +23245,7 @@
        const animationNum = carousel === 'single' ? 1 : rowNum;
        let rows = rowsData.slice(animationIndex);
        rows.push(...rowsData.slice(0, animationIndex));
-        this.rows = rows.slice(0, rowNum + 1);
+        this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1);
        this.heights = new Array(rowLength).fill(avgHeight);
        await new Promise(resolve => setTimeout(resolve, 300));
        if (updater !== this.updater) return;
@ -23270,16 +23283,13 @@
      updateRows(rows, animationIndex) {
        const {
          mergedConfig,
-          calcRowsData,
-          calcHeights,
          animationHandler,
          animation
        } = this;
        this.mergedConfig = { ...mergedConfig,
          data: [...rows]
        };
-        calcRowsData();
-        calcHeights();
+        this.needCalc = true;
        if (typeof animationIndex === 'number') this.animationIndex = animationIndex;
        if (!animationHandler) animation(true);
      }
@ -23393,7 +23403,7 @@
    /* style */
    const __vue_inject_styles__$z = function (inject) {
      if (!inject) return
-      inject("data-v-056e9c2c_0", { source: ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n"]}, media: undefined });
+      inject("data-v-26e19f4c_0", { source: ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -23482,7 +23492,14 @@
           * @type {Boolean}
           * @default sort = true
           */
-          sort: true
+          sort: true,
+
+          /**
+           * @description Value formatter
+           * @type {Function}
+           * @default valueFormatter = null
+           */
+          valueFormatter: null
        },
        mergedConfig: null,
        rowsData: [],
@ -23690,7 +23707,13 @@
              }),
              _vm._v(" "),
              _c("div", { staticClass: "ranking-value" }, [
-                _vm._v(_vm._s(item.value + _vm.mergedConfig.unit))
+                _vm._v(
+                  _vm._s(
+                    _vm.mergedConfig.valueFormatter
+                      ? _vm.mergedConfig.valueFormatter(item)
+                      : item.value + _vm.mergedConfig.unit
+                  )
+                )
              ])
            ]),
            _vm._v(" "),
@ -23716,7 +23739,7 @@
    /* style */
    const __vue_inject_styles__$A = function (inject) {
      if (!inject) return
-      inject("data-v-66fbd7a7_0", { source: ".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n80% {\n    left: 0%;\n    transform: translateX(-100%);\n}\n100% {\n    left: 100%;\n    transform: translateX(0%);\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,WAAW;EACX,eAAe;AACjB;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;EAChD,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,WAAW;EACX,4BAA4B;EAC5B,wDAAwD;EACxD,kDAAkD;AACpD;AACA;AACE;IACE,QAAQ;IACR,4BAA4B;AAC9B;AACA;IACE,UAAU;IACV,yBAAyB;AAC3B;AACF","file":"main.vue","sourcesContent":[".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n  80% {\n    left: 0%;\n    transform: translateX(-100%);\n  }\n  100% {\n    left: 100%;\n    transform: translateX(0%);\n  }\n}\n"]}, media: undefined });
+      inject("data-v-f297519a_0", { source: ".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n80% {\n    left: 0%;\n    transform: translateX(-100%);\n}\n100% {\n    left: 100%;\n    transform: translateX(0%);\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,WAAW;EACX,eAAe;AACjB;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;EAChD,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,WAAW;EACX,4BAA4B;EAC5B,wDAAwD;EACxD,kDAAkD;AACpD;AACA;AACE;IACE,QAAQ;IACR,4BAA4B;AAC9B;AACA;IACE,UAAU;IACV,yBAAyB;AAC3B;AACF","file":"main.vue","sourcesContent":[".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n  80% {\n    left: 0%;\n    transform: translateX(-100%);\n  }\n  100% {\n    left: 100%;\n    transform: translateX(0%);\n  }\n}\n"]}, media: undefined });

    };
    /* scoped */
--- a/dist/datav.min.vue.js
+++ b/dist/datav.min.vue.js
--- a/lib/components/scrollBoard/src/main.vue
+++ b/lib/components/scrollBoard/src/main.vue
@ -178,7 +178,9 @@ export default {

      animationHandler: '',

-      updater: 0
+      updater: 0,
+
+      needCalc: false
    }
  },
  watch: {
@ -335,6 +337,14 @@ export default {
      this.aligns = deepMerge(aligns, align)
    },
    async animation (start = false) {
+      const { needCalc, calcHeights, calcRowsData } = this
+
+      if (needCalc) {
+        calcRowsData()
+        calcHeights()
+        this.needCalc = false
+      }
+
      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this

      const { waitTime, carousel, rowNum } = mergedConfig
@ -353,7 +363,7 @@ export default {
      let rows = rowsData.slice(animationIndex)
      rows.push(...rowsData.slice(0, animationIndex))

-      this.rows = rows.slice(0, rowNum + 1)
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
      this.heights = new Array(rowLength).fill(avgHeight)

      await new Promise(resolve => setTimeout(resolve, 300))
@ -389,15 +399,15 @@ export default {
      })
    },
    updateRows(rows, animationIndex) {
-      const { mergedConfig, calcRowsData, calcHeights, animationHandler, animation } = this
+      const { mergedConfig, animationHandler, animation } = this

      this.mergedConfig = {
        ...mergedConfig,
        data: [...rows]
      }

-      calcRowsData()
-      calcHeights()
+      this.needCalc = true
+
      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
      if (!animationHandler) animation(true)
    }
--- a/lib/components/scrollRankingBoard/src/main.vue
+++ b/lib/components/scrollRankingBoard/src/main.vue
@ -9,7 +9,7 @@
      <div class="ranking-info">
        <div class="rank">No.{{ item.ranking }}</div>
        <div class="info-name" v-html="item.name" />
-        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
+        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
      </div>

      <div class="ranking-column">
@ -82,7 +82,13 @@ export default {
         * @type {Boolean}
         * @default sort = true
         */
-        sort: true
+        sort: true,
+        /**
+         * @description Value formatter
+         * @type {Function}
+         * @default valueFormatter = null
+         */
+        valueFormatter: null
      },

      mergedConfig: null,
@ -232,7 +238,7 @@ export default {
      if (!animationHandler) return

      clearTimeout(animationHandler)
-    }
+    },
  },
  destroyed () {
    const { stopAnimation } = this
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@jiaminghi/data-view",
-  "version": "2.9.5",
+  "version": "2.9.8",
  "author": "JiaMing <743192023@qq.com>",
  "description": "Vue Large screen data display component library",
  "main": "lib/index.js",
--- a/src/components/scrollBoard/src/main.vue
+++ b/src/components/scrollBoard/src/main.vue
@ -178,7 +178,9 @@ export default {

      animationHandler: '',

-      updater: 0
+      updater: 0,
+
+      needCalc: false
    }
  },
  watch: {
@ -335,6 +337,14 @@ export default {
      this.aligns = deepMerge(aligns, align)
    },
    async animation (start = false) {
+      const { needCalc, calcHeights, calcRowsData } = this
+
+      if (needCalc) {
+        calcRowsData()
+        calcHeights()
+        this.needCalc = false
+      }
+
      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this

      const { waitTime, carousel, rowNum } = mergedConfig
@ -353,7 +363,7 @@ export default {
      let rows = rowsData.slice(animationIndex)
      rows.push(...rowsData.slice(0, animationIndex))

-      this.rows = rows.slice(0, rowNum + 1)
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
      this.heights = new Array(rowLength).fill(avgHeight)

      await new Promise(resolve => setTimeout(resolve, 300))
@ -389,15 +399,15 @@ export default {
      })
    },
    updateRows(rows, animationIndex) {
-      const { mergedConfig, calcRowsData, calcHeights, animationHandler, animation } = this
+      const { mergedConfig, animationHandler, animation } = this

      this.mergedConfig = {
        ...mergedConfig,
        data: [...rows]
      }

-      calcRowsData()
-      calcHeights()
+      this.needCalc = true
+
      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
      if (!animationHandler) animation(true)
    }
--- a/src/components/scrollRankingBoard/src/main.vue
+++ b/src/components/scrollRankingBoard/src/main.vue
@ -9,7 +9,7 @@
      <div class="ranking-info">
        <div class="rank">No.{{ item.ranking }}</div>
        <div class="info-name" v-html="item.name" />
-        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
+        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
      </div>

      <div class="ranking-column">
@ -82,7 +82,13 @@ export default {
         * @type {Boolean}
         * @default sort = true
         */
-        sort: true
+        sort: true,
+        /**
+         * @description Value formatter
+         * @type {Function}
+         * @default valueFormatter = null
+         */
+        valueFormatter: null
      },

      mergedConfig: null,
@ -232,7 +238,7 @@ export default {
      if (!animationHandler) return

      clearTimeout(animationHandler)
-    }
+    },
  },
  destroyed () {
    const { stopAnimation } = this
Author	SHA1	Message	Date
jiaming743	751eb2f29b	srollRankingBoard: Add value formatter	2020-08-20 19:58:40 +08:00
jiaming743	30a343307e	update version to 2.9.8	2020-08-20 19:58:14 +08:00
jiaming743	6630bc1e84	update change log	2020-08-20 19:58:05 +08:00
jiaming743	687ccfaab8	uodate change log	2020-08-19 19:30:32 +08:00
jiaming743	1082be1251	update dist and lib	2020-08-19 19:26:05 +08:00
jiaming743	e67b4d5403	Optimize the update effect of updateRows.	2020-08-19 19:25:25 +08:00
jiaming743	1c7e03bff8	update change log	2020-08-19 19:25:20 +08:00
jiaming743	c5ff0cd474	update version to 2.9.7	2020-08-19 19:25:14 +08:00
jiaming743	1e76c1c0ec	update dist and lib	2020-08-05 14:21:31 +08:00
jiaming743	731d89fb1a	update version to 2.9.6	2020-08-05 14:20:33 +08:00
jiaming743	dd512c05dc	update change log	2020-08-05 14:20:27 +08:00
jiaming743	be97afe8a9	fix: Carousel is abnormal when carousel is page	2020-08-05 14:19:23 +08:00