Skip to content

Commit b5e4d88

Browse files
savoygusavoygu
committed
merge v1.1.0
2 parents 3a3802c + da06b74 commit b5e4d88

File tree

6 files changed

+103
-35
lines changed

6 files changed

+103
-35
lines changed

‎example/src/App.vue

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,29 @@
1010
<demonstration
1111
title="线形进度条 — 百分比外显"
1212
anchor="xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"
13-
:highlight="sourcecodeA">
13+
:highlight="sourcecodeA"
14+
:multiple="true">
1415
<template slot="source">
15-
<vm-progress :percentage="0"></vm-progress>
16-
<vm-progress :percentage="70"></vm-progress>
17-
<vm-progress :percentage="30" strokeColor="purple"></vm-progress>
18-
<vm-progress :percentage="30" status="exception"></vm-progress>
19-
<vm-progress :percentage="50" status="info"></vm-progress>
20-
<vm-progress :percentage="80" status="warning"></vm-progress>
21-
<vm-progress :percentage="100" status="success"></vm-progress>
16+
<div class="vd-demo__block vd-demo__block-2">
17+
<span class="vd-demo__demonstartion">默认文字</span>
18+
<vm-progress :percentage="0"></vm-progress>
19+
<vm-progress :percentage="70"></vm-progress>
20+
<vm-progress :percentage="30" strokeColor="purple"></vm-progress>
21+
<vm-progress :percentage="30" status="exception"></vm-progress>
22+
<vm-progress :percentage="50" status="info"></vm-progress>
23+
<vm-progress :percentage="80" status="warning"></vm-progress>
24+
<vm-progress :percentage="100" status="success"></vm-progress>
25+
</div>
26+
<div class="vd-demo__block vd-demo__block-2 vd-custom-text">
27+
<span class="vd-demo__demonstartion">自定义文字，需要附加样式</span>
28+
<vm-progress :percentage="0">占比 0%</vm-progress>
29+
<vm-progress :percentage="70">占比 70%</vm-progress>
30+
<vm-progress :percentage="30" strokeColor="purple">占比 30%</vm-progress>
31+
<vm-progress :percentage="30" status="exception">占比 30%</vm-progress>
32+
<vm-progress :percentage="50" status="info">占比 50%</vm-progress>
33+
<vm-progress :percentage="80" status="warning">占比 80%</vm-progress>
34+
<vm-progress :percentage="100" status="success">占比 100%</vm-progress>
35+
</div>
2236
</template>
2337
<template slot="explanation">
2438
<code>Progress</code> 组件设置 <code>percentage</code> 属性即可，表示进度条对应的百分比，必填，必须在 <code>0-100</code>。
@@ -28,15 +42,29 @@
2842
title="线形进度条 — 百分比内显"
2943
anchor="xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"
3044
description="百分比不占用额外控件，适用于文件上传等场景。"
31-
:highlight="sourcecodeB">
45+
:highlight="sourcecodeB"
46+
:multiple="true">
3247
<template slot="source">
33-
<vm-progress :percentage="0" :text-inside="true" :stroke-width="18"></vm-progress>
34-
<vm-progress :percentage="70" :text-inside="true" :stroke-width="18"></vm-progress>
35-
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" strokeColor="purple"></vm-progress>
36-
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" status="exception"></vm-progress>
37-
<vm-progress :percentage="50" :text-inside="true" :stroke-width="18" status="info"></vm-progress>
38-
<vm-progress :percentage="80" :text-inside="true" :stroke-width="18" status="warning"></vm-progress>
39-
<vm-progress :percentage="100" :text-inside="true" :stroke-width="18" status="success"></vm-progress>
48+
<div class="vd-demo__block vd-demo__block-2">
49+
<span class="vd-demo__demonstartion">默认文字</span>
50+
<vm-progress :percentage="0" :text-inside="true" :stroke-width="18"></vm-progress>
51+
<vm-progress :percentage="70" :text-inside="true" :stroke-width="18"></vm-progress>
52+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" strokeColor="purple"></vm-progress>
53+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" status="exception"></vm-progress>
54+
<vm-progress :percentage="50" :text-inside="true" :stroke-width="18" status="info"></vm-progress>
55+
<vm-progress :percentage="80" :text-inside="true" :stroke-width="18" status="warning"></vm-progress>
56+
<vm-progress :percentage="100" :text-inside="true" :stroke-width="18" status="success"></vm-progress>
57+
</div>
58+
<div class="vd-demo__block vd-demo__block-2">
59+
<span class="vd-demo__demonstartion">自定义文字</span>
60+
<vm-progress :percentage="0" :text-inside="true" :stroke-width="18">占比 0%</vm-progress>
61+
<vm-progress :percentage="70" :text-inside="true" :stroke-width="18">占比 70%</vm-progress>
62+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" strokeColor="purple">占比 30%</vm-progress>
63+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" status="exception">占比 30%</vm-progress>
64+
<vm-progress :percentage="50" :text-inside="true" :stroke-width="18" status="info">占比 50%</vm-progress>
65+
<vm-progress :percentage="80" :text-inside="true" :stroke-width="18" status="warning">占比 80%</vm-progress>
66+
<vm-progress :percentage="100" :text-inside="true" :stroke-width="18" status="success">占比 100%</vm-progress>
67+
</div>
4068
</template>
4169
<template slot="explanation">
4270
<code>Progress</code> 组件可通过 <code>stroke-width</code> 属性更改进度条的高度，并可通过 <code>text-inside</code> 属性来将进度条描述置于进度条内部。
@@ -264,6 +292,10 @@
264292
width: 350px;
265293
margin-bottom: 15px;
266294
}
295+
.vd-custom-text .vm-progress-bar {
296+
padding-right: 100px;
297+
margin-right: -105px;
298+
}
267299
}
268300
.btn-striped {
269301
margin-bottom: 20px;

‎example/src/template.js

Lines changed: 48 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,52 @@
1-
export const sourcecodeA = `<vm-progress :percentage="0"></vm-progress>
2-
<vm-progress :percentage="70"></vm-progress>
3-
<vm-progress :percentage="30" strokeColor="purple"></vm-progress>
4-
<vm-progress :percentage="30" status="exception"></vm-progress>
5-
<vm-progress :percentage="50" status="info"></vm-progress>
6-
<vm-progress :percentage="80" status="warning"></vm-progress>
7-
<vm-progress :percentage="100" status="success"></vm-progress>`
1+
export const sourcecodeA = `<template>
2+
<div class="vd-demo__block vd-demo__block-2">
3+
<span class="vd-demo__demonstartion">默认文字</span>
4+
<vm-progress :percentage="0"></vm-progress>
5+
<vm-progress :percentage="70"></vm-progress>
6+
<vm-progress :percentage="30" strokeColor="purple"></vm-progress>
7+
<vm-progress :percentage="30" status="exception"></vm-progress>
8+
<vm-progress :percentage="50" status="info"></vm-progress>
9+
<vm-progress :percentage="80" status="warning"></vm-progress>
10+
<vm-progress :percentage="100" status="success"></vm-progress>
11+
</div>
12+
<div class="vd-demo__block vd-demo__block-2 vd-custom-text">
13+
<span class="vd-demo__demonstartion">自定义文字，需要附加样式</span>
14+
<vm-progress :percentage="0">占比 0%</vm-progress>
15+
<vm-progress :percentage="70">占比 70%</vm-progress>
16+
<vm-progress :percentage="30" strokeColor="purple">占比 30%</vm-progress>
17+
<vm-progress :percentage="30" status="exception">占比 30%</vm-progress>
18+
<vm-progress :percentage="50" status="info">占比 50%</vm-progress>
19+
<vm-progress :percentage="80" status="warning">占比 80%</vm-progress>
20+
<vm-progress :percentage="100" status="success">占比 100%</vm-progress>
21+
</div>
22+
</template>
23+
<style>
24+
.vd-custom-text .vm-progress-bar {
25+
padding-right: 100px;
26+
margin-right: -105px;
27+
}
28+
</style>`
829

9-
export const sourcecodeB = `<vm-progress :percentage="0" :text-inside="true" :stroke-width="18"></vm-progress>
10-
<vm-progress :percentage="70" :text-inside="true" :stroke-width="18"></vm-progress>
11-
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" strokeColor="purple"></vm-progress>
12-
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" status="exception"></vm-progress>
13-
<vm-progress :percentage="50" :text-inside="true" :stroke-width="18" status="info"></vm-progress>
14-
<vm-progress :percentage="80" :text-inside="true" :stroke-width="18" status="warning"></vm-progress>
15-
<vm-progress :percentage="100" :text-inside="true" :stroke-width="18" status="success"></vm-progress>`
30+
export const sourcecodeB = `<div class="vd-demo__block vd-demo__block-2">
31+
<span class="vd-demo__demonstartion">默认文字</span>
32+
<vm-progress :percentage="0" :text-inside="true" :stroke-width="18"></vm-progress>
33+
<vm-progress :percentage="70" :text-inside="true" :stroke-width="18"></vm-progress>
34+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" strokeColor="purple"></vm-progress>
35+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" status="exception"></vm-progress>
36+
<vm-progress :percentage="50" :text-inside="true" :stroke-width="18" status="info"></vm-progress>
37+
<vm-progress :percentage="80" :text-inside="true" :stroke-width="18" status="warning"></vm-progress>
38+
<vm-progress :percentage="100" :text-inside="true" :stroke-width="18" status="success"></vm-progress>
39+
</div>
40+
<div class="vd-demo__block vd-demo__block-2">
41+
<span class="vd-demo__demonstartion">自定义文字</span>
42+
<vm-progress :percentage="0" :text-inside="true" :stroke-width="18">占比 0%</vm-progress>
43+
<vm-progress :percentage="70" :text-inside="true" :stroke-width="18">占比 70%</vm-progress>
44+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" strokeColor="purple">占比 30%</vm-progress>
45+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" status="exception">占比 30%</vm-progress>
46+
<vm-progress :percentage="50" :text-inside="true" :stroke-width="18" status="info">占比 50%</vm-progress>
47+
<vm-progress :percentage="80" :text-inside="true" :stroke-width="18" status="warning">占比 80%</vm-progress>
48+
<vm-progress :percentage="100" :text-inside="true" :stroke-width="18" status="success">占比 100%</vm-progress>
49+
</div>`
1650

1751
export const sourcecodeC = `<template>
1852
<div class="vd-demo__block vd-demo__block-2">

‎lib/progress.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-multiple-progress",
33
"description": "Vue-based progress component",
4-
"version": "1.0.0",
4+
"version": "1.1.0",
55
"author": "vue-multiple",
66
"main": "lib/progress.js",
77
"files": [
@@ -15,7 +15,8 @@
1515
"demo:dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config ./build/webpack.example.dev.conf.js",
1616
"demo:build": "rm -rf ./example/dist && cross-env NODE_ENV=production webpack --config ./build/webpack.example.prod.conf.js",
1717
"demo:prepublish": "rm -rf ./gh-pages && cross-env NODE_ENV=prepublish webpack --config ./build/webpack.example.prod.conf.js",
18-
"deploy": "bash ./build/gh-pages.sh"
18+
"deploy": "bash ./build/gh-pages.sh",
19+
"test": "echo 'comming soon...'"
1920
},
2021
"repository": {
2122
"type": "git",

‎src/components/progress.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="vm-progress-bar" v-if="type === 'line'">
1212
<div class="vm-progress-bar__outer" :style="{ height: strokeWidth + 'px', backgroundColor: trackColor }">
1313
<div class="vm-progress-bar__inner" :class="[{'vm-progress-bar__striped': striped}, linearClassName]" :style="barStyle">
14-
<div class="vm-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
14+
<div class="vm-progress-bar__innerText" v-if="showText && textInside"><slot>{{percentage}}%</slot></div>
1515
</div>
1616
</div>
1717
</div>
@@ -27,7 +27,7 @@
2727
v-if="showText && !textInside"
2828
ref="progressText"
2929
:style="{ fontSize: progressTextSize + 'px' }">
30-
<template v-if="!st || strokeColor">
30+
<template v-if="!st || strokeColor || $slots.default">
3131
<slot>{{percentage}}%</slot>
3232
</template>
3333
<i v-else :class="iconClass"></i>

‎src/styles/less/progress.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@
117117
color: @progress-white-color;
118118
font-size: 12px;
119119
margin: 0 5px;
120+
white-space: nowrap;
120121
}
121122
&__striped {
122123
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);

0 commit comments

Comments
 (0)