update version to 2.9.9

CHANGELOG.md

@@ -1,4 +1,17 @@
-# 2.9.7-alpha (2020-08-05)
+# 2.9.9-alpha (2020-08-25)
+
+### Optmization
+
+- **borderBox:** Canonical class name.
+- **autoResize(mixin):** Add exception prompt.
+
+# 2.9.8-alpha (2020-08-20)
+
+### Optmization
+
+- **scrollRankingBoard:** Add value formatter.
+
+# 2.9.7-alpha (2020-08-19)
 
 ### Optmization
 

dist/datav.map.vue.js

@@ -23492,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: [],
@@ -23636,7 +23643,7 @@
         const animationNum = carousel === 'single' ? 1 : rowNum;
         let rows = rowsData.slice(animationIndex);
         rows.push(...rowsData.slice(0, animationIndex));
-        this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1);
+        this.rows = rows.slice(0, rowNum + 1);
         this.heights = new Array(rowLength).fill(avgHeight);
         await new Promise(resolve => setTimeout(resolve, 300));
         if (updater !== this.updater) return;
@@ -23700,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(" "),
@@ -23726,7 +23739,7 @@
     /* style */
     const __vue_inject_styles__$A = function (inject) {
       if (!inject) return
-      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 });
+      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 */

dist/datav.min.vue.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}function r(e){return(e?"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx":"xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx").replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}))}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var i={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a.clientWidth,this.height=a.clientHeight,"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t)}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},o={name:"DvFullScreenContainer",mixins:[i],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=t+"px",e.style.height=n+"px"},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};function a(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return(e,t)=>function(e,t){const n=s?t.media||"default":e,r=c[n]||(c[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(t,i[e]):r.element.appendChild(t)}}}(e,t)}let d;const c={};const u=o;var f=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};f._withStripped=!0;const h=a({render:f,staticRenderFns:[]},(function(e){e&&e("data-v-2da16e2c_0",{source:"#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n"]},media:void 0})}),u,void 0,!1,void 0,!1,l,void 0,void 0);function p(e){e.component(h.name,h)}const g={namLine truncated
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}function r(e){return(e?"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx":"xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx").replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}))}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var i={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a.clientWidth,this.height=a.clientHeight,"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t)}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},o={name:"DvFullScreenContainer",mixins:[i],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=t+"px",e.style.height=n+"px"},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};function a(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return(e,t)=>function(e,t){const n=s?t.media||"default":e,r=c[n]||(c[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(t,i[e]):r.element.appendChild(t)}}}(e,t)}let d;const c={};const u=o;var f=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};f._withStripped=!0;const h=a({render:f,staticRenderFns:[]},(function(e){e&&e("data-v-2da16e2c_0",{source:"#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n"]},media:void 0})}),u,void 0,!1,void 0,!1,l,void 0,void 0);function p(e){e.component(h.name,h)}const g={namLine truncated

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,
@@ -208,7 +214,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
+      this.rows = rows.slice(0, rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -232,7 +238,7 @@ export default {
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
-    }
+    },
   },
   destroyed () {
     const { stopAnimation } = this

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.9.7",
+  "version": "2.9.9",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",

src/components/borderBox10/src/main.vue

@@ -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;
   }

src/components/borderBox11/src/main.vue

@@ -292,7 +292,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-width: 1;
     }

src/components/borderBox2/src/main.vue

@@ -89,7 +89,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-width: 1;
     }

src/components/borderBox3/src/main.vue

@@ -93,7 +93,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
     }
   }

src/components/borderBox4/src/main.vue

@@ -105,7 +105,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
     }
   }

src/components/borderBox5/src/main.vue

@@ -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;
     }
   }

src/components/borderBox6/src/main.vue

@@ -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;
     }

src/components/borderBox7/src/main.vue

@@ -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;
     }

src/components/borderBox8/src/main.vue

@@ -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%;

src/components/borderBox9/src/main.vue

@@ -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%;

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,
@@ -208,7 +214,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
+      this.rows = rows.slice(0, rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -232,7 +238,7 @@ export default {
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
-    }
+    },
   },
   destroyed () {
     const { stopAnimation } = this

src/mixin/autoResize.js

@@ -32,8 +32,14 @@ export default {
         $nextTick(e => {
           const dom = this.dom = $refs[ref]
 
-          this.width = dom.clientWidth
+          this.width = dom ? dom.clientWidth : 0
-          this.height = dom.clientHeight
+          this.height = dom ? dom.clientHeight : 0
+
+          if (!dom) {
+            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+          } else if (!this.width || !this.height) {
+            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+          }
 
           if (typeof onResize === 'function' && resize) onResize()
 
@@ -56,6 +62,8 @@ export default {
     unbindDomResizeCallback () {
       let { domObserver, debounceInitWHFun } = this
 
+      if (!domObserver) return
+
       domObserver.disconnect()
       domObserver.takeRecords()
       domObserver = null