diff --git a/README.md b/README.md index c7081ad..7ef9c47 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,15 @@ > It's a vue component that will count to a target number at a specified duration - [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) - [![Gemnasium](https://img.shields.io/gemnasium/mathiasbynens/he.svg)](https://github.com/PanJiaChen/vue-countTo) - [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-countTo) - [![npm](https://img.shields.io/npm/v/vue-count-to.svg)](https://www.npmjs.com/package/vue-count-to) - [![npm](https://img.shields.io/npm/dm/vue-count-to.svg)](https://npmcharts.com/compare/vue-count-to) - [![minified](https://badgen.net/bundlephobia/min/vue-count-to)](https://bundlephobia.com/result?p=vue-count-to) - [![gzip](https://badgen.net/bundlephobia/minzip/vue-count-to)](https://bundlephobia.com/result?p=vue-count-to) - -vue-countTo is a dependency-free, lightweight vue component that can be overwrited easingFn by yourself. +[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) +[![Gemnasium](https://img.shields.io/gemnasium/mathiasbynens/he.svg)](https://github.com/PanJiaChen/vue-countTo) +[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-countTo) +[![npm](https://img.shields.io/npm/v/vue-count-to.svg)](https://www.npmjs.com/package/vue-count-to) +[![npm](https://img.shields.io/npm/dm/vue-count-to.svg)](https://npmcharts.com/compare/vue-count-to) +[![minified](https://badgen.net/bundlephobia/min/vue-count-to)](https://bundlephobia.com/result?p=vue-count-to) +[![gzip](https://badgen.net/bundlephobia/minzip/vue-count-to)](https://bundlephobia.com/result?p=vue-count-to) + +vue-countTo is a dependency-free, lightweight vue component that can be overwrited easingFn by yourself. You can set startVal and endVal ,it will automatic judge count up or count down. It is support vue-ssr. It is learn from countUp.js; @@ -18,22 +18,25 @@ It is learn from countUp.js; ## [Try the demo](http://panjiachen.github.io/countTo/demo/) ### How to use? + ```bash -npm install vue-count-to +npm install vue-count2 ``` ### Example ```vue + ``` + demo: ![demo](https://github.com/PanJiaChen/vue-countTo/blob/master/countDemo.gif) Use CDN Script: [demo](https://github.com/PanJiaChen/vue-countTo/blob/master/demo/index.html) - - ### Options -| Property | Description | type | default | -| ----------------- | ---------------- | :--------: | :----------: | -| startVal | the value you want to begin at |Number| 0 | -| endVal | the value you want to arrive at |Number | 2017 | -| duration | duration in millisecond | Number | 3000 | -| autoplay | when mounted autoplay | Boolean | true | -| decimals | the number of decimal places to show | Number | 0 | -| decimal | the split decimal | String | . | -| separator | the separator | String | , | -| prefix | the prefix | String | '' | -| suffix | the suffix | String | '' | -| useEasing | is use easing function | Boolean | true | -| easingFn | the easing function | Function | — | -** notes: when autoplay:true , it will auto start when startVal or endVal change ** +| Property | Description | type | default | +|-----------|--------------------------------------|:--------:|:---------:| +| startVal | the value you want to begin at | Number | 0 | +| endVal | the value you want to arrive at | Number | 2017 | +| duration | duration in millisecond | Number | 3000 | +| autoplay | when mounted autoplay | Boolean | true | +| decimals | the number of decimal places to show | Number | 0 | +| decimal | the split decimal | String | . | +| separator | the separator | String | , | +| size | the size of split block | Number | 3 | +| prefix | the prefix | String | '' | +| suffix | the suffix | String | '' | +| useEasing | is use easing function | Boolean | true | +| easingFn | the easing function | Function | — | +** notes: when autoplay:true , it will auto start when startVal or endVal change ** ### Functions -| Function Name | Description | -| :--------: | ----- | -| mountedCallback | when mounted will emit mountedCallback | -| start | start the countTo | -| pause | pause the countTo | -| reset | reset the countTo | + +| Function Name | Description | +|:---------------:|-----------------------------------------| +| mountedCallback | when mounted will emit mountedCallback | +| start | start the countTo | +| pause | pause the countTo | +| reset | reset the countTo | diff --git a/demo/index.html b/demo/index.html index 74d4492..93c39c6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -2,152 +2,176 @@ - - vue-count-to - + + vue-count2 + + - - - -
+ +
-
- + diff --git a/dist/vue-count-to.min.js b/dist/vue-count-to.min.js deleted file mode 100644 index edead25..0000000 --- a/dist/vue-count-to.min.js +++ /dev/null @@ -1,2 +0,0 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("CountTo",[],e):"object"==typeof exports?exports.CountTo=e():t.CountTo=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/dist/",e(e.s=2)}([function(t,e,i){var n=i(4)(i(1),i(5),null,null);t.exports=n.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(3);e.default={props:{startVal:{type:Number,required:!1,default:0},endVal:{type:Number,required:!1,default:2017},duration:{type:Number,required:!1,default:3e3},autoplay:{type:Boolean,required:!1,default:!0},decimals:{type:Number,required:!1,default:0,validator:function(t){return t>=0}},decimal:{type:String,required:!1,default:"."},separator:{type:String,required:!1,default:","},prefix:{type:String,required:!1,default:""},suffix:{type:String,required:!1,default:""},useEasing:{type:Boolean,required:!1,default:!0},easingFn:{type:Function,default:function(t,e,i,n){return i*(1-Math.pow(2,-10*t/n))*1024/1023+e}}},data:function(){return{localStartVal:this.startVal,displayValue:this.formatNumber(this.startVal),printVal:null,paused:!1,localDuration:this.duration,startTime:null,timestamp:null,remaining:null,rAF:null}},computed:{countDown:function(){return this.startVal>this.endVal}},watch:{startVal:function(){this.autoplay&&this.start()},endVal:function(){this.autoplay&&this.start()}},mounted:function(){this.autoplay&&this.start(),this.$emit("mountedCallback")},methods:{start:function(){this.localStartVal=this.startVal,this.startTime=null,this.localDuration=this.duration,this.paused=!1,this.rAF=(0,n.requestAnimationFrame)(this.count)},pauseResume:function(){this.paused?(this.resume(),this.paused=!1):(this.pause(),this.paused=!0)},pause:function(){(0,n.cancelAnimationFrame)(this.rAF)},resume:function(){this.startTime=null,this.localDuration=+this.remaining,this.localStartVal=+this.printVal,(0,n.requestAnimationFrame)(this.count)},reset:function(){this.startTime=null,(0,n.cancelAnimationFrame)(this.rAF),this.displayValue=this.formatNumber(this.startVal)},count:function(t){this.startTime||(this.startTime=t),this.timestamp=t;var e=t-this.startTime;this.remaining=this.localDuration-e,this.useEasing?this.countDown?this.printVal=this.localStartVal-this.easingFn(e,0,this.localStartVal-this.endVal,this.localDuration):this.printVal=this.easingFn(e,this.localStartVal,this.endVal-this.localStartVal,this.localDuration):this.countDown?this.printVal=this.localStartVal-(this.localStartVal-this.endVal)*(e/this.localDuration):this.printVal=this.localStartVal+(this.localStartVal-this.startVal)*(e/this.localDuration),this.countDown?this.printVal=this.printValthis.endVal?this.endVal:this.printVal,this.displayValue=this.formatNumber(this.printVal),e1?this.decimal+e[1]:"",a=/(\d+)(\d{3})/;if(this.separator&&!this.isNumber(this.separator))for(;a.test(i);)i=i.replace(a,"$1"+this.separator+"$2");return this.prefix+i+n+this.suffix}},destroyed:function(){(0,n.cancelAnimationFrame)(this.rAF)}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(0),a=function(t){return t&&t.__esModule?t:{default:t}}(n);e.default=a.default,"undefined"!=typeof window&&window.Vue&&window.Vue.component("count-to",a.default)},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=0,a="webkit moz ms o".split(" "),r=void 0,o=void 0;if("undefined"==typeof window)e.requestAnimationFrame=r=function(){},e.cancelAnimationFrame=o=function(){};else{e.requestAnimationFrame=r=window.requestAnimationFrame,e.cancelAnimationFrame=o=window.cancelAnimationFrame;for(var s=void 0,u=0;u= 0;\n }\n },\n decimal: {\n type: String,\n required: false,\n default: '.'\n },\n separator: {\n type: String,\n required: false,\n default: ','\n },\n prefix: {\n type: String,\n required: false,\n default: ''\n },\n suffix: {\n type: String,\n required: false,\n default: ''\n },\n useEasing: {\n type: Boolean,\n required: false,\n default: true\n },\n easingFn: {\n type: Function,\n default: function _default(t, b, c, d) {\n return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;\n }\n }\n },\n data: function data() {\n return {\n localStartVal: this.startVal,\n displayValue: this.formatNumber(this.startVal),\n printVal: null,\n paused: false,\n localDuration: this.duration,\n startTime: null,\n timestamp: null,\n remaining: null,\n rAF: null\n };\n },\n\n computed: {\n countDown: function countDown() {\n return this.startVal > this.endVal;\n }\n },\n watch: {\n startVal: function startVal() {\n if (this.autoplay) {\n this.start();\n }\n },\n endVal: function endVal() {\n if (this.autoplay) {\n this.start();\n }\n }\n },\n mounted: function mounted() {\n if (this.autoplay) {\n this.start();\n }\n this.$emit('mountedCallback');\n },\n\n methods: {\n start: function start() {\n this.localStartVal = this.startVal;\n this.startTime = null;\n this.localDuration = this.duration;\n this.paused = false;\n this.rAF = (0, _requestAnimationFrame.requestAnimationFrame)(this.count);\n },\n pauseResume: function pauseResume() {\n if (this.paused) {\n this.resume();\n this.paused = false;\n } else {\n this.pause();\n this.paused = true;\n }\n },\n pause: function pause() {\n (0, _requestAnimationFrame.cancelAnimationFrame)(this.rAF);\n },\n resume: function resume() {\n this.startTime = null;\n this.localDuration = +this.remaining;\n this.localStartVal = +this.printVal;\n (0, _requestAnimationFrame.requestAnimationFrame)(this.count);\n },\n reset: function reset() {\n this.startTime = null;\n (0, _requestAnimationFrame.cancelAnimationFrame)(this.rAF);\n this.displayValue = this.formatNumber(this.startVal);\n },\n count: function count(timestamp) {\n if (!this.startTime) this.startTime = timestamp;\n this.timestamp = timestamp;\n var progress = timestamp - this.startTime;\n this.remaining = this.localDuration - progress;\n\n if (this.useEasing) {\n if (this.countDown) {\n this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);\n } else {\n this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);\n }\n } else {\n if (this.countDown) {\n this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);\n } else {\n this.printVal = this.localStartVal + (this.localStartVal - this.startVal) * (progress / this.localDuration);\n }\n }\n if (this.countDown) {\n this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;\n } else {\n this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;\n }\n\n this.displayValue = this.formatNumber(this.printVal);\n if (progress < this.localDuration) {\n this.rAF = (0, _requestAnimationFrame.requestAnimationFrame)(this.count);\n } else {\n this.$emit('callback');\n }\n },\n isNumber: function isNumber(val) {\n return !isNaN(parseFloat(val));\n },\n formatNumber: function formatNumber(num) {\n num = num.toFixed(this.decimals);\n num += '';\n var x = num.split('.');\n var x1 = x[0];\n var x2 = x.length > 1 ? this.decimal + x[1] : '';\n var rgx = /(\\d+)(\\d{3})/;\n if (this.separator && !this.isNumber(this.separator)) {\n while (rgx.test(x1)) {\n x1 = x1.replace(rgx, '$1' + this.separator + '$2');\n }\n }\n return this.prefix + x1 + x2 + this.suffix;\n }\n },\n destroyed: function destroyed() {\n (0, _requestAnimationFrame.cancelAnimationFrame)(this.rAF);\n }\n}; //\n//\n//\n//\n//\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _vueCountTo = __webpack_require__(0);\n\nvar _vueCountTo2 = _interopRequireDefault(_vueCountTo);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nexports.default = _vueCountTo2.default;\n\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.component('count-to', _vueCountTo2.default);\n}\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar lastTime = 0;\nvar prefixes = 'webkit moz ms o'.split(' '); // 各浏览器前缀\n\nvar requestAnimationFrame = void 0;\nvar cancelAnimationFrame = void 0;\n\nvar isServer = typeof window === 'undefined';\nif (isServer) {\n exports.requestAnimationFrame = requestAnimationFrame = function requestAnimationFrame() {\n return;\n };\n exports.cancelAnimationFrame = cancelAnimationFrame = function cancelAnimationFrame() {\n return;\n };\n} else {\n exports.requestAnimationFrame = requestAnimationFrame = window.requestAnimationFrame;\n exports.cancelAnimationFrame = cancelAnimationFrame = window.cancelAnimationFrame;\n var prefix = void 0;\n // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式\n for (var i = 0; i < prefixes.length; i++) {\n if (requestAnimationFrame && cancelAnimationFrame) {\n break;\n }\n prefix = prefixes[i];\n exports.requestAnimationFrame = requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame'];\n exports.cancelAnimationFrame = cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame'];\n }\n\n // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout\n if (!requestAnimationFrame || !cancelAnimationFrame) {\n exports.requestAnimationFrame = requestAnimationFrame = function requestAnimationFrame(callback) {\n var currTime = new Date().getTime();\n // 为了使setTimteout的尽可能的接近每秒60帧的效果\n var timeToCall = Math.max(0, 16 - (currTime - lastTime));\n var id = window.setTimeout(function () {\n callback(currTime + timeToCall);\n }, timeToCall);\n lastTime = currTime + timeToCall;\n return id;\n };\n\n exports.cancelAnimationFrame = cancelAnimationFrame = function cancelAnimationFrame(id) {\n window.clearTimeout(id);\n };\n }\n}\n\nexports.requestAnimationFrame = requestAnimationFrame;\nexports.cancelAnimationFrame = cancelAnimationFrame;\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports) {\n\n// this module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle\n\nmodule.exports = function normalizeComponent (\n rawScriptExports,\n compiledTemplate,\n scopeId,\n cssModules\n) {\n var esModule\n var scriptExports = rawScriptExports = rawScriptExports || {}\n\n // ES6 modules interop\n var type = typeof rawScriptExports.default\n if (type === 'object' || type === 'function') {\n esModule = rawScriptExports\n scriptExports = rawScriptExports.default\n }\n\n // Vue.extend constructor export interop\n var options = typeof scriptExports === 'function'\n ? scriptExports.options\n : scriptExports\n\n // render functions\n if (compiledTemplate) {\n options.render = compiledTemplate.render\n options.staticRenderFns = compiledTemplate.staticRenderFns\n }\n\n // scopedId\n if (scopeId) {\n options._scopeId = scopeId\n }\n\n // inject cssModules\n if (cssModules) {\n var computed = Object.create(options.computed || null)\n Object.keys(cssModules).forEach(function (key) {\n var module = cssModules[key]\n computed[key] = function () { return module }\n })\n options.computed = computed\n }\n\n return {\n esModule: esModule,\n exports: scriptExports,\n options: options\n }\n}\n\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('span', [_vm._v(\"\\n \" + _vm._s(_vm.displayValue) + \"\\n\")])\n},staticRenderFns: []}\n\n/***/ })\n/******/ ]);\n});\n\n\n// WEBPACK FOOTER //\n// vue-count-to.min.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/dist/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 2);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 76bf34451365df904cc7","var Component = require(\"!../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./vue-countTo.vue\"),\n /* template */\n require(\"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-7369316e\\\"}!../node_modules/vue-loader/lib/selector?type=template&index=0!./vue-countTo.vue\"),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/vue-countTo.vue\n// module id = 0\n// module chunks = 0","\n\n\n\n\n// WEBPACK FOOTER //\n// vue-countTo.vue?a490eeb4","import CountTo from './vue-countTo.vue';\nexport default CountTo;\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.component('count-to', CountTo);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.js","let lastTime = 0\nconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀\n\nlet requestAnimationFrame\nlet cancelAnimationFrame\n\nconst isServer = typeof window === 'undefined'\nif (isServer) {\n requestAnimationFrame = function() {\n return\n }\n cancelAnimationFrame = function() {\n return\n }\n} else {\n requestAnimationFrame = window.requestAnimationFrame\n cancelAnimationFrame = window.cancelAnimationFrame\n let prefix\n // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式\n for (let i = 0; i < prefixes.length; i++) {\n if (requestAnimationFrame && cancelAnimationFrame) { break }\n prefix = prefixes[i]\n requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']\n cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']\n }\n\n // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout\n if (!requestAnimationFrame || !cancelAnimationFrame) {\n requestAnimationFrame = function(callback) {\n const currTime = new Date().getTime()\n // 为了使setTimteout的尽可能的接近每秒60帧的效果\n const timeToCall = Math.max(0, 16 - (currTime - lastTime))\n const id = window.setTimeout(() => {\n callback(currTime + timeToCall)\n }, timeToCall)\n lastTime = currTime + timeToCall\n return id\n }\n\n cancelAnimationFrame = function(id) {\n window.clearTimeout(id)\n }\n }\n}\n\nexport { requestAnimationFrame, cancelAnimationFrame }\n\n\n\n// WEBPACK FOOTER //\n// ./src/requestAnimationFrame.js","// this module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle\n\nmodule.exports = function normalizeComponent (\n rawScriptExports,\n compiledTemplate,\n scopeId,\n cssModules\n) {\n var esModule\n var scriptExports = rawScriptExports = rawScriptExports || {}\n\n // ES6 modules interop\n var type = typeof rawScriptExports.default\n if (type === 'object' || type === 'function') {\n esModule = rawScriptExports\n scriptExports = rawScriptExports.default\n }\n\n // Vue.extend constructor export interop\n var options = typeof scriptExports === 'function'\n ? scriptExports.options\n : scriptExports\n\n // render functions\n if (compiledTemplate) {\n options.render = compiledTemplate.render\n options.staticRenderFns = compiledTemplate.staticRenderFns\n }\n\n // scopedId\n if (scopeId) {\n options._scopeId = scopeId\n }\n\n // inject cssModules\n if (cssModules) {\n var computed = Object.create(options.computed || null)\n Object.keys(cssModules).forEach(function (key) {\n var module = cssModules[key]\n computed[key] = function () { return module }\n })\n options.computed = computed\n }\n\n return {\n esModule: esModule,\n exports: scriptExports,\n options: options\n }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/component-normalizer.js\n// module id = 4\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('span', [_vm._v(\"\\n \" + _vm._s(_vm.displayValue) + \"\\n\")])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-7369316e\"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/vue-countTo.vue\n// module id = 5\n// module chunks = 0"],"sourceRoot":""} \ No newline at end of file diff --git a/package.json b/package.json index 3da471b..1a9ce65 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { - "name": "vue-count-to", + "name": "vue-count2", "description": "It's a vue component that will count to a target number at a specified duration", "version": "1.0.13", "author": "Pan ", - "main": "dist/vue-count-to.min.js", + "main": "dist/vue-count2.min.js", "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --content-base='./demo/'", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" @@ -25,9 +25,7 @@ "css-loader": "^0.25.0", "file-loader": "^0.9.0", "vue-loader": "^11.1.4", - "vue-template-compiler": "^2.2.1", "webpack": "^2.2.0", - "webpack-dev-server": "^2.2.0", "babel-eslint": "7.1.1", "eslint": "3.14.1", "eslint-friendly-formatter": "2.0.7", diff --git a/src/index.js b/src/index.js index 9e3fc6f..3d70e73 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import CountTo from './vue-countTo.vue'; export default CountTo; if (typeof window !== 'undefined' && window.Vue) { - window.Vue.component('count-to', CountTo); + window.Vue.component('count2', CountTo); } diff --git a/src/vue-countTo.vue b/src/vue-countTo.vue index f33f880..8f86207 100644 --- a/src/vue-countTo.vue +++ b/src/vue-countTo.vue @@ -1,10 +1,11 @@