Skip to content

Commit 751eb2f

Browse files
jiaming743jiaming743
committed
srollRankingBoard: Add value formatter
1 parent 30a3433 commit 751eb2f

4 files changed

Lines changed: 38 additions & 13 deletions

File tree

‎dist/datav.map.vue.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23492,7 +23492,14 @@
2349223492
* @type {Boolean}
2349323493
* @default sort = true
2349423494
*/
23495-
sort: true
23495+
sort: true,
23496+
23497+
/**
23498+
* @description Value formatter
23499+
* @type {Function}
23500+
* @default valueFormatter = null
23501+
*/
23502+
valueFormatter: null
2349623503
},
2349723504
mergedConfig: null,
2349823505
rowsData: [],
@@ -23636,7 +23643,7 @@
2363623643
const animationNum = carousel === 'single' ? 1 : rowNum;
2363723644
let rows = rowsData.slice(animationIndex);
2363823645
rows.push(...rowsData.slice(0, animationIndex));
23639-
this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1);
23646+
this.rows = rows.slice(0, rowNum + 1);
2364023647
this.heights = new Array(rowLength).fill(avgHeight);
2364123648
await new Promise(resolve => setTimeout(resolve, 300));
2364223649
if (updater !== this.updater) return;
@@ -23700,7 +23707,13 @@
2370023707
}),
2370123708
_vm._v(" "),
2370223709
_c("div", { staticClass: "ranking-value" }, [
23703-
_vm._v(_vm._s(item.value + _vm.mergedConfig.unit))
23710+
_vm._v(
23711+
_vm._s(
23712+
_vm.mergedConfig.valueFormatter
23713+
? _vm.mergedConfig.valueFormatter(item)
23714+
: item.value + _vm.mergedConfig.unit
23715+
)
23716+
)
2370423717
])
2370523718
]),
2370623719
_vm._v(" "),
@@ -23726,7 +23739,7 @@
2372623739
/* style */
2372723740
const __vue_inject_styles__$A = function (inject) {
2372823741
if (!inject) return
23729-
inject("data-v-14e1c432_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 });
23742+
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 });
2373023743

2373123744
};
2373223745
/* scoped */

‎dist/datav.min.vue.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/components/scrollRankingBoard/src/main.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div class="ranking-info">
1010
<div class="rank">No.{{ item.ranking }}</div>
1111
<div class="info-name" v-html="item.name" />
12-
<div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
12+
<div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
1313
</div>
1414

1515
<div class="ranking-column">
@@ -82,7 +82,13 @@ export default {
8282
* @type {Boolean}
8383
* @default sort = true
8484
*/
85-
sort: true
85+
sort: true,
86+
/**
87+
* @description Value formatter
88+
* @type {Function}
89+
* @default valueFormatter = null
90+
*/
91+
valueFormatter: null
8692
},
8793
8894
mergedConfig: null,
@@ -208,7 +214,7 @@ export default {
208214
let rows = rowsData.slice(animationIndex)
209215
rows.push(...rowsData.slice(0, animationIndex))
210216
211-
this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
217+
this.rows = rows.slice(0, rowNum + 1)
212218
this.heights = new Array(rowLength).fill(avgHeight)
213219
214220
await new Promise(resolve => setTimeout(resolve, 300))
@@ -232,7 +238,7 @@ export default {
232238
if (!animationHandler) return
233239
234240
clearTimeout(animationHandler)
235-
}
241+
},
236242
},
237243
destroyed () {
238244
const { stopAnimation } = this

‎src/components/scrollRankingBoard/src/main.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div class="ranking-info">
1010
<div class="rank">No.{{ item.ranking }}</div>
1111
<div class="info-name" v-html="item.name" />
12-
<div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
12+
<div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
1313
</div>
1414

1515
<div class="ranking-column">
@@ -82,7 +82,13 @@ export default {
8282
* @type {Boolean}
8383
* @default sort = true
8484
*/
85-
sort: true
85+
sort: true,
86+
/**
87+
* @description Value formatter
88+
* @type {Function}
89+
* @default valueFormatter = null
90+
*/
91+
valueFormatter: null
8692
},
8793
8894
mergedConfig: null,
@@ -208,7 +214,7 @@ export default {
208214
let rows = rowsData.slice(animationIndex)
209215
rows.push(...rowsData.slice(0, animationIndex))
210216
211-
this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
217+
this.rows = rows.slice(0, rowNum + 1)
212218
this.heights = new Array(rowLength).fill(avgHeight)
213219
214220
await new Promise(resolve => setTimeout(resolve, 300))
@@ -232,7 +238,7 @@ export default {
232238
if (!animationHandler) return
233239
234240
clearTimeout(animationHandler)
235-
}
241+
},
236242
},
237243
destroyed () {
238244
const { stopAnimation } = this

0 commit comments

Comments
 (0)