Skip to content

Commit 6d8a070

Browse files
vanoneangvanoneang
authored
Merge pull request #193 from TaleLin/feature/linCmsUi
初始化进度条，三种时间选择器展示页面
2 parents 1b6827f + d069afd commit 6d8a070

File tree

5 files changed

+1357
-0
lines changed

5 files changed

+1357
-0
lines changed

‎src/plugins/LinCmsUi/stage-config.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,16 @@ const LinCmsUiRouter = {
7070
icon: 'iconfont icon-jiemiansheji',
7171
right: null,
7272
},
73+
{
74+
title: 'Progress 进度条',
75+
type: 'view',
76+
name: null,
77+
route: '/lin-cms-ui/data/progress/',
78+
filePath: 'plugins/LinCmsUi/views/data/progress/Progress.vue',
79+
inNav: true,
80+
icon: 'iconfont icon-jiemiansheji',
81+
right: null,
82+
},
7383
{
7484
title: 'Badge 标记',
7585
type: 'view',
@@ -255,6 +265,36 @@ const LinCmsUiRouter = {
255265
icon: 'iconfont icon-jiemiansheji',
256266
right: null,
257267
},
268+
{
269+
title: 'TimePicker 时间选择器',
270+
type: 'view',
271+
name: null,
272+
route: '/lin-cms-ui/form/timePicker',
273+
filePath: 'plugins/LinCmsUi/views/form/TimePicker.vue',
274+
inNav: true,
275+
icon: 'iconfont icon-jiemiansheji',
276+
277+
},
278+
{
279+
title: 'DateTimePicker 日期时间选择器',
280+
type: 'view',
281+
name: null,
282+
route: '/lin-cms-ui/form/dateTimePicker',
283+
filePath: 'plugins/LinCmsUi/views/form/DateTimePicker.vue',
284+
inNav: true,
285+
icon: 'iconfont icon-jiemiansheji',
286+
287+
},
288+
{
289+
title: 'DatePicker 日期选择器',
290+
type: 'view',
291+
name: null,
292+
route: '/lin-cms-ui/form/datePicker',
293+
filePath: 'plugins/LinCmsUi/views/form/DatePicker.vue',
294+
inNav: true,
295+
icon: 'iconfont icon-jiemiansheji',
296+
297+
},
258298
],
259299
},
260300
{

‎src/plugins/LinCmsUi/views/data/progress/Progress.vue‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<template>
2+
<div class="lin-container">
3+
<div class="lin-title">Progress 进度条</div>
4+
<div class="lin-wrap-ui">
5+
<el-card style="margin-bottom:50px;">
6+
<div slot="header">
7+
<span>线形进度条 — 百分比外显</span>
8+
</div>
9+
<el-row>
10+
<div>
11+
<el-progress :percentage="0"></el-progress>
12+
<el-progress :percentage="70"></el-progress>
13+
<el-progress :percentage="80" color="#8e71c7"></el-progress>
14+
<el-progress :percentage="100" status="success"></el-progress>
15+
<el-progress :percentage="50" status="exception"></el-progress>
16+
</div>
17+
</el-row>
18+
<el-collapse>
19+
<el-collapse-item title="查看代码" name="2">
20+
<div style="white-space: pre-wrap;">{{base}}</div>
21+
</el-collapse-item>
22+
</el-collapse>
23+
</el-card>
24+
<el-card style="margin-bottom:50px;">
25+
<div slot="header">
26+
<span>线形进度条 — 百分比内显</span>
27+
</div>
28+
<el-row>
29+
<div>
30+
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
31+
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
32+
<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
33+
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
34+
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
35+
</div>
36+
</el-row>
37+
<el-collapse class="test" style="color:red;">
38+
<el-collapse-item title="查看代码" name="2">
39+
<div style="white-space: pre-wrap;">{{textInside}}</div>
40+
</el-collapse-item>
41+
</el-collapse>
42+
</el-card>
43+
<el-card style="margin-bottom:50px;">
44+
<div slot="header">
45+
<span>环形进度条</span>
46+
</div>
47+
<el-row>
48+
<div>
49+
<el-progress type="circle" :percentage="0"></el-progress>
50+
<el-progress type="circle" :percentage="25"></el-progress>
51+
<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
52+
<el-progress type="circle" :percentage="100" status="success"></el-progress>
53+
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
54+
<el-progress type="circle" :percentage="100" status="text">Done</el-progress>
55+
</div>
56+
</el-row>
57+
<el-collapse class="test" style="color:red;">
58+
<el-collapse-item title="查看代码" name="2">
59+
<div style="white-space: pre-wrap;">{{type}}</div>
60+
</el-collapse-item>
61+
</el-collapse>
62+
</el-card>
63+
</div>
64+
</div>
65+
</template>
66+
67+
<script>
68+
export default {
69+
name: '',
70+
components: {},
71+
data() {
72+
return {
73+
base: `
74+
<el-progress :percentage="0"></el-progress>
75+
<el-progress :percentage="70"></el-progress>
76+
<el-progress :percentage="80" color="#8e71c7"></el-progress>
77+
<el-progress :percentage="100" status="success"></el-progress>
78+
<el-progress :percentage="50" status="exception"></el-progress>`,
79+
textInside: `
80+
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
81+
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
82+
<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
83+
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
84+
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>`,
85+
type: `
86+
<el-progress type="circle" :percentage="0"></el-progress>
87+
<el-progress type="circle" :percentage="25"></el-progress>
88+
<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
89+
<el-progress type="circle" :percentage="100" status="success"></el-progress>
90+
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
91+
<el-progress type="circle" :percentage="100" status="text">Done</el-progress>`,
92+
}
93+
},
94+
// 计算属性设置
95+
computed: {},
96+
// 数据变更监听
97+
watch: {},
98+
mounted() {
99+
this.init()
100+
},
101+
methods: {
102+
// 执行获取数据等初始化动作
103+
init() {},
104+
},
105+
}
106+
</script>
107+
108+
<style lang="scss" scoped>
109+
@import '../../../assets/style/container';
110+
</style>

0 commit comments

Comments
 (0)