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> <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>--> </ListItem>
<!-- </List>--> </List>
<!-- <Divider>没有 </Divider>--> <Divider>没有 </Divider>
<!-- <List>--> <List>
<!-- <ListItem v-for="item in data2" :key="item.title">--> <ListItem v-for="item in data2" :key="item.title">
<!-- <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">--> <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">
<!-- </ListItemMeta>--> </ListItemMeta>
<!-- 一段内容--> 一段内容
<!-- </ListItem>--> </ListItem>
<!-- </List>--> </List>
<Divider>带有 Action</Divider> <Divider>带有 Action</Divider>
@ -50,26 +50,29 @@
</ListItem> </ListItem>
</List> </List>
<!-- <Divider>带图片</Divider>--> <Divider>带图片</Divider>
<!-- <List item-layout="vertical">--> <List item-layout="vertical">
<!-- <ListItem v-for="item in data2" :key="item.title">--> <ListItem v-for="item in data2" :key="item.title">
<!-- <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">--> <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">
<!-- </ListItemMeta>--> </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.--> 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;--> <template slot="action">
<!--&lt;!&ndash; <li>&ndash;&gt;--> <li>
<!--&lt;!&ndash; <Icon type="ios-star-outline" /> 156&ndash;&gt;--> <Icon type="ios-star-outline" /> 156
<!--&lt;!&ndash; </li>&ndash;&gt;--> </li>
<!--&lt;!&ndash; <li>&ndash;&gt;--> <li>
<!--&lt;!&ndash; <Icon type="ios-thumbs-up-outline" /> 156&ndash;&gt;--> <Icon type="ios-thumbs-up-outline" /> 156
<!--&lt;!&ndash; </li>&ndash;&gt;--> </li>
<!--&lt;!&ndash; <li>&ndash;&gt;--> <li>
<!--&lt;!&ndash; <Icon type="ios-chatbubbles-outline" /> 10&ndash;&gt;--> <Icon type="ios-chatbubbles-outline" /> 10
<!--&lt;!&ndash; </li>&ndash;&gt;--> </li>
<!--&lt;!&ndash; </template>&ndash;&gt;--> </template>
<!-- </ListItem>--> <template slot="extra">
<!-- </List>--> <img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
</template>
</ListItem>
</List>
</div> </div>
</template> </template>

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

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