card-bs

Former-commit-id: 6de2fd0ecd248346d5d11c082d39dce6a53b9cd2 [formerly 6de2fd0ecd248346d5d11c082d39dce6a53b9cd2 [formerly 6de2fd0ecd248346d5d11c082d39dce6a53b9cd2 [formerly 6de2fd0ecd248346d5d11c082d39dce6a53b9cd2 [formerly b57d4d8d6d3a1f0d272b0403a6ae8c9ad8e63900 [formerly 5153a7ccadbe584ba05d70c72c4aa05de8791ff7]]]]]
Former-commit-id: aa1884bc49a83014102224c523a18af93d9e6ba2
Former-commit-id: ce5f1363a4baa7b8af232a9f61ba999fc6f7b724
Former-commit-id: d0ce7cc910fc4f081495694d131e735438e5eef9 [formerly f73f94a7b840e38e1291833651223fc17cae25f3]
Former-commit-id: a4275db733c09bc9042eca5593561e86d481b92e
Former-commit-id: cd5da623baf61c1a2cdf234e4f425f7de049c180
Former-commit-id: 2248bea6688dae9bba2b21f0947522661762ddd1
Former-commit-id: 82f5352d821e5f8c64279b53e1188c8b9ec72ad6
Former-commit-id: 84035c7bbb1b6023dd48a7ab29ca6b1ea4f37b46

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="d2-container-card-bs">
+    <div v-if="$slots.header" class="d2-container-card-bs__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-card-bs__body" ref="wrapper">
+      <div class="d2-container-card-bs__body-wrapper-inner">
+        <div class="d2-container-card-bs__body-card">
+          <slot/>
+        </div>
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-card-bs__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from 'better-scroll'
+export default {
+  name: 'd2-container-card-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/components/d2-container-card.vue

@@ -4,7 +4,7 @@
       <slot name="header"/>
     </div>
     <div class="d2-container-card__body">
-      <div class="d2-container-card__body-inner">
+      <div class="d2-container-card__body-card">
         <slot/>
       </div>
     </div>

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

@@ -6,6 +6,12 @@
       <slot/>
       <slot v-if="$slots.footer" name="footer" slot="footer"/>
     </d2-container-card>
+    <!-- [card] 卡片容器 滚动优化 -->
+    <d2-container-card-bs v-if="type === 'card' && scroll">
+      <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-if="type === 'ghost' && !scroll">
       <slot v-if="$slots.header" name="header" slot="header"/>
@@ -40,6 +46,7 @@ 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'
+import d2ContainerCardBs from './components/d2-container-card-bs.vue'
 export default {
   name: 'd2-container',
   props: {
@@ -61,7 +68,8 @@ export default {
     'd2-container-full-bs': d2ContainerFullBs,
     'd2-container-ghost': d2ContainerGhost,
     'd2-container-ghost-bs': d2ContainerGhostBs,
-    'd2-container-card': d2ContainerCard
+    'd2-container-card': d2ContainerCard,
+    'd2-container-card-bs': d2ContainerCardBs
   }
 }
 </script>