Skip to content

Commit c86c79a

Browse files
kouchaokouchao
committed
新增 进度条组件，新增 进度条demo
1 parent 11f90a7 commit c86c79a

File tree

6 files changed

+134
-0
lines changed

6 files changed

+134
-0
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
<lay-menu-child-item title="按钮" :to="{name: 'button'}"></lay-menu-child-item>
6969
<lay-menu-child-item title="表单" :to="{name: 'form'}"></lay-menu-child-item>
7070
<lay-menu-child-item title="导航/面包屑" :to="{name: 'nav'}"></lay-menu-child-item>
71+
<lay-menu-child-item title="进度条" :to="{name: 'progress'}"></lay-menu-child-item>
7172
<lay-menu-child-item title="徽章" :to="{name: 'badge'}"></lay-menu-child-item>
7273
<lay-menu-child-item title="辅助元素" :to="{name: 'auxiliar'}"></lay-menu-child-item>
7374

‎src/components/progress/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/8/31
3+
*/
4+
5+
import LayProgress from './src/progress';
6+
7+
/* istanbul ignore next */
8+
LayProgress.install = function(Vue) {
9+
Vue.component(LayProgress.name, LayProgress);
10+
};
11+
12+
export default LayProgress;

‎src/components/progress/src/progress.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="layui-progress" :class="'layui-progress-' + size">
3+
<div class="layui-progress-bar"
4+
:class="'layui-bg-' + this.theme"
5+
:style="[
6+
this.color ? 'background-color: ' + this.color : '',
7+
{
8+
width: this.percentage + '%'
9+
}
10+
]">
11+
<span v-if="showText"
12+
class="layui-progress-text">
13+
{{text ? text : this.percentage + '%'}}
14+
</span>
15+
</div>
16+
</div>
17+
</template>
18+
<script>
19+
export default {
20+
name: 'LayProgress',
21+
props: {
22+
percentage: Number,
23+
theme: String,
24+
color: String,
25+
size: String,
26+
showText: Boolean,
27+
text: String
28+
}
29+
}
30+
</script>

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import LayBlock from '@/components/block'
3636
import LayBadge from '@/components/badge'
3737
import LayBreadcrumb from '@/components/breadcrumb'
3838
import LayBreadcrumbItem from '@/components/breadcrumb-item'
39+
import LayProgress from '@/components/progress'
3940

4041

4142

@@ -76,6 +77,7 @@ const layui = {
7677
LayBadge,
7778
LayBreadcrumb,
7879
LayBreadcrumbItem,
80+
LayProgress,
7981
]
8082
components.forEach(function (component) {
8183
Vue.component(component.name, component)

‎src/router.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Form from './views/Form.vue'
88
import Nav from './views/Nav.vue'
99
import Badge from './views/Badge.vue'
1010
import Auxiliar from './views/Auxiliar.vue'
11+
import Progress from './views/Progress.vue'
1112

1213
Vue.use(Router)
1314

@@ -52,6 +53,11 @@ export default new Router({
5253
path: '/auxiliar',
5354
name: 'auxiliar',
5455
component: Auxiliar
56+
},
57+
{
58+
path: '/progress',
59+
name: 'progress',
60+
component: Progress
5561
}
5662

5763

‎src/views/Progress.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div>
3+
<lay-block title="默认风格的进度条"></lay-block>
4+
<lay-progress :percentage="40"></lay-progress>
5+
<div style="margin-top: 15px; width:300px">
6+
<lay-progress :percentage="70"></lay-progress>
7+
</div>
8+
<br>
9+
<p>温馨提示：进度条的宽度是100%适配于它的父级元素，如上面的进度条是在一个300px的父容器中。</p>
10+
11+
<lay-block title="更多颜色选取" style="margin-top: 50px;"></lay-block>
12+
<lay-progress :percentage="20" theme="red"></lay-progress>
13+
<br>
14+
<lay-progress :percentage="30" theme="orange"></lay-progress>
15+
<br>
16+
<lay-progress :percentage="40" theme="green"></lay-progress>
17+
<br>
18+
<lay-progress :percentage="50" theme="blue"></lay-progress>
19+
<br>
20+
<lay-progress :percentage="60" theme="cyan"></lay-progress>
21+
22+
23+
<lay-block title="大尺寸进度条" style="margin-top: 50px;"></lay-block>
24+
<lay-progress :percentage="20" size="big"></lay-progress>
25+
<br>
26+
<lay-progress :percentage="35" size="big" theme="green"></lay-progress>
27+
<br>
28+
<lay-progress :percentage="75" size="big" theme="cyan"></lay-progress>
29+
30+
<lay-block title="显示进度比文本" style="margin-top: 50px;"></lay-block>
31+
32+
<lay-progress :percentage="20" :show-text="true"></lay-progress>
33+
<br>
34+
<br>
35+
<lay-progress :percentage="50" :show-text="true" text="5 / 10"></lay-progress>
36+
<br>
37+
<br>
38+
<lay-progress :percentage="70" size="big" :show-text="true"></lay-progress>
39+
<br>
40+
<p>正如你上述看到的，除了百分数，还有分数，但是这不是计算的，而是自定义文字</p>
41+
42+
<lay-block title="动态改变进度" style="margin-top: 50px;"></lay-block>
43+
<lay-progress :percentage="percentage" theme="red" size="big" show-text></lay-progress>
44+
45+
<div style="margin: 20px 0">
46+
<lay-button @click="percentage = 50">设置50%</lay-button>
47+
<lay-button @click="load">模拟loading</lay-button>
48+
</div>
49+
50+
</div>
51+
</template>
52+
53+
<script>
54+
let timer = ''
55+
export default {
56+
name: "Progress",
57+
data(){
58+
return {
59+
percentage: 0
60+
}
61+
},
62+
methods: {
63+
load(){
64+
if(timer){
65+
clearInterval(timer)
66+
}
67+
this.percentage = 0
68+
69+
timer = setInterval(() => {
70+
this.percentage += parseInt(Math.random() * 10 + 3)
71+
if(this.percentage >= 100){
72+
this.percentage = 100
73+
clearInterval(timer)
74+
}
75+
}, 500)
76+
}
77+
}
78+
}
79+
</script>
80+
81+
<style scoped>
82+
83+
</style>

0 commit comments

Comments
 (0)