update List
This commit is contained in:
梁灏
parent
fb7f36f91b
commit
c501f03c9d
4 changed files with 155 additions and 26 deletions
|
|
@ -1,26 +1,75 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>small size</h2>
|
||||
<List header="Header" footer="Footer" size="small" :split="false">
|
||||
<ListItem v-for="item in data1" :key="item">
|
||||
{{ item }}
|
||||
</ListItem>
|
||||
</List>
|
||||
<h2>default size</h2>
|
||||
<List header="Header" footer="Footer">
|
||||
<ListItem v-for="item in data1" :key="item">
|
||||
{{ item }}
|
||||
</ListItem>
|
||||
</List>
|
||||
<h2>large size</h2>
|
||||
<List header="Header" footer="Footer" border size="large">
|
||||
<ListItem v-for="item in data1" :key="item">
|
||||
{{ item }}
|
||||
<!-- <h2>small size</h2>-->
|
||||
<!-- <List header="Header" footer="Footer" size="small" :split="false">-->
|
||||
<!-- <ListItem v-for="item in data1" :key="item">-->
|
||||
<!-- {{ item }}-->
|
||||
<!-- </ListItem>-->
|
||||
<!-- </List>-->
|
||||
<!-- <h2>default size</h2>-->
|
||||
<!-- <List header="Header" footer="Footer">-->
|
||||
<!-- <ListItem v-for="item in data1" :key="item">-->
|
||||
<!-- {{ item }}-->
|
||||
<!-- </ListItem>-->
|
||||
<!-- </List>-->
|
||||
<!-- <h2>large size</h2>-->
|
||||
<!-- <List header="Header" footer="Footer" border size="large">-->
|
||||
<!-- <ListItem v-for="item in data1" :key="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>
|
||||
</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.-->
|
||||
<!--<!– <template slot="action">–>-->
|
||||
<!--<!– <li>–>-->
|
||||
<!--<!– <Icon type="ios-star-outline" /> 156–>-->
|
||||
<!--<!– </li>–>-->
|
||||
<!--<!– <li>–>-->
|
||||
<!--<!– <Icon type="ios-thumbs-up-outline" /> 156–>-->
|
||||
<!--<!– </li>–>-->
|
||||
<!--<!– <li>–>-->
|
||||
<!--<!– <Icon type="ios-chatbubbles-outline" /> 10–>-->
|
||||
<!--<!– </li>–>-->
|
||||
<!--<!– </template>–>-->
|
||||
<!-- </ListItem>-->
|
||||
<!-- </List>-->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -34,6 +83,33 @@
|
|||
'Australian walks 100km after outback crash.',
|
||||
'Man charged over missing wedding girl.',
|
||||
'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'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,36 @@
|
|||
<template>
|
||||
<li class="ivu-list-item">
|
||||
<li class="ivu-list-item" :class="classes">
|
||||
<slot></slot>
|
||||
<ul class="ivu-list-item-action" v-if="$slots.action">
|
||||
<slot name="action"></slot>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ListItem',
|
||||
inject: ['ListInstance'],
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="ivu-list-container">
|
||||
<ul class="ivu-list-items"><slot></slot></ul>
|
||||
</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>
|
||||
</template>
|
||||
|
|
@ -15,6 +15,11 @@
|
|||
|
||||
export default {
|
||||
name: 'List',
|
||||
provide () {
|
||||
return {
|
||||
ListInstance: this
|
||||
};
|
||||
},
|
||||
props: {
|
||||
border: {
|
||||
type: Boolean,
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
flex: 1 0;
|
||||
}
|
||||
&-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
|
|
@ -65,18 +66,28 @@
|
|||
line-height: 22px;
|
||||
text-align: center;
|
||||
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 {
|
||||
padding-left: 0;
|
||||
}
|
||||
& > li:last-child {
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&-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 {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue