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 16:29:19 +08:00
parent c501f03c9d
commit 4d4b814baa
2 changed files with 82 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
examples/routers/list.vue
View file

@ -1,33 +1,33 @@
<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 }}-->
<!-- </ListItem>-->
<!-- </List>-->
<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>-->
<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>-->
<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>
@ -50,26 +50,29 @@
</ListItem>
</List>
<!-- <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">-->
<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>-->
</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>
<template slot="extra">
<img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
</template>
</ListItem>
</List>
</div>
</template>

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

@ -1,9 +1,25 @@
<template>
<li class="ivu-list-item" :class="classes">
<template v-if="itemLayout === 'vertical' && $slots.extra">
<div class="ivu-list-item-main">
<slot></slot>
<ul class="ivu-list-item-action" v-if="$slots.action">
<slot name="action"></slot>
</ul>
</div>
<div class="ivu-list-item-extra">
<slot name="extra"></slot>
</div>
</template>
<template v-else>
<slot></slot>
<ul class="ivu-list-item-action" v-if="$slots.action">
<slot name="action"></slot>
</ul>
<div class="ivu-list-item-extra">
<slot name="extra"></slot>
</div>
</template>
</li>
</template>
<script>
@ -14,15 +30,26 @@
},
computed: {
itemLayout () {
return this.ListInstance.itemLayout;
},
isItemContainsTextNode () {
let result;
this.$slots.default.forEach(item => {
if (typeof item === 'string') {
result = true;
}
});
return result;
},
isFlexMode () {
const extra = this.$slots.extra;
const itemLayout = this.ListInstance.itemLayout;
if (itemLayout === 'vertical') {
if (this.itemLayout === 'vertical') {
return !!extra;
}
return !this.$slots.default;
return !this.isItemContainsTextNode;
},
classes () {
return [