update List
This commit is contained in:
梁灏
parent
c501f03c9d
commit
4d4b814baa
2 changed files with 82 additions and 52 deletions
|
|
@ -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.-->
|
||||
<!--<!– <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>-->
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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 [
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue