progress.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/ // The require function
  6. /******/ function __webpack_require__(moduleId) {
  7. /******/ // Check if module is in cache
  8. /******/ if(installedModules[moduleId])
  9. /******/ return installedModules[moduleId].exports;
  10. /******/ // Create a new module (and put it into the cache)
  11. /******/ var module = installedModules[moduleId] = {
  12. /******/ exports: {},
  13. /******/ id: moduleId,
  14. /******/ loaded: false
  15. /******/ };
  16. /******/ // Execute the module function
  17. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  18. /******/ // Flag the module as loaded
  19. /******/ module.loaded = true;
  20. /******/ // Return the exports of the module
  21. /******/ return module.exports;
  22. /******/ }
  23. /******/ // expose the modules object (__webpack_modules__)
  24. /******/ __webpack_require__.m = modules;
  25. /******/ // expose the module cache
  26. /******/ __webpack_require__.c = installedModules;
  27. /******/ // __webpack_public_path__
  28. /******/ __webpack_require__.p = "/dist/";
  29. /******/ // Load entry module and return exports
  30. /******/ return __webpack_require__(0);
  31. /******/ })
  32. /************************************************************************/
  33. /******/ ({
  34. /***/ 0:
  35. /***/ function(module, exports, __webpack_require__) {
  36. module.exports = __webpack_require__(230);
  37. /***/ },
  38. /***/ 3:
  39. /***/ function(module, exports) {
  40. module.exports = function normalizeComponent (
  41. rawScriptExports,
  42. compiledTemplate,
  43. scopeId,
  44. cssModules
  45. ) {
  46. var esModule
  47. var scriptExports = rawScriptExports = rawScriptExports || {}
  48. // ES6 modules interop
  49. var type = typeof rawScriptExports.default
  50. if (type === 'object' || type === 'function') {
  51. esModule = rawScriptExports
  52. scriptExports = rawScriptExports.default
  53. }
  54. // Vue.extend constructor export interop
  55. var options = typeof scriptExports === 'function'
  56. ? scriptExports.options
  57. : scriptExports
  58. // render functions
  59. if (compiledTemplate) {
  60. options.render = compiledTemplate.render
  61. options.staticRenderFns = compiledTemplate.staticRenderFns
  62. }
  63. // scopedId
  64. if (scopeId) {
  65. options._scopeId = scopeId
  66. }
  67. // inject cssModules
  68. if (cssModules) {
  69. var computed = options.computed || (options.computed = {})
  70. Object.keys(cssModules).forEach(function (key) {
  71. var module = cssModules[key]
  72. computed[key] = function () { return module }
  73. })
  74. }
  75. return {
  76. esModule: esModule,
  77. exports: scriptExports,
  78. options: options
  79. }
  80. }
  81. /***/ },
  82. /***/ 230:
  83. /***/ function(module, exports, __webpack_require__) {
  84. 'use strict';
  85. exports.__esModule = true;
  86. var _progress = __webpack_require__(231);
  87. var _progress2 = _interopRequireDefault(_progress);
  88. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  89. /* istanbul ignore next */
  90. _progress2.default.install = function (Vue) {
  91. Vue.component(_progress2.default.name, _progress2.default);
  92. };
  93. exports.default = _progress2.default;
  94. /***/ },
  95. /***/ 231:
  96. /***/ function(module, exports, __webpack_require__) {
  97. var Component = __webpack_require__(3)(
  98. /* script */
  99. __webpack_require__(232),
  100. /* template */
  101. __webpack_require__(233),
  102. /* scopeId */
  103. null,
  104. /* cssModules */
  105. null
  106. )
  107. module.exports = Component.exports
  108. /***/ },
  109. /***/ 232:
  110. /***/ function(module, exports) {
  111. 'use strict';
  112. exports.__esModule = true;
  113. //
  114. //
  115. //
  116. //
  117. //
  118. //
  119. //
  120. //
  121. //
  122. //
  123. //
  124. //
  125. //
  126. //
  127. //
  128. //
  129. //
  130. //
  131. //
  132. //
  133. //
  134. //
  135. //
  136. //
  137. //
  138. //
  139. //
  140. //
  141. //
  142. //
  143. //
  144. //
  145. //
  146. //
  147. //
  148. exports.default = {
  149. name: 'ElProgress',
  150. props: {
  151. type: {
  152. type: String,
  153. default: 'line',
  154. validator: function validator(val) {
  155. return ['line', 'circle'].indexOf(val) > -1;
  156. }
  157. },
  158. percentage: {
  159. type: Number,
  160. default: 0,
  161. required: true,
  162. validator: function validator(val) {
  163. return val >= 0 && val <= 100;
  164. }
  165. },
  166. status: {
  167. type: String
  168. },
  169. strokeWidth: {
  170. type: Number,
  171. default: 6
  172. },
  173. textInside: {
  174. type: Boolean,
  175. default: false
  176. },
  177. width: {
  178. type: Number,
  179. default: 126
  180. },
  181. showText: {
  182. type: Boolean,
  183. default: true
  184. }
  185. },
  186. computed: {
  187. barStyle: function barStyle() {
  188. var style = {};
  189. style.width = this.percentage + '%';
  190. return style;
  191. },
  192. relativeStrokeWidth: function relativeStrokeWidth() {
  193. return (this.strokeWidth / this.width * 100).toFixed(1);
  194. },
  195. trackPath: function trackPath() {
  196. var radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
  197. return 'M 50 50 m 0 -' + radius + ' a ' + radius + ' ' + radius + ' 0 1 1 0 ' + radius * 2 + ' a ' + radius + ' ' + radius + ' 0 1 1 0 -' + radius * 2;
  198. },
  199. perimeter: function perimeter() {
  200. var radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
  201. return 2 * Math.PI * radius;
  202. },
  203. circlePathStyle: function circlePathStyle() {
  204. var perimeter = this.perimeter;
  205. return {
  206. strokeDasharray: perimeter + 'px,' + perimeter + 'px',
  207. strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
  208. transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
  209. };
  210. },
  211. stroke: function stroke() {
  212. var ret;
  213. switch (this.status) {
  214. case 'success':
  215. ret = '#13ce66';
  216. break;
  217. case 'exception':
  218. ret = '#ff4949';
  219. break;
  220. default:
  221. ret = '#20a0ff';
  222. }
  223. return ret;
  224. },
  225. iconClass: function iconClass() {
  226. if (this.type === 'line') {
  227. return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-cross';
  228. } else {
  229. return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
  230. }
  231. },
  232. progressTextSize: function progressTextSize() {
  233. return this.type === 'line' ? 12 + this.strokeWidth * 0.4 : this.width * 0.111111 + 2;
  234. }
  235. }
  236. };
  237. /***/ },
  238. /***/ 233:
  239. /***/ function(module, exports) {
  240. module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
  241. return _c('div', {
  242. staticClass: "el-progress",
  243. class: [
  244. 'el-progress--' + _vm.type,
  245. _vm.status ? 'is-' + _vm.status : '', {
  246. 'el-progress--without-text': !_vm.showText,
  247. 'el-progress--text-inside': _vm.textInside,
  248. }
  249. ]
  250. }, [(_vm.type === 'line') ? _c('div', {
  251. staticClass: "el-progress-bar"
  252. }, [_c('div', {
  253. staticClass: "el-progress-bar__outer",
  254. style: ({
  255. height: _vm.strokeWidth + 'px'
  256. })
  257. }, [_c('div', {
  258. staticClass: "el-progress-bar__inner",
  259. style: (_vm.barStyle)
  260. }, [(_vm.showText && _vm.textInside) ? _c('div', {
  261. staticClass: "el-progress-bar__innerText"
  262. }, [_vm._v(_vm._s(_vm.percentage) + "%")]) : _vm._e()])])]) : _c('div', {
  263. staticClass: "el-progress-circle",
  264. style: ({
  265. height: _vm.width + 'px',
  266. width: _vm.width + 'px'
  267. })
  268. }, [_c('svg', {
  269. attrs: {
  270. "viewBox": "0 0 100 100"
  271. }
  272. }, [_c('path', {
  273. staticClass: "el-progress-circle__track",
  274. attrs: {
  275. "d": _vm.trackPath,
  276. "stroke": "#e5e9f2",
  277. "stroke-width": _vm.relativeStrokeWidth,
  278. "fill": "none"
  279. }
  280. }), _c('path', {
  281. staticClass: "el-progress-circle__path",
  282. style: (_vm.circlePathStyle),
  283. attrs: {
  284. "d": _vm.trackPath,
  285. "stroke-linecap": "round",
  286. "stroke": _vm.stroke,
  287. "stroke-width": _vm.relativeStrokeWidth,
  288. "fill": "none"
  289. }
  290. })])]), (_vm.showText && !_vm.textInside) ? _c('div', {
  291. staticClass: "el-progress__text",
  292. style: ({
  293. fontSize: _vm.progressTextSize + 'px'
  294. })
  295. }, [(!_vm.status) ? [_vm._v(_vm._s(_vm.percentage) + "%")] : _c('i', {
  296. class: _vm.iconClass
  297. })], 2) : _vm._e()])
  298. },staticRenderFns: []}
  299. /***/ }
  300. /******/ });