@findsoft/vue-fluctuation/docs/js/app.40ba114a.js

a simple vue-component for the fluctuation of data

(function(t){function i(i){for(var n,s,o=i[0],l=i[1],c=i[2],f=0,d=[];f<o.length;f++)s=o[f],Object.prototype.hasOwnProperty.call(a,s)&&a[s]&&d.push(a[s][0]),a[s]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(t[n]=l[n]);u&&u(i);while(d.length)d.shift()();return r.push.apply(r,c||[]),e()}function e(){for(var t,i=0;i<r.length;i++){for(var e=r[i],n=!0,o=1;o<e.length;o++){var l=e[o];0!==a[l]&&(n=!1)}n&&(r.splice(i--,1),t=s(s.s=e[0]))}return t}var n={},a={app:0},r=[];function s(i){if(n[i])return n[i].exports;var e=n[i]={i:i,l:!1,exports:{}};return t[i].call(e.exports,e,e.exports,s),e.l=!0,e.exports}s.m=t,s.c=n,s.d=function(t,i,e){s.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:e})},s.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,i){if(1&i&&(t=s(t)),8&i)return t;if(4&i&&"object"===typeof t&&t&&t.__esModule)return t;var e=Object.create(null);if(s.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var n in t)s.d(e,n,function(i){return t[i]}.bind(null,n));return e},s.n=function(t){var i=t&&t.__esModule?function(){return t["default"]}:function(){return t};return s.d(i,"a",i),i},s.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},s.p="/";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],l=o.push.bind(o);o.push=i,o=o.slice();for(var c=0;c<o.length;c++)i(o[c]);var u=l;r.push([0,"chunk-vendors"]),e()})({0:function(t,i,e){t.exports=e("56d7")},"56d7":function(t,i,e){"use strict";e.r(i);e("e260"),e("e6cf"),e("cca6"),e("a79d");var n=e("2b0e"),a=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{attrs:{id:"app"}},[e("div",{staticClass:"container"},[e("div",{staticClass:"introduce"},[e("h1",[t._v("vue-fluctuation")]),e("div",[e("a",{attrs:{href:"https://github.com/Yanggoing/vue-fluctuation"}},[e("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",width:"126",height:"20"}},[e("linearGradient",{attrs:{id:"s",x2:"0",y2:"100%"}},[e("stop",{attrs:{offset:"0","stop-color":"#bbb","stop-opacity":".1"}}),e("stop",{attrs:{offset:"1","stop-opacity":".1"}})],1),e("clipPath",{attrs:{id:"r"}},[e("rect",{attrs:{width:"126",height:"20",rx:"3",fill:"#fff"}})]),e("g",{attrs:{"clip-path":"url(#r)"}},[e("rect",{attrs:{width:"47",height:"20",fill:"#555"}}),e("rect",{attrs:{x:"47",width:"79",height:"20",fill:"#97ca00"}}),e("rect",{attrs:{width:"126",height:"20",fill:"url(#s)"}})]),e("g",{attrs:{fill:"#fff","text-anchor":"middle","font-family":"Verdana,Geneva,DejaVu Sans,sans-serif","text-rendering":"geometricPrecision","font-size":"110"}},[e("text",{attrs:{x:"245",y:"150",fill:"#010101","fill-opacity":".3",transform:"scale(.1)",textLength:"370"}},[t._v("Github ")]),e("text",{attrs:{x:"245",y:"140",transform:"scale(.1)",textLength:"370"}},[t._v("Github")]),e("text",{attrs:{x:"855",y:"150",fill:"#010101","fill-opacity":".3",transform:"scale(.1)",textLength:"690"}},[t._v("@Yanggoing ")]),e("text",{attrs:{x:"855",y:"140",transform:"scale(.1)",textLength:"690"}},[t._v("@Yanggoing")])])],1)])]),e("p",[t._v("一个基于vue&vue-digital-transform的数值波动效果组件")])]),e("p",[t._v(" 二次封装了vue-digital-transform这个组件，增加了数值变动时的增减动画效果，在一些需要实时监测数据波动并展示的场景下可以使用，组件还有一些不完美的地方需要改进，支持的话，帮我点个Star吧！ ")]),e("h2",[t._v("体验Demo")]),e("div",{staticClass:"demo-box"},[e("span",{staticClass:"type-box"},[t._v("基本数值样式")]),e("span",{staticClass:"random-btn",on:{click:t.randomClick}},[t._v("摇摇乐")]),e("label",[e("input",{directives:[{name:"model",rawName:"v-model.trim.lazy",value:t.ordUnit,expression:"ordUnit",modifiers:{trim:!0,lazy:!0}}],attrs:{type:"text",placeholder:"这里修改单位"},domProps:{value:t.ordUnit},on:{change:function(i){t.ordUnit=i.target.value.trim()},blur:function(i){return t.$forceUpdate()}}})]),e("div",{staticClass:"show-box"},[e("fluctuation",{attrs:{value:t.testValue,seperator:!1,unit:t.ordUnit,interval:500}},[[e("i",{staticClass:"iconfont icon-data"})]],2)],1)]),e("div",{staticClass:"demo-box"},[e("span",{staticClass:"type-box"},[t._v("千分位符样式")]),e("span",{staticClass:"random-btn",on:{click:t.randomSepClick}},[t._v("摇摇乐")]),e("div",{staticClass:"show-box"},[e("fluctuation",{attrs:{value:t.testMoney,seperator:"",unit:t.moneyUnit}},[[e("i",{staticClass:"iconfont icon-data"})]],2)],1)])])])},r=[],s=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"fluctuating-container"},[t._t("default"),e("div",{staticClass:"data-container"},[e("digital-transform",{attrs:{value:t.value,useGrouping:t.seperator,interval:t.interval}}),e("span",{staticClass:"unit-box"},[t._v(t._s(t.unit))]),e("transition",{attrs:{name:"lotus"}},[e("p",{directives:[{name:"show",rawName:"v-show",value:t.isShow,expression:"isShow"}],staticClass:"fluctuating-animate"},[t._v(t._s(t.changeValue))])])],1)],2)},o=[],l=(e("a15b"),e("a9e3"),e("d3b7"),e("ac1f"),e("25f0"),e("466d"),e("5319"),e("1276"),function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("transition-group",{staticClass:"digital-transform",attrs:{name:"vdt-slide-y",tag:"div"}},t._l(t.digitals,(function(i,n){return e("DigitalTransfromScroll",{key:n+"key",staticClass:"digital-transform-item",attrs:{to:i,interval:t.interval,dislocation:t.dislocation,from:"0"}},[t._v(t._s(i)+" ")])})),1)}),c=[];e("99af");function u(t){return/^(\d|\.|,){1}$/.test(t.toString())}function f(t){return void 0===t||null===t||""===t||/^(\d|\.|,)+$/.test(t.toString())}var d=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"dt-scroll"},[e("div",{ref:"$list",staticClass:"dt-scroll-list",style:t.listStyle},t._l(t.digitals,(function(i,n){return e("span",{key:n,staticClass:"dt-scroll-digital"},[t._v(" "+t._s(i)+" ")])})),0)])},h=[],p=(e("c740"),{name:"DigitalTransformScroll",props:{to:{validator:u,default:"0"},from:{validator:u,default:"0"},dislocation:{type:Boolean,default:!1},interval:{type:Number,default:500}},data:function(){return{digitals:["-",",",".","9","8","7","6","5","4","3","2","1","0"],listHeight:0,spacing:1}},computed:{listStyle:function(){return{transitionDuration:"".concat(this.interval/1e3*this.spacing,"s")}},elHeight:function(){return this.listHeight/this.digitals.length}},watch:{to:{immediate:!0,handler:function(t,i){if(this.$refs.$list){if(this.dislocation){var e=this.digitals.findIndex((function(t){return i===t})),n=this.digitals.findIndex((function(i){return t===i}));this.spacing=Math.abs(n-e)}else this.spacing=1;this.setPosition(t)}}}},mounted:function(){var t=this;this.calcHeight(),this.$el.style.height="".concat(this.elHeight,"px"),this.setPosition(this.from),setTimeout((function(){t.setPosition(t.to)}),300)},methods:{calcHeight:function(){this.listHeight=this.$refs.$list.clientHeight},setPosition:function(t){var i=this.digitals.findIndex((function(i){return t===i})),e=i*this.elHeight;this.$refs.$list&&(this.$refs.$list.style.transform="translateY(-".concat(e,"px)"))}}}),g=p,m=(e("a6ef"),e("2877")),v=Object(m["a"])(g,d,h,!1,null,"0d345e36",null),b=v.exports,y={name:"DigitalTransfrom",components:{DigitalTransfromScroll:b},props:{value:{validator:f,default:void 0,required:!0},dislocation:{type:Boolean,default:!1},interval:{type:Number,default:500},useGrouping:{type:Boolean,default:!1}},data:function(){return{digitals:[],oldDigtals:[]}},watch:{value:{immediate:!0,handler:function(t){this.parseDigital(t)}}},methods:{parseDigital:function(t){console.log(t);var i="".concat(t);this.useGrouping&&(i=i.replace(/^-?\d+/g,(function(t){return t.replace(/(?=(?!\b)(\d{3})+$)/g,",")})));var e=i.split("");this.oldDigtals=this.digitals.concat(),this.digitals=e,console.log(e)}}},x=y,w=(e("5cba"),Object(m["a"])(x,l,c,!1,null,"1b7b4322",null)),_=w.exports,C={name:"Fluctuation",components:{DigitalTransform:_},props:{value:{type:Number,default:0,required:!0},unit:{type:String,default:""},seperator:{type:Boolean,default:!1},interval:{type:Number,default:500}},data:function(){return{isShow:!1,animatingTimer:null,changeValue:0}},watch:{value:{handler:function(t,i){this.changeValue=this.isPlus(t-i,this.seperator),this.digitalDebounce()}}},methods:{digitalDebounce:function(){var t=this;this.animatingTimer&&clearTimeout(this.animatingTimer),this.isShow=!0,this.animatingTimer=setTimeout((function(){t.isShow=!1,t.animatingTimer=null}),1500)},isPlus:function(t,i){if(i){var e=t.toString().replace(/^-?\d+/g,(function(t){return t.replace(/(?=(?!\b)(\d{3})+$)/g,",")})),n=e.split("").join(""),a=e.split("")[0];return a.match(/^[0-9]$/)?"+".concat(n):n}return t>0?"+".concat(t):t}},destroy:function(){clearTimeout(this.animatingTimer)}},S=C,$=(e("6e3f"),Object(m["a"])(S,s,o,!1,null,"04723324",null)),T=$.exports,P={name:"App",components:{Fluctuation:T},data:function(){return{testValue:666666,testMoney:1e7,ordUnit:"",moneyUnit:"元"}},methods:{randomClick:function(){this.testValue=Math.floor(666666*Math.random()+1)},randomSepClick:function(){this.testMoney=Math.floor(1e7*Math.random()+1)}}},j=P,O=(e("7faf"),Object(m["a"])(j,a,r,!1,null,null,null)),k=O.exports;e("be35");n["a"].config.productionTip=!1,new n["a"]({render:function(t){return t(k)}}).$mount("#app")},"5cba":function(t,i,e){"use strict";var n=e("8bbe"),a=e.n(n);a.a},"6e3f":function(t,i,e){"use strict";var n=e("f172"),a=e.n(n);a.a},"7faf":function(t,i,e){"use strict";var n=e("b8ff"),a=e.n(n);a.a},"8bbe":function(t,i,e){},a6ef:function(t,i,e){"use strict";var n=e("f42c"),a=e.n(n);a.a},b8ff:function(t,i,e){},be35:function(t,i,e){},f172:function(t,i,e){},f42c:function(t,i,e){}});
//# sourceMappingURL=app.40ba114a.js.map