Skip to content

Commit f9c51ed

Browse files
sendyasendya
committed
feat: add pro components - trend, avatarList
1 parent 9f4210d commit f9c51ed

File tree

11 files changed

+314
-13
lines changed

11 files changed

+314
-13
lines changed

‎src/components/AvatarList/Item.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div>
3+
item
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "AvatarItem",
10+
props: {
11+
tips: {
12+
type: String,
13+
default: '',
14+
required: false
15+
},
16+
src: {
17+
type: String,
18+
required: true
19+
}
20+
}
21+
}
22+
</script>
23+
24+
<style scoped>
25+
26+
</style>

‎src/components/AvatarList/List.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div>
3+
4+
</div>
5+
</template>
6+
7+
<script>
8+
import Avatar from 'ant-design-vue/es/avatar'
9+
import AvatarListItem from './Item'
10+
11+
export default {
12+
name: "AvatarList",
13+
components: {
14+
Avatar,
15+
AvatarListItem
16+
},
17+
props: {
18+
/**
19+
* 头像大小 类型: large、small 、mini, default
20+
* 默认值: default
21+
*/
22+
size: {
23+
type: String,
24+
default: 'default'
25+
},
26+
/**
27+
* 要显示的最大项目
28+
*/
29+
maxLength: {
30+
type: Number,
31+
default: 3
32+
},
33+
/**
34+
* 额外 CSS 风格
35+
*/
36+
excessItemsStyle: {
37+
type: Object,
38+
default: () => {}
39+
}
40+
},
41+
data () {
42+
return {
43+
44+
}
45+
}
46+
}
47+
</script>
48+
49+
<style scoped>
50+
51+
</style>

‎src/components/AvatarList/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import AvatarList from './List'
2+
3+
export default AvatarList

‎src/components/AvatarList/index.less

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
@import "../index";
2+
3+
@avatar-list-prefix-cls: ~"@{ant-pro-prefix}-avatar-list";
4+
@avatar-list-item-prefix-cls: ~"@{ant-pro-prefix}-avatar-list-item";
5+
6+
.@{avatar-list-prefix-cls} {
7+
display: inline-block;
8+
9+
ul {
10+
display: inline-block;
11+
margin-left: 8px;
12+
font-size: 0;
13+
}
14+
}
15+
16+
.@{avatar-list-item-prefix-cls} {
17+
display: inline-block;
18+
font-size: @font-size-base;
19+
margin-left: -8px;
20+
width: @avatar-size-base;
21+
height: @avatar-size-base;
22+
23+
:global {
24+
.ant-avatar {
25+
border: 1px solid #fff;
26+
}
27+
}
28+
29+
.large {
30+
width: @avatar-size-lg;
31+
height: @avatar-size-lg;
32+
}
33+
34+
.small {
35+
width: @avatar-size-sm;
36+
height: @avatar-size-sm;
37+
}
38+
39+
.mini {
40+
width: 20px;
41+
height: 20px;
42+
43+
:global {
44+
.ant-avatar {
45+
width: 20px;
46+
height: 20px;
47+
line-height: 20px;
48+
49+
.ant-avatar-string {
50+
font-size: 12px;
51+
line-height: 18px;
52+
}
53+
}
54+
}
55+
}
56+
}

‎src/components/Trend/Trend.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<div :class="[prefixCls, reverseColor && 'reverse-color' ]">
3+
<span>
4+
<slot name="term"></slot>
5+
<span class="item-text">
6+
<slot></slot>
7+
</span>
8+
</span>
9+
<span :class="[flag]"><a-icon :type="`caret-${flag}`"/></span>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: "Trend",
16+
props: {
17+
prefixCls: {
18+
type: String,
19+
default: 'ant-pro-trend'
20+
},
21+
/**
22+
* 上升下降标识：up|down
23+
*/
24+
flag: {
25+
type: String,
26+
required: true
27+
},
28+
/**
29+
* 颜色反转
30+
*/
31+
reverseColor: {
32+
type: Boolean,
33+
default: false
34+
}
35+
}
36+
}
37+
</script>
38+
39+
<style lang="less" scoped>
40+
@import "index";
41+
</style>

‎src/components/Trend/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Trend from './Trend.vue'
2+
3+
export default Trend

‎src/components/Trend/index.less

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@import "../index";
2+
3+
@trend-prefix-cls: ~"@{ant-pro-prefix}-trend";
4+
5+
.@{trend-prefix-cls} {
6+
display: inline-block;
7+
font-size: @font-size-base;
8+
line-height: 22px;
9+
10+
.up,
11+
.down {
12+
margin-left: 4px;
13+
position: relative;
14+
top: 1px;
15+
16+
i {
17+
font-size: 12px;
18+
transform: scale(0.83);
19+
}
20+
}
21+
22+
.item-text {
23+
display: inline-block;
24+
margin-left: 8px;
25+
color: rgba(0,0,0,.85);
26+
}
27+
28+
.up {
29+
color: @red-6;
30+
}
31+
.down {
32+
color: @green-6;
33+
top: -1px;
34+
}
35+
36+
&.reverse-color .up {
37+
color: @green-6;
38+
}
39+
&.reverse-color .down {
40+
color: @red-6;
41+
}
42+
}

‎src/components/index.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "~ant-design-vue/lib/style/index";
2+
3+
// The prefix to use on all css classes from ant-pro.
4+
@ant-pro-prefix : ant-pro;

‎src/config/router.config.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { UserLayout, BasicLayout, RouteView, PageView } from '@/components/layouts'
1+
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
22

33
export const asyncRouterMap = [
44

@@ -313,6 +313,19 @@ export const constantRouterMap = [
313313
]
314314
},
315315

316+
{
317+
path: '/test',
318+
component: BlankLayout,
319+
redirect: '/test/home',
320+
children: [
321+
{
322+
path: 'home',
323+
name: 'TestHome',
324+
component: () => import('@/views/Home')
325+
}
326+
]
327+
},
328+
316329
{
317330
path: '/404',
318331
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')

‎src/views/Home.vue

Lines changed: 65 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,74 @@
11
<template>
22
<div class="home">
3-
<img alt="Vue logo" src="../assets/logo.png">
4-
<HelloWorld msg="Welcome to Your Vue.js App"/>
3+
<div class="banner">
4+
<img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png">
5+
<h3>Welcome to Your Vue.js App</h3>
6+
</div>
7+
8+
<br/>
9+
10+
<h2># Trend 组件 </h2>
11+
12+
<a-divider> 正常 </a-divider>
13+
14+
<a-card>
15+
16+
<trend flag="up" style="margin-right: 16px;">
17+
<span slot="term">工资</span>
18+
5%
19+
</trend>
20+
<trend flag="up" style="margin-right: 16px;">
21+
<span slot="term">工作量</span>
22+
50%
23+
</trend>
24+
<trend flag="down">
25+
<span slot="term">身体状态</span>
26+
50%
27+
</trend>
28+
29+
</a-card>
30+
31+
<a-divider> 颜色反转 </a-divider>
32+
33+
<a-card>
34+
35+
<trend flag="up" :reverse-color="true" style="margin-right: 16px;">
36+
<span slot="term">工资</span>
37+
5%
38+
</trend>
39+
<trend flag="down" :reverse-color="true" style="margin-right: 16px;">
40+
<span slot="term">工作量</span>
41+
50%
42+
</trend>
43+
44+
</a-card>
45+
46+
<a-divider> 例子 </a-divider>
47+
548
</div>
649
</template>
750

851
<script>
9-
// @ is an alias to /src
10-
import HelloWorld from '@/components/HelloWorld.vue'
52+
// @ is an alias to /src
1153
12-
export default {
13-
name: 'Home',
14-
components: {
15-
HelloWorld
54+
import Trend from '@/components/Trend'
55+
56+
export default {
57+
name: 'Home',
58+
components: {
59+
Trend
60+
}
1661
}
17-
}
1862
</script>
63+
64+
<style scoped>
65+
.home {
66+
width: 900px;
67+
margin: 0 auto;
68+
}
69+
.home > .banner {
70+
text-align: center;
71+
padding-top: 25px;
72+
margin: 25px 0;
73+
}
74+
</style>

0 commit comments

Comments
 (0)