drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update List

Browse source
This commit is contained in:
梁灏 2019-06-08 15:53:25 +08:00
parent fb7f36f91b
commit c501f03c9d
4 changed files with 155 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
examples/routers/list.vue
View file

@ -1,26 +1,75 @@
<template> <template>
<div> <div>
<h2>small size</h2> <!-- <h2>small size</h2>-->
<List header="Header" footer="Footer" size="small" :split="false"> <!-- <List header="Header" footer="Footer" size="small" :split="false">-->
<ListItem v-for="item in data1" :key="item"> <!-- <ListItem v-for="item in data1" :key="item">-->
{{ item }} <!-- {{ item }}-->
</ListItem> <!-- </ListItem>-->
</List> <!-- </List>-->
<h2>default size</h2> <!-- <h2>default size</h2>-->
<List header="Header" footer="Footer"> <!-- <List header="Header" footer="Footer">-->
<ListItem v-for="item in data1" :key="item"> <!-- <ListItem v-for="item in data1" :key="item">-->
{{ item }} <!-- {{ item }}-->
</ListItem> <!-- </ListItem>-->
</List> <!-- </List>-->
<h2>large size</h2> <!-- <h2>large size</h2>-->
<List header="Header" footer="Footer" border size="large"> <!-- <List header="Header" footer="Footer" border size="large">-->
<ListItem v-for="item in data1" :key="item"> <!-- <ListItem v-for="item in data1" :key="item">-->
{{ item }} <!-- {{ item }}-->
<!-- </ListItem>-->
<!-- </List>-->
<!-- <Divider>没有 </Divider>-->
<!-- <List>-->
<!-- <ListItem v-for="item in data2" :key="item.title">-->
<!-- <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">-->
<!-- </ListItemMeta>-->
<!-- 一段内容-->
<!-- </ListItem>-->
<!-- </List>-->
<Divider>带有 Action</Divider>
<List>
<ListItem v-for="item in data2" :key="item.title">
<ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">
</ListItemMeta>
一段内容
<template slot="action">
<li>
<a href="">edit</a>
<!-- <Button typr="primary">编辑</Button>-->
</li>
<li>
<a href="">more</a>
<!-- <Button>删除</Button>-->
</li>
</template>
</ListItem> </ListItem>
</List> </List>
<Divider></Divider> <!-- <Divider>带图片</Divider>-->
<!-- <List item-layout="vertical">-->
<!-- <ListItem v-for="item in data2" :key="item.title">-->
<!-- <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">-->
<!-- </ListItemMeta>-->
<!-- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.-->
<!--&lt;!&ndash; <template slot="action">&ndash;&gt;-->
<!--&lt;!&ndash; <li>&ndash;&gt;-->
<!--&lt;!&ndash; <Icon type="ios-star-outline" /> 156&ndash;&gt;-->
<!--&lt;!&ndash; </li>&ndash;&gt;-->
<!--&lt;!&ndash; <li>&ndash;&gt;-->
<!--&lt;!&ndash; <Icon type="ios-thumbs-up-outline" /> 156&ndash;&gt;-->
<!--&lt;!&ndash; </li>&ndash;&gt;-->
<!--&lt;!&ndash; <li>&ndash;&gt;-->
<!--&lt;!&ndash; <Icon type="ios-chatbubbles-outline" /> 10&ndash;&gt;-->
<!--&lt;!&ndash; </li>&ndash;&gt;-->
<!--&lt;!&ndash; </template>&ndash;&gt;-->
<!-- </ListItem>-->
<!-- </List>-->
</div> </div>
</template> </template>
@ -34,6 +83,33 @@
'Australian walks 100km after outback crash.', 'Australian walks 100km after outback crash.',
'Man charged over missing wedding girl.', 'Man charged over missing wedding girl.',
'Los Angeles battles huge wildfires.', 'Los Angeles battles huge wildfires.',
],
data2: [
{
title: 'This is a title 1',
description: 'This is the description, This is the description, This is the description.',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
},
{
title: 'This is a title 2',
description: 'This is the description, This is the description, This is the description.',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
},
{
title: 'This is a title 3',
description: 'This is the description, This is the description, This is the description.',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
},
{
title: 'This is a title 4',
description: 'This is the description, This is the description, This is the description.',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
},
{
title: 'This is a title 5',
description: 'This is the description, This is the description, This is the description.',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
}
] ]
}; };
} }

25
src/components/list/list-item.vue
View file

@ -1,13 +1,36 @@
<template> <template>
<li class="ivu-list-item"> <li class="ivu-list-item" :class="classes">
<slot></slot> <slot></slot>
<ul class="ivu-list-item-action" v-if="$slots.action">
<slot name="action"></slot>
</ul>
</li> </li>
</template> </template>
<script> <script>
export default { export default {
name: 'ListItem', name: 'ListItem',
inject: ['ListInstance'],
props: { props: {
},
computed: {
isFlexMode () {
const extra = this.$slots.extra;
const itemLayout = this.ListInstance.itemLayout;
if (itemLayout === 'vertical') {
return !!extra;
}
return !this.$slots.default;
},
classes () {
return [
{
'ivu-list-item-no-flex': !this.isFlexMode
}
];
}
} }
}; };
</script> </script>

7
src/components/list/list.vue
View file

@ -4,7 +4,7 @@
<div class="ivu-list-container"> <div class="ivu-list-container">
<ul class="ivu-list-items"><slot></slot></ul> <ul class="ivu-list-items"><slot></slot></ul>
</div> </div>
<Spin v-if="loading"><slot name="spin"></slot></Spin> <Spin v-if="loading" fix size="large"><slot name="spin"></slot></Spin>
<div class="ivu-list-footer" v-if="footer || $slots.footer"><slot name="footer">{{ footer }}</slot></div> <div class="ivu-list-footer" v-if="footer || $slots.footer"><slot name="footer">{{ footer }}</slot></div>
</div> </div>
</template> </template>
@ -15,6 +15,11 @@
export default { export default {
name: 'List', name: 'List',
provide () {
return {
ListInstance: this
};
},
props: { props: {
border: { border: {
type: Boolean, type: Boolean,

39
src/styles/components/list.less
View file

@ -31,6 +31,7 @@
flex: 1 0; flex: 1 0;
} }
&-title { &-title {
font-weight: bold;
margin-bottom: 4px; margin-bottom: 4px;
color: @text-color; color: @text-color;
font-size: @font-size-base; font-size: @font-size-base;
@ -65,18 +66,28 @@
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
&:after{
content: '';
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 14px;
margin-top: -7px;
background-color: @border-color-split;
}
} }
& > li:first-child { & > li:first-child {
padding-left: 0; padding-left: 0;
} }
& > li:last-child {
&:after{
display: none;
}
}
&-split { &-split {
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 14px;
margin-top: -7px;
background-color: @border-color-split;
} }
} }
} }
@ -154,6 +165,20 @@
} }
} }
} }
// without flex
&-item-no-flex {
display: block;
}
// Horizontal
&:not(.@{list-prefix-cls}-vertical) {
.@{list-prefix-cls}-item-no-flex {
.@{list-prefix-cls}-item-action {
float: right;
}
}
}
} }
.@{list-prefix-cls}-bordered { .@{list-prefix-cls}-bordered {