ghost-bs

Former-commit-id: a45138a84dbe63cbe9886eb0c02dcd40dca6905c [formerly a45138a84dbe63cbe9886eb0c02dcd40dca6905c [formerly a45138a84dbe63cbe9886eb0c02dcd40dca6905c [formerly a45138a84dbe63cbe9886eb0c02dcd40dca6905c [formerly 94b9665f7a53c7c65e15b070df56c618f7c8002c [formerly 09fa2a15ac336655d07124a98c2add929966564e]]]]]
Former-commit-id: 1708b36d8de5f8e2200a0bf0971cc21fcfb2f3d2
Former-commit-id: 15b72d5ea159c15423bf1c268d757944ccfa5429
Former-commit-id: 110be7d5ae87932f25a2c700f53541fd61c98369 [formerly 546751449db305a212a6eab1ef01f96b1567302b]
Former-commit-id: 9da97a890e329f4ec7bd090c10a5948a1fca8ab1
Former-commit-id: 29baecd27f00e8a185cc243ef6f5e2ad60f7a061
Former-commit-id: d70d32aea25f1638064da3408cb36439ff8bb0dd
Former-commit-id: 5f059cb4e29645422f392bec07d5bd5ee45c8a3b
Former-commit-id: 8b8ad9fcd0e50aacfae11c03eddd8f2fc1076105

src/assets/style/theme/theme-base.scss

@@ -321,6 +321,28 @@
                 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;
+              }
+            }
           }
         }
       }

src/assets/style/theme/theme.scss.REMOVED.git-id

@@ -1 +1 @@
-9007ccbb78f811d506e941aa3ac902e2aca4b106
+865c9e62f0aee9a80f8771622b383a3273c790f3

src/components/core/d2-container/components/d2-container-full-bs.vue

@@ -15,9 +15,7 @@
 </template>
 
 <script>
-// 插件
 import BScroll from 'better-scroll'
-
 export default {
   name: 'd2-container-full-bs',
   data () {

src/components/core/d2-container/components/d2-container-ghost-bs.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="d2-container-ghost-bs">
+    <div v-if="$slots.header" class="d2-container-ghost-bs__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-ghost-bs__body" ref="wrapper">
+      <slot/>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-ghost-bs__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from 'better-scroll'
+export default {
+  name: 'd2-container-ghost-bs',
+  data () {
+    return {
+      BS: null
+    }
+  },
+  mounted () {
+    this.scrollInit()
+  },
+  beforeDestroy () {
+    this.scrollDestroy()
+  },
+  methods: {
+    scrollInit () {
+      this.BS = new BScroll(this.$refs.wrapper, {
+        mouseWheel: true,
+        scrollbar: {
+          fade: true,
+          interactive: false
+        }
+      })
+    },
+    scrollDestroy () {
+      if (this.BS) {
+        this.BS.destroy()
+      }
+    }
+  }
+}
+</script>

src/components/core/d2-container/index.vue

@@ -5,12 +5,18 @@
       <slot v-if="$slots.header" name="header" slot="header"/>
       <slot/>
     </el-card>
-    <!-- [ghost] 隐形的容器 -->
+    <!-- [ghost] 隐形容器 -->
-    <d2-container-ghost v-if="type === 'ghost'">
+    <d2-container-ghost v-if="type === 'ghost' && !scroll">
       <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-if="type === 'ghost' && scroll">
+      <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-if="type === 'full' && !scroll">
       <slot v-if="$slots.header" name="header" slot="header"/>
@@ -33,6 +39,7 @@ 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'
 export default {
   name: 'd2-container',
   props: {
@@ -52,7 +59,8 @@ export default {
   components: {
     'd2-container-full': d2ContainerFull,
     'd2-container-full-bs': d2ContainerFullBs,
-    'd2-container-ghost': d2ContainerGhost
+    'd2-container-ghost': d2ContainerGhost,
+    'd2-container-ghost-bs': d2ContainerGhostBs
   },
   data () {
     return {

src/menu/modules/demo-components.js

@@ -14,6 +14,7 @@ export default {
         { path: `${pre}container/full-bs`, title: '填充 滚动优化' },
         { path: `${pre}container/ghost`, title: '隐形' },
         { path: `${pre}container/ghost-slot`, title: '隐形 插槽' },
+        { path: `${pre}container/ghost-bs`, title: '隐形 滚动优化' },
         { path: `${pre}container/card`, title: '卡片' }
       ]
     },

src/pages/demo/components/container/full-bs.vue

@@ -1,12 +1,8 @@
 <template>
   <d2-container scroll>
-    <template slot="header">
+    <template slot="header">header</template>
-      我是插入到 header 中的内容
-    </template>
     <d2-markdown :source="doc"/>
-    <template slot="footer">
+    <template slot="footer">header</template>
-      <d2-link-btn title="D2Admin" link="https://github.com/d2-projects/d2-admin"/>
-    </template>
   </d2-container>
 </template>
 

src/pages/demo/components/container/ghost-bs.vue

@@ -0,0 +1,22 @@
+<template>
+  <d2-container type="ghost" scroll>
+    <template slot="header">header</template>
+    <div class="d2-pt d2-pb">
+      <el-card shadow="never" style="width: 600px;">
+        <d2-markdown :source="doc"/>
+      </el-card>
+    </div>
+    <template slot="footer">footer</template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './md/doc.md'
+export default {
+  data () {
+    return {
+      doc
+    }
+  }
+}
+</script>

src/pages/demo/components/container/ghost-slot.vue

@@ -1,10 +1,12 @@
 <template>
   <d2-container type="ghost">
-    <template slot="header">隐形页面容器 header</template>
+    <template slot="header">header</template>
-    <el-card shadow="never" class="d2-mt d2-mb" style="width: 400px;">
+    <div class="d2-pt d2-pb">
-      <d2-markdown :source="doc"/>
+      <el-card shadow="never" style="width: 600px;">
-    </el-card>
+        <d2-markdown :source="doc"/>
-    <template slot="footer">隐形页面容器 footer</template>
+      </el-card>
+    </div>
+    <template slot="footer">footer</template>
   </d2-container>
 </template>
 

src/pages/demo/components/container/ghost.vue

@@ -1,8 +1,10 @@
 <template>
   <d2-container type="ghost">
-    <el-card shadow="never" class="d2-mt d2-mb" style="width: 400px;">
+    <div class="d2-pt d2-pb">
-      <d2-markdown :source="doc"/>
+      <el-card shadow="never" style="width: 600px;">
-    </el-card>
+        <d2-markdown :source="doc"/>
+      </el-card>
+    </div>
   </d2-container>
 </template>
 

src/router/routes.js.REMOVED.git-id

@@ -1 +1 @@
-81f6e5ee660a2f3bb538685b20c34e46f1bd5690
+e4b510400fdb77d9d6d4489f26a59c847644472a