├── .babelrc
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── build
├── gh-pages.sh
├── webpack.config.js
├── webpack.example.base.conf.js
├── webpack.example.dev.conf.js
└── webpack.example.prod.conf.js
├── example
├── index.html
└── src
│ ├── App.vue
│ ├── main.js
│ └── template.js
├── lib
├── iconfont.svg
└── progress.js
├── package.json
├── release.sh
├── src
├── components
│ └── progress.vue
├── fonts
│ ├── iconfont.eot
│ ├── iconfont.svg
│ ├── iconfont.ttf
│ └── iconfont.woff
├── index.js
└── styles
│ └── less
│ ├── base.less
│ ├── font.less
│ ├── index.less
│ └── progress.less
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", { "modules": false }]
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | **/*.js linguist-language=Vue
2 | **/*.less linguist-language=Vue
3 | **/*.css linguist-language=Vue
4 | **/*.html linguist-language=Vue
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | .idea
4 | example/dist
5 | gh-pages
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 | The MIT License (MIT)
24 |
25 | Copyright (c) 2016 ElemeFE
26 |
27 | Permission is hereby granted, free of charge, to any person obtaining a copy
28 | of this software and associated documentation files (the "Software"), to deal
29 | in the Software without restriction, including without limitation the rights
30 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
31 | copies of the Software, and to permit persons to whom the Software is
32 | furnished to do so, subject to the following conditions:
33 |
34 | The above copyright notice and this permission notice shall be included in all
35 | copies or substantial portions of the Software.
36 |
37 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
38 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
39 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
40 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
41 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
42 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
43 | SOFTWARE.
44 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # progress
2 |
3 | > [Element](https://github.com/ElemeFE/element) Progress clone, and did just a little change. If you have a better idea of this component improvement, please share it and I will update it immediately.
4 |
5 | ## Install
6 |
7 | ```bash
8 | npm install vue-multiple-progress -S
9 | ```
10 |
11 | ## Quick Start
12 |
13 | ```bash
14 | import Vue from 'vue'
15 | import Progress from 'vue-multiple-progress'
16 | # Vue.component('vm-progress', Progress) # 可以指定组件名称
17 | Vue.use(Progress) # 组件名称 `vm-progress`
18 | ```
19 |
20 | For more information, please refer to [Progress](https://vue-multiple.github.io/progress) in our documentation.
21 |
22 | ## Build Setup
23 |
24 | ``` bash
25 | # install dependencies
26 | npm install
27 |
28 | # serve with hot reload at localhost:8080
29 | npm run demo:dev
30 |
31 | # build for demo with minification
32 | npm run demo:build
33 |
34 | # build for gh-pages with minification
35 | npm run demo:prepublish
36 |
37 | # build for production with minification
38 | npm run build
39 |
40 | # generate gh-pages
41 | npm run deploy
42 | ```
43 |
44 | ## LICENSE
45 |
46 | [MIT](http://opensource.org/licenses/MIT)
--------------------------------------------------------------------------------
/build/gh-pages.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 | npm run demo:prepublish
3 | cd gh-pages
4 | git init
5 | git add -A
6 | git commit -m 'update gh-pages'
7 | git push -f git@github.com:vue-multiple/progress.git master:gh-pages
--------------------------------------------------------------------------------
/build/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
4 |
5 | module.exports = {
6 | entry: './src/index.js',
7 | output: {
8 | path: path.resolve(__dirname, '..', './lib'),
9 | filename: 'progress.js',
10 | library: 'progress',
11 | libraryTarget: 'umd'
12 | },
13 | externals: {
14 | vue: {
15 | root: 'Vue',
16 | commonjs: 'vue',
17 | commonjs2: 'vue',
18 | amd: 'vue'
19 | }
20 | },
21 | module: {
22 | rules: [
23 | {
24 | test: /\.vue$/,
25 | loader: 'vue-loader',
26 | options: {
27 | loaders: {
28 | css: 'vue-style-loader!css-loader',
29 | less: 'vue-style-loader!css-loader!less-loader',
30 | // css: ExtractTextPlugin.extract({
31 | // use: 'css-loader',
32 | // fallback: 'vue-style-loader'
33 | // }),
34 | // less: ExtractTextPlugin.extract({
35 | // fallback: 'vue-style-loader',
36 | // use: ['css-loader', 'less-loader']
37 | // })
38 | }
39 | // other vue-loader options go here
40 | }
41 | },
42 | {
43 | test: /\.css$/,
44 | use: [
45 | { loader: 'style-loader' },
46 | { loader: 'css-loader' }
47 | ]
48 | // loader: ExtractTextPlugin.extract({
49 | // use: "css-loader",
50 | // fallback: "style-loader"
51 | // })
52 | },
53 | {
54 | test: /\.less$/,
55 | use: [
56 | { loader: 'style-loader' },
57 | { loader: 'css-loader' },
58 | { loader: 'less-loader' }
59 | ]
60 | // loader: ExtractTextPlugin.extract({
61 | // fallback: 'style-loader',
62 | // use: ['css-loader', 'less-loader']
63 | // })
64 | },
65 | {
66 | test: /\.js$/,
67 | loader: 'babel-loader',
68 | exclude: /node_modules/
69 | },
70 | {
71 | test: /\.(png|jpg|gif|svg)$/,
72 | loader: 'file-loader',
73 | options: {
74 | name: '[name].[ext]?[hash]'
75 | }
76 | },
77 | {
78 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
79 | loader: 'url-loader',
80 | query: {
81 | limit: 10000,
82 | name: path.posix.join('static', 'fonts/[name].[hash:7].[ext]')
83 | }
84 | }
85 | ]
86 | },
87 | resolve: {
88 | extensions: ['.js', '.vue', '.json']
89 | },
90 | plugins: [
91 | new webpack.optimize.UglifyJsPlugin({
92 | sourceMap: true,
93 | compress: {
94 | warnings: false
95 | }
96 | })
97 | // ,
98 | // new ExtractTextPlugin({
99 | // filename: '../lib/progess.css',
100 | // allChunks: true
101 | // })
102 | ]
103 | }
104 |
--------------------------------------------------------------------------------
/build/webpack.example.base.conf.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
3 | var isProduction = process.env.NODE_ENV === 'production'
4 |
5 | module.exports = {
6 | entry: {
7 | app: './example/src/main.js'
8 | },
9 | output: {
10 | path: '/example',
11 | filename: '[name].js',
12 | publicPath: '/'
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.vue$/,
18 | loader: 'vue-loader',
19 | options: {
20 | // other vue-loader options go here
21 | loaders: {
22 | css: isProduction ? ExtractTextPlugin.extract({
23 | fallback: 'vue-style-loader',
24 | use: 'css-loader'
25 | }) : 'vue-style-loader!css-loader',
26 | less: isProduction ? ExtractTextPlugin.extract({
27 | fallback: 'vue-style-loader',
28 | use: ['css-loader', 'less-loader']
29 | }) : 'vue-style-loader!css-loader!less-loader'
30 | }
31 | }
32 | },
33 | {
34 | test: /\.js$/,
35 | loader: 'babel-loader',
36 | exclude: /node_modules/
37 | },
38 | {
39 | test: /\.(png|jpg|gif|svg)$/,
40 | loader: 'file-loader',
41 | options: {
42 | name: '[name].[ext]?[hash]'
43 | }
44 | },
45 | {
46 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
47 | loader: 'url-loader',
48 | query: {
49 | limit: 10000,
50 | name: path.posix.join('static', 'fonts/[name].[hash:7].[ext]')
51 | }
52 | }
53 | ]
54 | }
55 | }
--------------------------------------------------------------------------------
/build/webpack.example.dev.conf.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack')
2 | var merge = require('webpack-merge')
3 | var baseWebpackConfig = require('./webpack.example.base.conf')
4 | var HtmlWebpackPlugin = require('html-webpack-plugin')
5 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
6 |
7 | module.exports = merge(baseWebpackConfig, {
8 | module: {
9 | rules: [
10 | {
11 | test: /\.css$/,
12 | loader: 'vue-style-loader!css-loader'
13 | },
14 | {
15 | test: /\.less$/,
16 | loader: 'vue-style-loader!css-loader!less-loader'
17 | }
18 | ]
19 | },
20 | // cheap-module-eval-source-map is faster for development
21 | devtool: '#cheap-module-eval-source-map',
22 | plugins: [
23 | new webpack.DefinePlugin({
24 | 'process.env': {
25 | NODE_ENV: '"development"'
26 | }
27 | }),
28 | new webpack.NoEmitOnErrorsPlugin(),
29 | new HtmlWebpackPlugin({
30 | filename: 'index.html',
31 | template: 'example/index.html',
32 | inject: true
33 | }),
34 | new FriendlyErrorsPlugin()
35 | ]
36 | })
--------------------------------------------------------------------------------
/build/webpack.example.prod.conf.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 | var merge = require('webpack-merge')
4 | var baseWebpackConfig = require('./webpack.example.base.conf')
5 | var HtmlWebpackPlugin = require('html-webpack-plugin')
6 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
7 | var isProduction = process.env.NODE_ENV === 'production'
8 |
9 | module.exports = merge(baseWebpackConfig, {
10 | module: {
11 | rules: [
12 | {
13 | test: /\.css$/,
14 | loader: ExtractTextPlugin.extract({
15 | fallback: "vue-style-loader",
16 | use: "css-loader"
17 | })
18 | },
19 | {
20 | test: /\.less/,
21 | loader: ExtractTextPlugin.extract({
22 | fallback: "vue-style-loader",
23 | use: ["css-loader", "less-loader"]
24 | })
25 | }
26 | ]
27 | },
28 | devtool: '#source-map',
29 | output: {
30 | path: path.resolve(__dirname, '..', `${isProduction ? './example/dist' : 'gh-pages'}`),
31 | publicPath: isProduction ? '/' : '/progress',
32 | filename: 'js/[name].[chunkhash].js'
33 | },
34 | plugins: [
35 | new webpack.DefinePlugin({
36 | 'process.env': {
37 | NODE_ENV: '"production"'
38 | }
39 | }),
40 | new webpack.optimize.UglifyJsPlugin({
41 | sourceMap: true,
42 | compress: {
43 | warnings: false
44 | }
45 | }),
46 | new ExtractTextPlugin({
47 | filename: 'css/[name].[contenthash].css',
48 | allChunks: true
49 | }),
50 | new HtmlWebpackPlugin({
51 | filename: 'index.html',
52 | template: 'example/index.html',
53 | inject: true,
54 | minify: {
55 | removeComments: true,
56 | collapseWhitespace: true,
57 | removeAttributeQuotes: true
58 | // more options:
59 | // https://github.com/kangax/html-minifier#options-quick-reference
60 | },
61 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin
62 | chunksSortMode: 'dependency'
63 | })
64 | ]
65 | })
66 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 | progress
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/example/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
15 |
16 |
17 | 默认文字
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 自定义文字,需要附加样式
28 | 占比 0%
29 | 占比 70%
30 | 占比 30%
31 | 占比 30%
32 | 占比 50%
33 | 占比 80%
34 | 占比 100%
35 |
36 |
37 |
38 | Progress
组件设置 percentage
属性即可,表示进度条对应的百分比,必填,必须在 0-100
。
39 |
40 |
41 |
47 |
48 |
49 | 默认文字
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | 自定义文字
60 | 占比 0%
61 | 占比 70%
62 | 占比 30%
63 | 占比 30%
64 | 占比 50%
65 | 占比 80%
66 | 占比 100%
67 |
68 |
69 |
70 | Progress
组件可通过 stroke-width
属性更改进度条的高度,并可通过 text-inside
属性来将进度条描述置于进度条内部。
71 |
72 |
73 |
77 |
78 | 切换条纹
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 | Progress
组件设置 striped
属性即可,表示进度条是否添加条纹渐变动画,还可以通过 `linear-class-name` 定义自己的进度动画。
89 |
90 |
91 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 | 占比{{percentage}}%
108 |
109 |
110 |
111 |
112 | 增加
113 | 减少
114 |
115 |
116 |
117 |
118 | Progress
组件可通过 type
属性来指定使用环形进度条,在环形进度条中,还可以通过 width
属性来设置其大小。通过 reverse
119 | 设置进度方向(逆时针,顺时针),还可以定义显示内容。
120 |
121 |
122 |
127 |
128 |
129 |
130 |
131 |
132 |
133 | 错误
134 | 信息
135 | 警告
136 | 成功
137 |
138 |
139 | 增加
140 | 减少
141 |
142 |
143 |
144 |
145 | Progress
组件可通过 type
属性来指定使用环形进度条,在环形进度条中,还可以通过 width
属性来设置其大小。通过 reverse
146 | 设置进度方向(逆时针,顺时针),还可以定义显示内容。
147 |
148 |
149 |
153 |
154 |
155 |
156 |
157 | 参数 |
158 | 说明 |
159 | 类型 |
160 | 可选值 |
161 | 默认值 |
162 |
163 |
164 |
165 |
166 | striped (新增) |
167 | 是否为进度添加条纹渐变动画 |
168 | boolean |
169 | — |
170 | false |
171 |
172 |
173 | linear-class-name (新增) |
174 | 进度渐变类名 |
175 | string |
176 | — |
177 | — |
178 |
179 |
180 | percentage |
181 | 百分比(必填) |
182 | number |
183 | 0-100 |
184 | 0 |
185 |
186 |
187 | type |
188 | 进度条类型 |
189 | string |
190 | line/circle |
191 | line |
192 |
193 |
194 | stroke-width |
195 | 进度条的宽度,单位 px |
196 | number |
197 | — |
198 | 6 |
199 |
200 |
201 | stroke-color (新增) |
202 | 进度条的颜色 |
203 | string |
204 | — |
205 | — |
206 |
207 |
208 | track-color (新增) |
209 | 进度条的背景颜色 |
210 | string |
211 | — |
212 | — |
213 |
214 |
215 | stroke-linecap (新增) |
216 | 进度条顶端的形状(只在 type=circle 时可用) |
217 | string |
218 | square(方)/round(圆) |
219 | round |
220 |
221 |
222 | text-inside |
223 | 进度条显示文字内置在进度条内(只在 type=line 时可用) |
224 | Boolean |
225 | — |
226 | false |
227 |
228 |
229 | status |
230 | 进度条当前状态 |
231 | string |
232 | success/exception/warning/info |
233 | — |
234 |
235 |
236 | width |
237 | 环形进度条画布宽度(只在 type=circle 时可用) |
238 | number |
239 | |
240 | 126 |
241 |
242 |
243 | show-text |
244 | 是否显示进度条文字内容 |
245 | boolean |
246 | — |
247 | true |
248 |
249 |
250 | reverse (新增) |
251 | 是否是逆时针旋转,(只在type="circle"时可用) |
252 | boolean |
253 | — |
254 | false |
255 |
256 |
257 |
258 |
259 |
260 |
264 |
265 |
266 |
267 |
268 | 参数 |
269 | 说明 |
270 | 默认 |
271 |
272 |
273 |
274 |
275 | default |
276 | 自定义描述文字 |
277 | percentage% |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
314 |
315 |
333 |
--------------------------------------------------------------------------------
/example/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 |
4 | import Progress from '../../src/index.js'
5 | // Vue.component('vm-progress', Progress)
6 | Vue.use(Progress)
7 |
8 | import VueDemonstration from 'vue-demonstration'
9 | Vue.component('demonstration', VueDemonstration)
10 |
11 | import { Button, ButtonGroup } from 'vue-multiple-button'
12 | import 'vue-multiple-button/lib/button.css'
13 | Vue.component('vm-button', Button)
14 | Vue.component('vm-button-group', ButtonGroup)
15 |
16 | new Vue({
17 | el: '#app',
18 | render: h => h(App)
19 | })
20 |
--------------------------------------------------------------------------------
/example/src/template.js:
--------------------------------------------------------------------------------
1 | export const sourcecodeA = `
2 |
3 | 默认文字
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | 自定义文字,需要附加样式
14 | 占比 0%
15 | 占比 70%
16 | 占比 30%
17 | 占比 30%
18 | 占比 50%
19 | 占比 80%
20 | 占比 100%
21 |
22 |
23 | `
29 |
30 | export const sourcecodeB = `
31 | 默认文字
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | 自定义文字
42 | 占比 0%
43 | 占比 70%
44 | 占比 30%
45 | 占比 30%
46 | 占比 50%
47 | 占比 80%
48 | 占比 100%
49 |
`
50 |
51 | export const sourcecodeC = `
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 占比{{percentage}}%
63 |
64 |
65 |
66 | 增加
67 | 减少
68 |
69 |
70 |
71 |
72 | `
91 |
92 | export const sourcecodeD = `切换条纹
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 | `
110 |
111 | export const sourcecodeE = `
112 |
113 |
114 |
115 |
116 | 错误
117 | 信息
118 | 警告
119 | 成功
120 |
121 |
122 | 增加
123 | 减少
124 |
125 |
126 |
127 |
147 | `
--------------------------------------------------------------------------------
/lib/iconfont.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
56 |
--------------------------------------------------------------------------------
/lib/progress.js:
--------------------------------------------------------------------------------
1 | !function(A,s){"object"==typeof exports&&"object"==typeof module?module.exports=s():"function"==typeof define&&define.amd?define([],s):"object"==typeof exports?exports.progress=s():A.progress=s()}(this,function(){return function(A){function s(t){if(e[t])return e[t].exports;var r=e[t]={i:t,l:!1,exports:{}};return A[t].call(r.exports,r,r.exports,s),r.l=!0,r.exports}var e={};return s.m=A,s.c=e,s.i=function(A){return A},s.d=function(A,e,t){s.o(A,e)||Object.defineProperty(A,e,{configurable:!1,enumerable:!0,get:t})},s.n=function(A){var e=A&&A.__esModule?function(){return A.default}:function(){return A};return s.d(e,"a",e),e},s.o=function(A,s){return Object.prototype.hasOwnProperty.call(A,s)},s.p="",s(s.s=4)}([function(A,s){A.exports="data:application/vnd.ms-fontobject;base64,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"},function(A,s,e){var t=e(5);"string"==typeof t&&(t=[[A.i,t,""]]);var r={};r.transform=void 0;e(8)(t,r);t.locals&&(A.exports=t.locals)},function(A,s,e){var t=e(12)(e(3),e(13),null,null,null);t.options.__file="/Users/gusaifei/Workspace/workspace-personal/progress/src/components/progress.vue",t.esModule&&Object.keys(t.esModule).some(function(A){return"default"!==A&&"__"!==A.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),t.options.functional&&console.error("[vue-loader] progress.vue: functional components are not supported with templates, they should use render functions."),A.exports=t.exports},function(A,s,e){"use strict";Object.defineProperty(s,"__esModule",{value:!0}),s.default={name:"VmProgress",componentName:"VmProgress",props:{type:{type:String,default:"line",validator:function(A){return["line","circle"].indexOf(A)>-1}},percentage:{type:[Number,String],default:0,required:!0,validator:function(A){return A>=0&&A<=100}},strokeWidth:{type:[Number,String],default:6},strokeLinecap:{type:String,default:"round",validator:function(A){return["butt","square","round"].indexOf(A)>-1}},strokeColor:{type:String},trackColor:{type:String,default:function(){return"line"===this.type?"#e4e8f1":"#e5e9f2"}},textInside:{type:Boolean,default:!1},showText:{type:Boolean,default:!0},status:{type:String,validator:function(A){return["success","exception","warning","info"].indexOf(A)>-1}},width:{type:Number,default:126},reverse:{type:Boolean,default:!1},striped:{type:Boolean,default:!1},linearClassName:String},data:function(){return{st:this.status}},watch:{percentage:function(A){this.$slots.default||(this.st=100===A?"success":this.status)},status:function(A){this.st=A}},computed:{barStyle:function(){var A={};return A.width=this.percentage+"%",this.strokeColor&&(A.backgroundColor=this.strokeColor),A},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var A=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10),s=this.reverse?0:1;return"M 50 50 m 0 -"+A+" a "+A+" "+A+" 0 1 "+s+" 0 "+2*A+" a "+A+" "+A+" 0 1 "+s+" 0 -"+2*A},perimeter:function(){var A=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*A},circlePathStyle:function(){var A=this.perimeter;return{strokeDasharray:A+"px,"+A+"px",strokeDashoffset:(1-this.percentage/100)*A+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var A=void 0;switch(this.st){case"success":A="#13ce66";break;case"warning":A="#f7ba2a";break;case"info":A="#50bfff";break;case"exception":A="#ff4949";break;default:A=this.strokeColor?this.strokeColor:"#20a0ff"}return A},iconClass:function(){return"vm-progress-icon"+("line"===this.type?"-circle":"")+"--"+("exception"===this.st?"error":this.st)},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}}},function(A,s,e){"use strict";Object.defineProperty(s,"__esModule",{value:!0});var t=e(2),r=e.n(t),n=e(1),i=(e.n(n),function A(s){arguments.length>1&&void 0!==arguments[1]&&arguments[1];A.installed||s.component("VmProgress",r.a)});"undefined"!=typeof window&&window.Vue&&Vue.component("VmProgress",r.a),r.a.install=i,s.default=r.a},function(A,s,e){s=A.exports=e(6)(void 0),s.push([A.i,'@font-face {\n font-family: "iconfont";\n src: url('+e(0)+");\n /* IE9*/\n src: url("+e(0)+"#iefix) format('embedded-opentype'), url("+e(11)+") format('woff'), url("+e(10)+") format('truetype'), url("+e(7)+'#iconfont) format(\'svg\');\n /* iOS 4.1- */\n}\n[class^="vm-progress-icon"],\n[class*=" vm-progress-icon"] {\n font-family: "iconfont" !important;\n font-size: 16px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.vm-progress-icon-circle--success {\n color: #13ce66;\n}\n.vm-progress-icon-circle--success:before {\n content: "\\E8E4";\n}\n.vm-progress-icon--success {\n color: #13ce66;\n}\n.vm-progress-icon--success:before {\n content: "\\E8E5";\n}\n.vm-progress-icon-circle--error {\n color: #ff4949;\n}\n.vm-progress-icon-circle--error:before {\n content: "\\E8E7";\n}\n.vm-progress-icon--error {\n color: #ff4949;\n}\n.vm-progress-icon--error:before {\n content: "\\E8E8";\n}\n.vm-progress-icon-circle--info {\n color: #50bfff;\n}\n.vm-progress-icon-circle--info:before {\n content: "\\E8EA";\n}\n.vm-progress-icon--info {\n color: #50bfff;\n}\n.vm-progress-icon--info:before {\n content: "\\E8E9";\n}\n.vm-progress-icon-circle--warning {\n color: #f7ba2a;\n}\n.vm-progress-icon-circle--warning:before {\n content: "\\E8EC";\n}\n.vm-progress-icon--warning {\n color: #f7ba2a;\n}\n.vm-progress-icon--warning:before {\n content: "\\E8EE";\n}\n.vm-progress-icon--close:before {\n content: "\\E8E8";\n}\n.vm-progress {\n position: relative;\n line-height: 1;\n}\n.vm-progress__text {\n display: inline-block;\n vertical-align: middle;\n margin-left: 10px;\n font-size: 14px;\n color: #48576a;\n line-height: 1;\n}\n.vm-progress--circle {\n display: inline-block;\n}\n.vm-progress--circle .vm-progress__text {\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n margin: 0;\n text-align: center;\n transform: translate(0, -50%);\n}\n.vm-progress--circle .vm-progress__text i {\n display: inline-block;\n vertical-align: middle;\n font-size: 22px;\n font-weight: bold;\n}\n.vm-progress.is-success .vm-progress-bar__inner {\n background-color: #13ce66;\n}\n.vm-progress.is-success .vm-progress__text {\n color: #13ce66;\n}\n.vm-progress.is-exception .vm-progress-bar__inner {\n background-color: #ff4949;\n}\n.vm-progress.is-exception .vm-progress__text {\n color: #ff4949;\n}\n.vm-progress.is-warning .vm-progress-bar__inner {\n background-color: #f7ba2a;\n}\n.vm-progress.is-warning .vm-progress__text {\n color: #f7ba2a;\n}\n.vm-progress.is-info .vm-progress-bar__inner {\n background-color: #50bfff;\n}\n.vm-progress.is-info .vm-progress__text {\n color: #50bfff;\n}\n.vm-progress--without-text .vm-progress__text {\n display: none;\n}\n.vm-progress--without-text .vm-progress-bar {\n padding-right: 0;\n margin-right: 0;\n display: block;\n}\n.vm-progress--text-inside .vm-progress-bar {\n padding-right: 0;\n margin-right: 0;\n}\n.vm-progress-bar {\n display: inline-block;\n vertical-align: middle;\n width: 100%;\n padding-right: 50px;\n margin-right: -55px;\n box-sizing: border-box;\n}\n.vm-progress-bar__outer {\n position: relative;\n height: 6px;\n background-color: #e4e8f1;\n border-radius: 100px;\n vertical-align: middle;\n overflow: hidden;\n}\n.vm-progress-bar__inner {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n line-height: 1;\n text-align: right;\n background-color: #20a0ff;\n border-radius: 100px;\n}\n.vm-progress-bar__innerText {\n display: inline-block;\n vertical-align: middle;\n color: #fff;\n font-size: 12px;\n margin: 0 5px;\n white-space: nowrap;\n}\n.vm-progress-bar__striped {\n background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);\n background-size: 40px 40px;\n animation: progress-bar-stripes 2s linear infinite;\n}\n@keyframes progress-bar-stripes {\n from {\n background-position: 40px 0;\n }\n to {\n background-position: 0 0;\n }\n}\n',""])},function(A,s){function e(A,s){var e=A[1]||"",r=A[3];if(!r)return e;if(s&&"function"==typeof btoa){var n=t(r);return[e].concat(r.sources.map(function(A){return"/*# sourceURL="+r.sourceRoot+A+" */"})).concat([n]).join("\n")}return[e].join("\n")}function t(A){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(A))))+" */"}A.exports=function(A){var s=[];return s.toString=function(){return this.map(function(s){var t=e(s,A);return s[2]?"@media "+s[2]+"{"+t+"}":t}).join("")},s.i=function(A,e){"string"==typeof A&&(A=[[null,A,""]]);for(var t={},r=0;r=0&&u.splice(s,1)}function o(A){var s=document.createElement("style");return A.attrs.type="text/css",g(s,A.attrs),n(A,s),s}function B(A){var s=document.createElement("link");return A.attrs.type="text/css",A.attrs.rel="stylesheet",g(s,A.attrs),n(A,s),s}function g(A,s){Object.keys(s).forEach(function(e){A.setAttribute(e,s[e])})}function C(A,s){var e,t,r,n;if(s.transform&&A.css){if(!(n=s.transform(A.css)))return function(){};A.css=n}if(s.singleton){var g=l++;e=I||(I=o(s)),t=Q.bind(null,e,g,!1),r=Q.bind(null,e,g,!0)}else A.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(e=B(s),t=c.bind(null,e,s),r=function(){i(e),e.href&&URL.revokeObjectURL(e.href)}):(e=o(s),t=w.bind(null,e),r=function(){i(e)});return t(A),function(s){if(s){if(s.css===A.css&&s.media===A.media&&s.sourceMap===A.sourceMap)return;t(A=s)}else r()}}function Q(A,s,e,t){var r=e?"":t.css;if(A.styleSheet)A.styleSheet.cssText=L(s,r);else{var n=document.createTextNode(r),i=A.childNodes;i[s]&&A.removeChild(i[s]),i.length?A.insertBefore(n,i[s]):A.appendChild(n)}}function w(A,s){var e=s.css,t=s.media;if(t&&A.setAttribute("media",t),A.styleSheet)A.styleSheet.cssText=e;else{for(;A.firstChild;)A.removeChild(A.firstChild);A.appendChild(document.createTextNode(e))}}function c(A,s,e){var t=e.css,r=e.sourceMap,n=void 0===s.convertToAbsoluteUrls&&r;(s.convertToAbsoluteUrls||n)&&(t=p(t)),r&&(t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var i=new Blob([t],{type:"text/css"}),o=A.href;A.href=URL.createObjectURL(i),o&&URL.revokeObjectURL(o)}var a={},E=function(A){var s;return function(){return void 0===s&&(s=A.apply(this,arguments)),s}}(function(){return window&&document&&document.all&&!window.atob}),y=function(A){var s={};return function(e){return void 0===s[e]&&(s[e]=A.call(this,e)),s[e]}}(function(A){return document.querySelector(A)}),I=null,l=0,u=[],p=e(9);A.exports=function(A,s){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");s=s||{},s.attrs="object"==typeof s.attrs?s.attrs:{},s.singleton||(s.singleton=E()),s.insertInto||(s.insertInto="head"),s.insertAt||(s.insertAt="bottom");var e=r(A,s);return t(e,s),function(A){for(var n=[],i=0;i
2 |
11 |
12 |
13 |
14 |
{{percentage}}%
15 |
16 |
17 |
18 |
26 |
30 |
31 | {{percentage}}%
32 |
33 |
34 |
35 |
36 |
37 |
185 |
--------------------------------------------------------------------------------
/src/fonts/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-multiple/progress/fd62769315a5ed9d192780d9700a79ba6b170b09/src/fonts/iconfont.eot
--------------------------------------------------------------------------------
/src/fonts/iconfont.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
56 |
--------------------------------------------------------------------------------
/src/fonts/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-multiple/progress/fd62769315a5ed9d192780d9700a79ba6b170b09/src/fonts/iconfont.ttf
--------------------------------------------------------------------------------
/src/fonts/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-multiple/progress/fd62769315a5ed9d192780d9700a79ba6b170b09/src/fonts/iconfont.woff
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Progress from './components/progress.vue'
2 | import './styles/less/index.less'
3 |
4 | const install = function (Vue, opts = {}) {
5 | if (install.installed) return
6 | Vue.component('VmProgress', Progress)
7 | }
8 |
9 | if (typeof window !== 'undefined' && window.Vue) {
10 | Vue.component('VmProgress', Progress)
11 | }
12 |
13 | Progress.install = install
14 |
15 | export default Progress
16 |
--------------------------------------------------------------------------------
/src/styles/less/base.less:
--------------------------------------------------------------------------------
1 | @css-prefix: ~'vm-';
2 |
3 | @color-white: #fff;
4 | @color-success: #13ce66;
5 | @color-warning: #f7ba2a;
6 | @color-danger: #ff4949;
7 | @color-info: #50bfff;
8 |
9 | @bg-color: #e4e8f1;
10 | @text-color: #48576a;
11 | @progress-primary-color: #20a0ff;
12 | @progress-success-color: @color-success;
13 | @progress-warning-color: @color-warning;
14 | @progress-info-color: @color-info;
15 | @progress-danger-color: @color-danger;
16 | @progress-white-color: @color-white;
--------------------------------------------------------------------------------
/src/styles/less/font.less:
--------------------------------------------------------------------------------
1 | @progress-icon-prefix-cls: ~"@{css-prefix}progress-icon";
2 |
3 | @font-face {
4 | font-family: "iconfont";
5 | src: url('../../fonts/iconfont.eot?t=1500451929261'); /* IE9*/
6 | src: url('../../fonts/iconfont.eot?t=1500451929261#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../fonts/iconfont.woff?t=1500451929261') format('woff'), /* chrome, firefox */ url('../../fonts/iconfont.ttf?t=1500451929261') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../../fonts/iconfont.svg?t=1500451929261#iconfont') format('svg'); /* iOS 4.1- */
7 | }
8 |
9 | [class^="@{progress-icon-prefix-cls}"], [class*=" @{progress-icon-prefix-cls}"] {
10 | font-family: "iconfont" !important;
11 | font-size: 16px;
12 | font-style: normal;
13 | -webkit-font-smoothing: antialiased;
14 | -moz-osx-font-smoothing: grayscale;
15 | }
16 |
17 | .@{progress-icon-prefix-cls} {
18 | &-circle--success {
19 | color: @progress-success-color;
20 | &:before {
21 | content: "\e8e4";
22 | }
23 | }
24 | &--success {
25 | color: @progress-success-color;
26 | &:before {
27 | content: "\e8e5";
28 | }
29 | }
30 | &-circle--error {
31 | color: @progress-danger-color;
32 | &:before {
33 | content: "\e8e7";
34 | }
35 | }
36 | &--error {
37 | color: @progress-danger-color;
38 | &:before {
39 | content: "\e8e8";
40 | }
41 | }
42 | &-circle--info {
43 | color: @progress-info-color;
44 | &:before {
45 | content: "\e8ea";
46 | }
47 | }
48 | &--info {
49 | color: @progress-info-color;
50 | &:before {
51 | content: "\e8e9";
52 | }
53 | }
54 | &-circle--warning {
55 | color: @progress-warning-color;
56 | &:before {
57 | content: "\e8ec";
58 | }
59 | }
60 | &--warning {
61 | color: @progress-warning-color;
62 | &:before {
63 | content: "\e8ee";
64 | }
65 | }
66 | &--close {
67 | &:before {
68 | content: "\e8e8";
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/styles/less/index.less:
--------------------------------------------------------------------------------
1 | @import "base";
2 | @import "font";
3 | @import "progress";
--------------------------------------------------------------------------------
/src/styles/less/progress.less:
--------------------------------------------------------------------------------
1 | .@{css-prefix}progress {
2 | position: relative;
3 | line-height: 1;
4 |
5 | &__text {
6 | display: inline-block;
7 | vertical-align: middle;
8 | margin-left: 10px;
9 | font-size: 14px;
10 | color: @text-color;
11 | line-height: 1;
12 | }
13 |
14 | &--circle {
15 | display: inline-block;
16 |
17 | .vm-progress__text {
18 | position: absolute;
19 | top: 50%;
20 | left: 0;
21 | width: 100%;
22 | margin: 0;
23 | text-align: center;
24 | transform: translate(0, -50%);
25 |
26 | i {
27 | display: inline-block;
28 | vertical-align: middle;
29 | font-size: 22px;
30 | font-weight: bold;
31 | }
32 | }
33 | }
34 |
35 | &.is-success {
36 | .vm-progress-bar__inner {
37 | background-color: @progress-success-color;
38 | }
39 | .vm-progress__text {
40 | color: @progress-success-color;
41 | }
42 | }
43 |
44 | &.is-exception {
45 | .vm-progress-bar__inner {
46 | background-color: @progress-danger-color;
47 | }
48 | .vm-progress__text {
49 | color: @progress-danger-color;
50 | }
51 | }
52 |
53 | &.is-warning {
54 | .vm-progress-bar__inner {
55 | background-color: @progress-warning-color;
56 | }
57 | .vm-progress__text {
58 | color: @progress-warning-color;
59 | }
60 | }
61 |
62 | &.is-info {
63 | .vm-progress-bar__inner {
64 | background-color: @progress-info-color;
65 | }
66 | .vm-progress__text {
67 | color: @progress-info-color;
68 | }
69 | }
70 |
71 |
72 | &--without-text {
73 | .vm-progress__text {
74 | display: none;
75 | }
76 | .vm-progress-bar {
77 | padding-right: 0;
78 | margin-right: 0;
79 | display: block;
80 | }
81 | }
82 |
83 | &--text-inside {
84 | .vm-progress-bar {
85 | padding-right: 0;
86 | margin-right: 0;
87 | }
88 | }
89 | &-bar {
90 | display: inline-block;
91 | vertical-align: middle;
92 | width: 100%;
93 | padding-right: 50px;
94 | margin-right: -55px;
95 | box-sizing: border-box;
96 | &__outer {
97 | position: relative;
98 | height: 6px;
99 | background-color: @bg-color;
100 | border-radius: 100px;
101 | vertical-align: middle;
102 | overflow: hidden;
103 | }
104 | &__inner {
105 | position: absolute;
106 | left: 0;
107 | top: 0;
108 | height: 100%;
109 | line-height: 1;
110 | text-align: right;
111 | background-color: @progress-primary-color;
112 | border-radius: 100px;
113 | }
114 | &__innerText {
115 | display: inline-block;
116 | vertical-align: middle;
117 | color: @progress-white-color;
118 | font-size: 12px;
119 | margin: 0 5px;
120 | white-space: nowrap;
121 | }
122 | &__striped {
123 | background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
124 | background-size: 40px 40px;
125 | animation: progress-bar-stripes 2s linear infinite
126 | }
127 | }
128 | }
129 | @keyframes progress-bar-stripes {
130 | from {
131 | background-position: 40px 0
132 | }
133 |
134 | to {
135 | background-position: 0 0
136 | }
137 | }
--------------------------------------------------------------------------------