From 4d4b814baa615c0e415cdad0343745517cde856d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Sat, 8 Jun 2019 16:29:19 +0800
Subject: [PATCH] update List

---
 examples/routers/list.vue         | 93 ++++++++++++++++---------------
 src/components/list/list-item.vue | 41 +++++++++++---
 2 files changed, 82 insertions(+), 52 deletions(-)

diff --git a/examples/routers/list.vue b/examples/routers/list.vue
index 82ca54df..fb674ba7 100644
--- a/examples/routers/list.vue
+++ b/examples/routers/list.vue
@@ -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>
diff --git a/src/components/list/list-item.vue b/src/components/list/list-item.vue
index c48a4d56..e9760071 100644
--- a/src/components/list/list-item.vue
+++ b/src/components/list/list-item.vue
@@ -1,9 +1,25 @@
 <template>
     <li class="ivu-list-item" :class="classes">
-        <slot></slot>
-        <ul class="ivu-list-item-action" v-if="$slots.action">
-            <slot name="action"></slot>
-        </ul>
+        <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 [