From 1f95a509b4b63bbf77ae442fc4d7595d72698736 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Wed, 14 Nov 2018 10:25:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9render=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 8cfcd3419c9b44e3edeb067671e3a0749d0f12ac [formerly 8cfcd3419c9b44e3edeb067671e3a0749d0f12ac [formerly 8cfcd3419c9b44e3edeb067671e3a0749d0f12ac [formerly 8cfcd3419c9b44e3edeb067671e3a0749d0f12ac [formerly 356bf94f5b44639d7234152de4ef3bcc661c8c1e [formerly 77a8e78b328f3bf242836af112ee9a44ee6da70a]]]]]
Former-commit-id: bb21dd6f8094541e6327de7d0b2a4f7aa8e9bd86
Former-commit-id: 64e39323bb4dff4094351421bf4276a7c6ef2dff
Former-commit-id: 8a99e9722e048ae344ea945e9370d92b4fa79f67 [formerly ef6332b0ef63c44e6497abb5a543c793e4f32671]
Former-commit-id: f1bf22bb6937aa327c1669fb085e33d58724ec76
Former-commit-id: 1d17a9877444121a766c4a18e15478c8763971d9
Former-commit-id: f65356f950b93b6322964aa69bdc4201368041e9
Former-commit-id: 52ee7737fbae59a6d259f8230c1f0a735981633f
Former-commit-id: 1acd5a9f5a29173099da32ae47f5357bb7313e5e
---
 src/components/d2-container/index.vue | 89 ++++++++++++---------------
 1 file changed, 40 insertions(+), 49 deletions(-)

diff --git a/src/components/d2-container/index.vue b/src/components/d2-container/index.vue
index 425b5275..b72e29cc 100644
--- a/src/components/d2-container/index.vue
+++ b/src/components/d2-container/index.vue
@@ -1,44 +1,3 @@
-<template>
-  <div class="container-component" ref="container">
-    <!-- [card] 卡片容器 -->
-    <d2-container-card v-bind="$attrs" v-if="type === 'card' && !betterScroll" @scroll="e => this.$emit('scroll', e)">
-      <slot v-if="$slots.header" name="header" slot="header"/>
-      <slot/>
-      <slot v-if="$slots.footer" name="footer" slot="footer"/>
-    </d2-container-card>
-    <!-- [card] 卡片容器 滚动优化 -->
-    <d2-container-card-bs v-bind="$attrs" v-if="type === 'card' && betterScroll">
-      <slot v-if="$slots.header" name="header" slot="header"/>
-      <slot/>
-      <slot v-if="$slots.footer" name="footer" slot="footer"/>
-    </d2-container-card-bs>
-    <!-- [ghost] 隐形容器 -->
-    <d2-container-ghost v-bind="$attrs" v-if="type === 'ghost' && !betterScroll" @scroll="e => this.$emit('scroll', e)">
-      <slot v-if="$slots.header" name="header" slot="header"/>
-      <slot/>
-      <slot v-if="$slots.footer" name="footer" slot="footer"/>
-    </d2-container-ghost>
-    <!-- [ghost] 隐形容器 滚动优化 -->
-    <d2-container-ghost-bs v-bind="$attrs" v-if="type === 'ghost' && betterScroll">
-      <slot v-if="$slots.header" name="header" slot="header"/>
-      <slot/>
-      <slot v-if="$slots.footer" name="footer" slot="footer"/>
-    </d2-container-ghost-bs>
-    <!-- [container-full] 填充 -->
-    <d2-container-full v-bind="$attrs" v-if="type === 'full' && !betterScroll" @scroll="e => this.$emit('scroll', e)">
-      <slot v-if="$slots.header" name="header" slot="header"/>
-      <slot/>
-      <slot v-if="$slots.footer" name="footer" slot="footer"/>
-    </d2-container-full>
-    <!-- [container-full-bs] 填充 滚动优化 -->
-    <d2-container-full-bs v-bind="$attrs" v-if="type === 'full' && betterScroll">
-      <slot v-if="$slots.header" name="header" slot="header"/>
-      <slot/>
-      <slot v-if="$slots.footer" name="footer" slot="footer"/>
-    </d2-container-full-bs>
-  </div>
-</template>
-
 <script>
 // 组件
 import d2ContainerFull from './components/d2-container-full.vue'
@@ -49,21 +8,53 @@ import d2ContainerCard from './components/d2-container-card.vue'
 import d2ContainerCardBs from './components/d2-container-card-bs.vue'
 export default {
   name: 'd2-container',
-  components: {
-    'd2-container-full': d2ContainerFull,
-    'd2-container-full-bs': d2ContainerFullBs,
-    'd2-container-ghost': d2ContainerGhost,
-    'd2-container-ghost-bs': d2ContainerGhostBs,
-    'd2-container-card': d2ContainerCard,
-    'd2-container-card-bs': d2ContainerCardBs
-  },
   props: {
     // 容器样式
     type: {
       type: String,
       required: false,
       default: 'full'
+    },
+    // 滚动优化
+    betterScroll: {
+      type: Boolean,
+      required: false,
+      default: false
     }
+  },
+  computed: {
+    // 始终返回渲染组件
+    component () {
+      if (this.type === 'card' && !this.betterScroll) return d2ContainerCard
+      if (this.type === 'card' && this.betterScroll) return d2ContainerCardBs
+      if (this.type === 'ghost' && !this.betterScroll) return d2ContainerGhost
+      if (this.type === 'ghost' && this.betterScroll) return d2ContainerGhostBs
+      if (this.type === 'full' && !this.betterScroll) return d2ContainerFull
+      if (this.type === 'full' && this.betterScroll) return d2ContainerFullBs
+      else {
+        return 'div'
+      }
+    }
+  },
+  render (h) {
+    const slots = [
+      h('div', this.$slots.default)
+    ]
+    if (this.$slots.header) slots.push(h('div', { slot: 'header' }, [ this.$slots.header ]))
+    if (this.$slots.footer) slots.push(h('div', { slot: 'footer' }, [ this.$slots.footer ]))
+    return h('div', {
+      ref: 'container',
+      attrs: {
+        'class': 'container-component'
+      }
+    }, [
+      h(this.component, {
+        props: this.$attrs,
+        on: {
+          scroll: e => this.$emit('scroll', e)
+        }
+      }, slots)
+    ])
   }
 }
 </script>