完善

Former-commit-id: e0a5e4a4954423d50cdaa57f5fc8057a8e3ef215 [formerly e0a5e4a4954423d50cdaa57f5fc8057a8e3ef215 [formerly e0a5e4a4954423d50cdaa57f5fc8057a8e3ef215 [formerly e0a5e4a4954423d50cdaa57f5fc8057a8e3ef215 [formerly 1fc51a4e117247b0023f0e25927608f4f9281f67 [formerly 9ebd9ea8b0b21cae36b356753fe9d50003145af2]]]]] Former-commit-id: 1c4e3edd31787a549cedfa4c1e2fd9ba83b6a89e Former-commit-id: 4ea6de6f61f38ad46e18e0f601fac6d7505bc466 Former-commit-id: 2bc2130cc0f60ae8eb85b5a7f492d60a754f0a9f [formerly f80a034694a85866c30c0b0fb0fc9f5267fcd56d] Former-commit-id: 77bfe482382b14bd6e320becc9b671edcefd0727 Former-commit-id: a2e7ffd516054bb3603df2bae1f3dec360fdf737 Former-commit-id: 022d5c397a13dbc64e12ce60ece22a5a0a08b943 Former-commit-id: 66714b48a3530aa104bcca4b7540fecb05a8d3ff Former-commit-id: 43ff1e93723f72f632212a61c9d9f779cfceb7a3
2018-07-21 14:13:25 +08:00
parent 852b39b28c
commit a16c62e5a4
16 changed files with 71 additions and 412 deletions
--- a/src/assets/style/theme/theme-base.scss
+++ b/src/assets/style/theme/theme-base.scss
@@ -1,351 +0,0 @@
-// 整体框架结构
-.d2-layout-header-aside-group {
-  height: 100%;
-  width: 100%;
-  min-width: 900px;
-  background-size: cover;
-  background-position: center;
-  overflow: hidden;
-  position: relative;
-  // 背景上面的半透明遮罩
-  .d2-layout-header-aside-mask {
-    @extend %full;
-  }
-  // 内容层
-  .d2-layout-header-aside-content {
-    @extend %full;
-    $d2-theme-header-height: 60px;
-    .d2-theme-header {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      right: 0px;
-      height: $d2-theme-header-height;
-    }
-    .d2-theme-container {
-      position: absolute;
-      top: $d2-theme-header-height;
-      bottom: 0px;
-      left: 0px;
-      right: 0px;
-      display: flex;
-      flex-direction: row;
-      .d2-theme-container-aside {
-        transition: width .3s;
-        flex-grow: 0;
-        position: relative;
-        .d2-layout-header-aside-menu-side {
-          @extend %full;
-          overflow: hidden;
-        }
-      }
-      .d2-theme-container-main {
-        flex-grow: 1;
-        padding: 0px;
-        position: relative;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        .d2-theme-container-main-header {
-          flex-grow: 0;
-        }
-        .d2-theme-container-main-body {
-          flex-grow: 1;
-          margin-top: 1px;
-          position: relative;
-        }
-      }
-    }
-  }
-}
-
-
-
-
-
-
-
-
-// 主题公用
-.d2-layout-header-aside-group {
-  &.grayMode {
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
-    filter: grayscale(100%);
-    filter: gray;
-  }
-  // 主体
-  .d2-layout-header-aside-content {
-    // [布局] 顶栏
-    .d2-theme-header {
-      // logo区域
-      .logo-group {
-        transition: width .3s;
-        float: left;
-        text-align: center;
-        img {
-          height: 60px;
-        }
-      }
-      // 折叠侧边栏切换按钮
-      .toggle-aside-btn {
-        float: left;
-        height: 60px;
-        width: 60px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        @extend %unable-select;
-        i {
-          font-size: 20px;
-          margin-top: 4px;
-        }
-      }
-      // [菜单] 顶栏
-      .el-menu {
-        float: left;
-        border-bottom: none;
-        background-color: transparent;
-        %header-menu-item {
-          @extend %unable-select;
-          i.fa {
-            font-size: 16px;
-            margin-right: 4px;
-          }
-        }
-        .el-menu-item {
-          @extend %header-menu-item;
-          border-bottom: none;
-        }
-        .el-submenu {
-          @extend %header-menu-item;
-          .el-submenu__title {
-            border-bottom: none;
-          }
-        }
-      }
-      // 顶栏右侧的按钮
-      .d2-header-right {
-        float: right;
-        height: 60px;
-        display: flex;
-        align-items: center;
-        .btn-text {
-          padding: 14px 12px;
-          border-radius: 4px;
-          margin: 0px !important;
-          margin-left: 10px !important;
-        }
-        .el-dropdown {
-          @extend %unable-select;
-        }
-      }
-    }
-    // [布局] 顶栏下面
-    .d2-theme-container {
-      // 侧边栏
-      .d2-theme-container-aside {
-        %d2-theme-container-aside-menu-icon {
-          width: 20px;
-          text-align: center;
-          font-size: 16px;
-        }
-        // [菜单] 正常状态
-        .el-menu {
-          @extend %unable-select;
-          background-color: transparent;
-          border-right: none;
-          .el-menu-item {
-            i {
-              @extend %d2-theme-container-aside-menu-icon;
-            }
-          }
-        }
-        .el-submenu {
-          @extend %unable-select;
-          .el-submenu__title {
-            i {
-              @extend %d2-theme-container-aside-menu-icon;
-            }
-            .el-submenu__icon-arrow {
-              margin-top: -10px;
-            }
-          }
-        }
-        // 菜单为空的时候显示的信息
-        .d2-layout-header-aside-menu-empty {
-          height: 160px;
-          margin: 10px;
-          margin-top: 0px;
-          border-radius: 4px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
-          @extend %unable-select;
-          i {
-            font-size: 30px;
-            margin-bottom: 10px;
-          }
-          span {
-            font-size: 14px;
-          }
-        }
-        // [菜单] 折叠状态
-        .el-menu--collapse {
-          background-color: transparent;
-          .el-submenu__title {
-            text-align: center;
-          }
-        }
-      }
-      // 右下 主体
-      .d2-theme-container-main {
-        // 主体部分分为多页面控制器 和主体
-        .d2-theme-container-main-header {
-          // 多页面控制器
-          .d2-multiple-page-control-group {
-            display: flex;
-            margin-right: 20px;
-            .d2-multiple-page-control-content {
-              flex-grow: 1;
-              position: relative;
-              .d2-multiple-page-control-content-inner {
-                position: absolute;
-                left: 0px;
-                right: 0px;
-                .d2-multiple-page-control {
-                  .el-tabs__header.is-top {
-                    margin: 0px;
-                  }
-                  .el-tabs__nav {
-                    overflow: hidden;
-                  }
-                }
-              }
-            }
-            .d2-multiple-page-control-btn {
-              position: relative;
-              bottom: -1px;
-              .el-dropdown {
-                .el-button-group {
-                  .el-button:first-child {
-                    border-bottom-left-radius: 0px;
-                  }
-                  .el-button:last-child {
-                    border-bottom-right-radius: 0px;
-                  }
-                }
-              }
-            }
-          }
-        }
-        // 主体
-        .d2-theme-container-main-body {
-          // 布局组件
-          .container-component {
-            @extend %full;
-            overflow: hidden;
-            // 填充式布局组件
-            .d2-container-full {
-              position: absolute;
-              top: 0px;
-              right: 20px;
-              bottom: 0px;
-              left: 0px;
-              display: flex;
-              flex-direction: column;
-              overflow: hidden;
-              .d2-container-full__header {
-                padding: 20px;
-              }
-              .d2-container-full__body {
-                flex-grow: 1;
-                padding: 20px 20px;
-                overflow: auto;
-                position: relative;
-              }
-              .d2-container-full__footer {
-                padding: 20px;
-              }
-            }
-            // 填充式布局组件 - 滚动优化
-            .d2-container-full-bs {
-              position: absolute;
-              top: 0px;
-              right: 20px;
-              bottom: 0px;
-              left: 0px;
-              display: flex;
-              flex-direction: column;
-              overflow: hidden;
-              .d2-container-full-bs__header {
-                padding: 20px;
-              }
-              .d2-container-full-bs__body {
-                flex-grow: 1;
-                padding: 0px 20px;
-                overflow: hidden;
-                position: relative;
-              }
-              .d2-container-full-bs__footer {
-                padding: 20px;
-              }
-            }
-            // 卡片布局组件
-            .d2-container-card {
-              border-top-left-radius: 0px;
-              border-top-right-radius: 0px;
-            }
-            // 隐形布局组件
-            .d2-container-ghost {
-              position: absolute;
-              top: 0px;
-              right: 20px;
-              bottom: 0px;
-              left: 0px;
-              display: flex;
-              flex-direction: column;
-              overflow: hidden;
-              .d2-container-ghost__header {
-                padding: 20px;
-              }
-              .d2-container-ghost__body {
-                flex-grow: 1;
-                overflow: auto;
-                position: relative;
-              }
-              .d2-container-ghost__footer {
-                padding: 20px;
-              }
-            }
-            // 隐形布局组件 - 滚动优化
-            .d2-container-ghost-bs {
-              position: absolute;
-              top: 0px;
-              right: 20px;
-              bottom: 0px;
-              left: 0px;
-              display: flex;
-              flex-direction: column;
-              overflow: hidden;
-              .d2-container-ghost-bs__header {
-                padding: 20px;
-              }
-              .d2-container-ghost-bs__body {
-                flex-grow: 1;
-                overflow: hidden;
-                position: relative;
-              }
-              .d2-container-ghost-bs__footer {
-                padding: 20px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/assets/style/theme/theme-base.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
@@ -0,0 +1 @@
+442203ddfcebd9494b61aab71c064cdf6f45377f
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-865c9e62f0aee9a80f8771622b383a3273c790f3
+e9c21181f6bfd3c3600762179287cf8f81f5e2fc
--- a/src/components/core/d2-container/components/d2-container-card.vue
+++ b/src/components/core/d2-container/components/d2-container-card.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="d2-container-card">
+    <div v-if="$slots.header" class="d2-container-card__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-card__body">
+      <div class="d2-container-card__body-inner">
+        <slot/>
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-card__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'd2-container-card'
+}
+</script>
--- a/src/components/core/d2-container/index.vue
+++ b/src/components/core/d2-container/index.vue
@@ -1,10 +1,11 @@
 <template>
  <div class="container-component" ref="container">
    <!-- [card] 卡片容器 -->
-    <el-card v-if="type === 'card'" shadow="never" class="d2-container-card d2-mr">
+    <d2-container-card v-if="type === 'card' && !scroll">
      <slot v-if="$slots.header" name="header" slot="header"/>
      <slot/>
-    </el-card>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-card>
    <!-- [ghost] 隐形容器 -->
    <d2-container-ghost v-if="type === 'ghost' && !scroll">
      <slot v-if="$slots.header" name="header" slot="header"/>
@@ -33,13 +34,12 @@
 </template>

 <script>
-// 插件
-import BScroll from 'better-scroll'
 // 组件
 import d2ContainerFull from './components/d2-container-full.vue'
 import d2ContainerFullBs from './components/d2-container-full-bs.vue'
 import d2ContainerGhost from './components/d2-container-ghost.vue'
 import d2ContainerGhostBs from './components/d2-container-ghost-bs.vue'
+import d2ContainerCard from './components/d2-container-card.vue'
 export default {
  name: 'd2-container',
  props: {
@@ -60,38 +60,8 @@ export default {
    'd2-container-full': d2ContainerFull,
    'd2-container-full-bs': d2ContainerFullBs,
    'd2-container-ghost': d2ContainerGhost,
-    'd2-container-ghost-bs': d2ContainerGhostBs
-  },
-  data () {
-    return {
-      BS: null
-    }
-  },
-  mounted () {
-    if (this.type === 'card') {
-      this.scrollInit()
-    }
-  },
-  beforeDestroy () {
-    if (this.type === 'card') {
-      this.scrollDestroy()
-    }
-  },
-  methods: {
-    scrollInit () {
-      this.BS = new BScroll(this.$refs.container, {
-        mouseWheel: true,
-        scrollbar: {
-          fade: true,
-          interactive: false
-        }
-      })
-    },
-    scrollDestroy () {
-      if (this.BS) {
-        this.BS.destroy()
-      }
-    }
+    'd2-container-ghost-bs': d2ContainerGhostBs,
+    'd2-container-card': d2ContainerCard
  }
 }
 </script>
--- a/src/menu/modules/demo-components.js
+++ b/src/menu/modules/demo-components.js
@@ -15,7 +15,8 @@ export default {
        { path: `${pre}container/ghost`, title: '隐形' },
        { path: `${pre}container/ghost-slot`, title: '隐形 插槽' },
        { path: `${pre}container/ghost-bs`, title: '隐形 滚动优化' },
-        { path: `${pre}container/card`, title: '卡片' }
+        { path: `${pre}container/card`, title: '卡片' },
+        { path: `${pre}container/card-slot`, title: '卡片 插槽' }
      ]
    },
    {
--- a/src/pages/demo/components/container/card-slot.vue
+++ b/src/pages/demo/components/container/card-slot.vue
@@ -0,0 +1,18 @@
+<template>
+  <d2-container type="card">
+    <template slot="header">header</template>
+    <d2-markdown :source="long"/>
+    <template slot="footer">footer</template>
+  </d2-container>
+</template>
+
+<script>
+import long from './md/long.md'
+export default {
+  data () {
+    return {
+      long
+    }
+  }
+}
+</script>
--- a/src/pages/demo/components/container/card.vue
+++ b/src/pages/demo/components/container/card.vue
@@ -1,16 +1,15 @@
 <template>
  <d2-container type="card">
-    <template slot="header">我是插入到 header 中的内容</template>
-    <d2-markdown :source="doc"/>
+    <d2-markdown :source="long"/>
  </d2-container>
 </template>

 <script>
-import doc from './md/doc.md'
+import long from './md/long.md'
 export default {
  data () {
    return {
-      doc
+      long
    }
  }
 }
--- a/src/pages/demo/components/container/full-bs.vue
+++ b/src/pages/demo/components/container/full-bs.vue
@@ -1,17 +1,17 @@
 <template>
  <d2-container scroll>
    <template slot="header">header</template>
-    <d2-markdown :source="doc"/>
+    <d2-markdown :source="long"/>
    <template slot="footer">header</template>
  </d2-container>
 </template>

 <script>
-import doc from './md/doc.md'
+import long from './md/long.md'
 export default {
  data () {
    return {
-      doc
+      long
    }
  }
 }
--- a/src/pages/demo/components/container/full-slot.vue
+++ b/src/pages/demo/components/container/full-slot.vue
@@ -1,17 +1,17 @@
 <template>
  <d2-container>
    <template slot="header">header</template>
-    <d2-markdown :source="doc"/>
+    <d2-markdown :source="long"/>
    <template slot="footer">footer</template>
  </d2-container>
 </template>

 <script>
-import doc from './md/doc.md'
+import long from './md/long.md'
 export default {
  data () {
    return {
-      doc
+      long
    }
  }
 }
--- a/src/pages/demo/components/container/full.vue
+++ b/src/pages/demo/components/container/full.vue
@@ -1,15 +1,15 @@
 <template>
  <d2-container>
-    <d2-markdown :source="doc"/>
+    <d2-markdown :source="long"/>
  </d2-container>
 </template>

 <script>
-import doc from './md/doc.md'
+import long from './md/long.md'
 export default {
  data () {
    return {
-      doc
+      long
    }
  }
 }
--- a/src/pages/demo/components/container/ghost-bs.vue
+++ b/src/pages/demo/components/container/ghost-bs.vue
@@ -3,7 +3,7 @@
    <template slot="header">header</template>
    <div class="d2-pt d2-pb">
      <el-card shadow="never" style="width: 600px;">
-        <d2-markdown :source="doc"/>
+        <d2-markdown :source="long"/>
      </el-card>
    </div>
    <template slot="footer">footer</template>
@@ -11,11 +11,11 @@
 </template>

 <script>
-import doc from './md/doc.md'
+import long from './md/long.md'
 export default {
  data () {
    return {
-      doc
+      long
    }
  }
 }
--- a/src/pages/demo/components/container/ghost-slot.vue
+++ b/src/pages/demo/components/container/ghost-slot.vue
@@ -3,7 +3,7 @@
    <template slot="header">header</template>
    <div class="d2-pt d2-pb">
      <el-card shadow="never" style="width: 600px;">
-        <d2-markdown :source="doc"/>
+        <d2-markdown :source="long"/>
      </el-card>
    </div>
    <template slot="footer">footer</template>
@@ -11,11 +11,11 @@
 </template>

 <script>
-import doc from './md/doc.md'
+import long from './md/long.md'
 export default {
  data () {
    return {
-      doc
+      long
    }
  }
 }
--- a/src/pages/demo/components/container/ghost.vue
+++ b/src/pages/demo/components/container/ghost.vue
@@ -2,18 +2,18 @@
  <d2-container type="ghost">
    <div class="d2-pt d2-pb">
      <el-card shadow="never" style="width: 600px;">
-        <d2-markdown :source="doc"/>
+        <d2-markdown :source="long"/>
      </el-card>
    </div>
  </d2-container>
 </template>

 <script>
-import doc from './md/doc.md'
+import long from './md/long.md'
 export default {
  data () {
    return {
-      doc
+      long
    }
  }
 }
--- a/src/pages/demo/components/container/md/long.md
+++ b/src/pages/demo/components/container/md/long.md
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-e4b510400fdb77d9d6d4489f26a59c847644472a
+88c2df46092ca2d7bd7ea1d9422e6e825605027a