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/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] 隐形的容器 -->
-    <d2-container-ghost v-if="type === 'ghost'">
+    <!-- [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 {