Compare commits
16 Commits
V2.9.5-alp
...
V2.9.9-alp
Author | SHA1 | Date | |
---|---|---|---|
1db9bd4b6b | |||
d8899785a7 | |||
918653c9d9 | |||
751eb2f29b | |||
30a343307e | |||
6630bc1e84 | |||
687ccfaab8 | |||
1082be1251 | |||
e67b4d5403 | |||
1c7e03bff8 | |||
c5ff0cd474 | |||
051cb8f8de | |||
1e76c1c0ec | |||
731d89fb1a | |||
dd512c05dc | |||
be97afe8a9 |
19
CHANGELOG.md
19
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
|
||||
|
43
dist/datav.map.vue.js
vendored
43
dist/datav.map.vue.js
vendored
@ -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 */
|
||||
|
2
dist/datav.min.vue.js
vendored
2
dist/datav.min.vue.js
vendored
File diff suppressed because one or more lines are too long
@ -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)
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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",
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
|
||||
<svg class="border" :width="width" :height="height">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
|
||||
4, ${height} 0, ${height - 4} 0, 4
|
||||
@ -12,7 +12,7 @@
|
||||
height="150px"
|
||||
:key="item"
|
||||
v-for="item in border"
|
||||
:class="`${item} border`"
|
||||
:class="`${item} dv-border-svg-container`"
|
||||
>
|
||||
<polygon
|
||||
:fill="mergedColor[1]"
|
||||
@ -86,7 +86,7 @@ export default {
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
|
||||
.border {
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
@ -292,7 +292,7 @@ export default {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
polyline {
|
||||
& > polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
@ -89,7 +89,7 @@ export default {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
polyline {
|
||||
& > polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
@ -93,7 +93,7 @@ export default {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
polyline {
|
||||
& > polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
@ -105,7 +105,7 @@ export default {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
polyline {
|
||||
& > polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dv-border-box-5" :ref="ref">
|
||||
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
|
||||
`" />
|
||||
@ -94,14 +94,14 @@ export default {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dv-svg-container {
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
polyline {
|
||||
& > polyline {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dv-border-box-6" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
|
||||
`" />
|
||||
@ -86,14 +86,14 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-svg-container {
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
polyline {
|
||||
& > polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
@ -5,7 +5,7 @@
|
||||
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
|
||||
:ref="ref"
|
||||
>
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
|
||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
|
||||
@ -80,14 +80,14 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dv-svg-container {
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
polyline {
|
||||
& > polyline {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dv-border-box-8" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<path
|
||||
:id="path"
|
||||
@ -147,7 +147,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dv-border-box-9" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<animate
|
||||
@ -185,7 +185,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
.dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user