caoliancun/vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增AvatarList组件

Browse Source
This commit is contained in:
chenghx
2018-08-06 16:30:38 +08:00
parent 7befb78ba5
commit 9f244f3719
5 changed files with 130 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/list/Search/ApplicationList.vue
View File

@@ -21,6 +21,11 @@
</a-tooltip>
<a-dropdown class="tool">
<a-icon type="ellipsis" />
<a-menu slot="overlay">
<a-menu-item>1 item</a-menu-item>
<a-menu-item>2 item</a-menu-item>
<a-menu-item>3 item</a-menu-item>
</a-menu>
</a-dropdown>
</ul>
<div class="content">
@@ -49,9 +54,13 @@ import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
import AIcon from 'vue-antd-ui/es/icon/icon'
import ADropdown from 'vue-antd-ui/es/dropdown'
import AMenu from 'vue-antd-ui/es/menu/index'
const AMenuItem = AMenu.Item
export default {
name: 'ApplicationList',
components: {ADropdown, AIcon, ATooltip, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
components: {AMenuItem, AMenu, ADropdown, AIcon, ATooltip, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
}
</script>
@@ -99,16 +108,22 @@ export default {
list-style: none;
margin: 0;
padding: 0;
height: 38px;
height: 47px;
.tool{
width: 25%;
float: left;
text-align: center;
margin: 12px 0;
color: rgba(0,0,0,.45);
}
.tool:not(:last-child) {
border-right: 1px solid #e8e8e8;
cursor: pointer;
font-size: 16px;
line-height: 22px;
&:hover{
color: #1890ff;
}
&:not(:last-child) {
border-right: 1px solid #e8e8e8;
}
}
}
</style>

13
src/components/list/Search/ProjectList.vue
View File

@@ -14,7 +14,11 @@
</a-card-meta>
<div class="content">
<span>4小时前</span>
<a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
<avatar-list>
<avatar-list-item size="small" tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
<avatar-list-item size="small" tips="周星星" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png" />
<avatar-list-item size="small" tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png" />
</avatar-list>
</div>
</a-card>
</a-list-item>
@@ -29,9 +33,14 @@ import AList from 'vue-antd-ui/es/list'
import AListItem from 'vue-antd-ui/es/list/Item'
import ACardMeta from 'vue-antd-ui/es/card/Meta'
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
import AvatarList from '../../tool/AvatarList'
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
const AvatarListItem = AvatarList.Item
export default {
name: 'ProjectList',
components: {AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
components: {ATooltip, AvatarListItem, AvatarList, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
}
</script>