暂存

Former-commit-id: 1ada65d8ae7f042e9fb184148e21b8ecdfc940e1 [formerly 1ada65d8ae7f042e9fb184148e21b8ecdfc940e1 [formerly 1ada65d8ae7f042e9fb184148e21b8ecdfc940e1 [formerly 1ada65d8ae7f042e9fb184148e21b8ecdfc940e1 [formerly 3b2fffc792fa182bbfd7f639f75935ee95000ebc [formerly d9516320f8cf3e50148bb1e44171e656f9dc0a4a]]]]]
Former-commit-id: 6bdc2ca75847c570d857c46164c707a2290bf1fb
Former-commit-id: 7dfb5a24d74fba2e52aee345cadb43bbba884819
Former-commit-id: 7925a7906733ee3aad78c370bd7ecc3b193d3648 [formerly dd2fdf6fee672dba3c00db857902e2b17b8a4853]
Former-commit-id: 6db2895d3e7239333ccdb55844423e48cb34f29a
Former-commit-id: f576d9ebe24fc8e9613511ed1b86c942e56bc167
Former-commit-id: 9c070d963ad7ded364a6c1cce264076c1aa4b550
Former-commit-id: 099433557a963bfe1647a807e8d129e200281e01
Former-commit-id: 063ae4244f815db3de163f6aa61a57015fb0f181

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

@@ -17,9 +17,15 @@ import scroll from './mixins/scroll.normal'
 export default {
   name: 'd2-container-full',
   mixins: [
-    scroll({
-      ref: 'body'
-    })
-  ]
+    scroll
+  ],
+  mounted () {
+    // 增加滚动事件监听
+    this.addScrollListener()
+  },
+  beforeDestroy () {
+    // 移除滚动事件监听
+    this.removeScrollListener()
+  }
 }
 </script>

src/components/d2-container/components/mixins/scroll.normal.js

@@ -3,24 +3,48 @@
 
 import { throttle } from 'lodash'
 
-/**
- * 根据配置输出 mixin 设置
- * @param {String} ref 滚动容器 ref 名称
- */
-export default function ({ ref }) {
-  return {
-    data () {
-      return {
-        throttledHandleScroll: throttle(() => {
-          console.log(this.$refs[ref].scrollTop)
-        }, 300)
+// 生成滚动事件的 handler
+function handleMaker (wait) {
+  return throttle(e => this.$emit('scroll', e), wait)
+}
+
+export default {
+  props: {
+    // 滚动事件节流间隔
+    scrollDelay: {
+      type: Number,
+      required: false,
+      default: 100
+    }
+  },
+  data () {
+    return {
+      handleScroll: null
+    }
+  },
+  watch: {
+    scrollDelay (val) {
+      // 移除旧的监听
+      this.removeScrollListener()
+      // 生成新的 handle 方法
+      this.handleScroll = handleMaker.call(this, val)
+      // 添加新的监听
+      this.addScrollListener()
+    }
+  },
+  methods: {
+    // 增加滚动事件监听
+    addScrollListener () {
+      if (typeof this.handleScroll !== 'function') {
+        // mounted 生命周期内调用这个方法的时候会进入这里的判断
+        this.handleScroll = handleMaker.call(this, this.scrollDelay)
       }
+      // 添加监听
+      this.$refs.body.addEventListener('scroll', this.handleScroll)
     },
-    mounted () {
-      this.$refs[ref].addEventListener('scroll', this.throttledHandleScroll)
-    },
-    beforeDestroy () {
-      this.$refs[ref].removeEventListener('scroll', this.throttledHandleScroll)
+    // 移除滚动事件监听
+    removeScrollListener () {
+      this.$refs.body.removeEventListener('scroll', this.handleScroll)
     }
   }
 }

src/components/d2-container/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container-component" ref="container">
     <!-- [card] 卡片容器 -->
-    <d2-container-card v-if="type === 'card' && !betterScroll">
+    <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"/>
@@ -13,7 +13,7 @@
       <slot v-if="$slots.footer" name="footer" slot="footer"/>
     </d2-container-card-bs>
     <!-- [ghost] 隐形容器 -->
-    <d2-container-ghost v-if="type === 'ghost' && !betterScroll">
+    <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"/>
@@ -25,7 +25,7 @@
       <slot v-if="$slots.footer" name="footer" slot="footer"/>
     </d2-container-ghost-bs>
     <!-- [container-full] 填充 -->
-    <d2-container-full v-if="type === 'full' && !betterScroll">
+    <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"/>