From 7cd729772360803c71cd680b08a612d5020705ab Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Thu, 8 Nov 2018 23:08:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../components/d2-container-full.vue          | 14 ++-
 .../components/mixins/scroll.normal.js        | 56 +++++++----
 src/components/d2-container/index.vue         |  6 +-
 src/menu/modules/demo-components.js           |  3 +-
 src/pages/demo/components/container/api.vue   | 96 +++++++++++++++++++
 .../container/components/d2-demo-article.vue  | 45 +++++----
 src/router/modules/components.js              |  1 +
 7 files changed, 181 insertions(+), 40 deletions(-)
 create mode 100644 src/pages/demo/components/container/api.vue

diff --git a/src/components/d2-container/components/d2-container-full.vue b/src/components/d2-container/components/d2-container-full.vue
index bc66cc79..0c8a719a 100644
--- a/src/components/d2-container/components/d2-container-full.vue
+++ b/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>
diff --git a/src/components/d2-container/components/mixins/scroll.normal.js b/src/components/d2-container/components/mixins/scroll.normal.js
index 34e800d6..f057628b 100644
--- a/src/components/d2-container/components/mixins/scroll.normal.js
+++ b/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)
     }
   }
 }
diff --git a/src/components/d2-container/index.vue b/src/components/d2-container/index.vue
index 17dbbebc..d975ce03 100644
--- a/src/components/d2-container/index.vue
+++ b/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"/>
diff --git a/src/menu/modules/demo-components.js b/src/menu/modules/demo-components.js
index 92947599..8a5892af 100644
--- a/src/menu/modules/demo-components.js
+++ b/src/menu/modules/demo-components.js
@@ -17,7 +17,8 @@ export default {
         { path: `${pre}container/ghost-bs`, title: '隐形 滚动优化' },
         { path: `${pre}container/card`, title: '卡片' },
         { path: `${pre}container/card-slot`, title: '卡片 插槽' },
-        { path: `${pre}container/card-bs`, title: '卡片 滚动优化' }
+        { path: `${pre}container/card-bs`, title: '卡片 滚动优化' },
+        { path: `${pre}container/api`, title: 'API' }
       ]
     },
     {
diff --git a/src/pages/demo/components/container/api.vue b/src/pages/demo/components/container/api.vue
new file mode 100644
index 00000000..5e59ec01
--- /dev/null
+++ b/src/pages/demo/components/container/api.vue
@@ -0,0 +1,96 @@
+<template>
+  <d2-container
+    ref="container"
+    :scroll-delay="scrollDelay"
+    @scroll="handleScroll">
+    <template slot="header">
+      <el-form
+        :inline="true"
+        size="mini">
+        <el-form-item
+          label="scrollTop"
+          class="d2-mb-0">
+          <el-input
+            :value="scrollTop"
+            style="width: 110px;">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="scrollDelay"
+          class="d2-mb-0">
+          <el-input-number
+            v-model="scrollDelay"
+            :min="100"
+            :max="2000"
+            :step="100"
+            style="width: 110px;"/>
+        </el-form-item>
+        <el-form-item class="d2-mb-0">
+          <el-button
+            v-if="scrollTop >= 55"
+            type="primary"
+            @click="handleTop">
+            回到顶部
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </template>
+    <el-alert type="success" title="请向下滚动" center class="d2-mb-10"/>
+    <d2-demo-article
+      long
+      :style="articleStyle"/>
+    <template slot="footer">
+      <el-form
+        :inline="true"
+        size="mini">
+        <el-form-item class="d2-mb-0">
+          <el-button @click="handleScrollBy">相对滚动 (0, 30) 像素</el-button>
+        </el-form-item>
+        <el-form-item class="d2-mb-0">
+          <el-button @click="handleScrollTo">滚动到 (0, 100) 像素位置</el-button>
+        </el-form-item>
+        <el-form-item class="d2-mb-0">
+          <el-button @click="handleScrollTop">滚动到垂直位置 100</el-button>
+        </el-form-item>
+      </el-form>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import d2DemoArticle from './components/d2-demo-article'
+export default {
+  components: {
+    'd2-demo-article': d2DemoArticle
+  },
+  data () {
+    return {
+      scrollDelay: 100,
+      scrollTop: 0
+    }
+  },
+  computed: {
+    articleStyle () {
+      return {
+        opacity: this.scrollTop > 55 ? '1' : '.1'
+      }
+    }
+  },
+  methods: {
+    handleScroll (e) {
+      this.scrollTop = e.target.scrollTop
+    },
+    handleTop () {},
+    handleScrollBy () {
+      this.$refs.container.$children[0].$refs.body.scrollBy(0, 30)
+    },
+    handleScrollTo () {
+      this.$refs.container.$children[0].$refs.body.scrollTo(0, 100)
+    },
+    handleScrollTop () {
+      this.$refs.container.$children[0].$refs.body.scrollTop = 100
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/components/container/components/d2-demo-article.vue b/src/pages/demo/components/container/components/d2-demo-article.vue
index 45a0ed6e..00dc1b43 100644
--- a/src/pages/demo/components/container/components/d2-demo-article.vue
+++ b/src/pages/demo/components/container/components/d2-demo-article.vue
@@ -1,37 +1,50 @@
 <template>
-  <div>
-    <div class="d2-demo-article-control">
+  <div class="d2-demo-article">
+    <div v-if="!long" class="d2-demo-article__control">
       <el-switch
         v-model="isLong"
         active-text="长内容"
-        inactive-text="短内容">
-      </el-switch>
+        inactive-text="短内容"/>
     </div>
-    <d2-markdown v-show="isLong" :source="long"/>
-    <d2-markdown v-show="!isLong" :source="short"/>
+    <d2-markdown v-show="isLong" :source="sourceLong"/>
+    <d2-markdown v-show="!isLong" :source="sourceShort"/>
   </div>
 </template>
 
 <script>
-import long from '../md/long.md'
-import short from '../md/short.md'
+import sourceLong from '../md/long.md'
+import sourceShort from '../md/short.md'
 export default {
+  props: {
+    // 指定为长文本
+    long: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
   data () {
     return {
-      long,
-      short,
+      sourceLong,
+      sourceShort,
       isLong: false
     }
+  },
+  created () {
+    this.isLong = this.long
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.d2-demo-article-control {
-  padding: 8px 16px;
-  margin-bottom: 10px;
-  box-sizing: border-box;
-  border-radius: 4px;
-  background-color: #f4f4f5;
+.d2-demo-article {
+  transition: opacity .3s;
+  .d2-demo-article__control {
+    padding: 8px 16px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    background-color: #f4f4f5;
+  }
 }
 </style>
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
index 249364d0..3944410f 100644
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@@ -18,6 +18,7 @@ export default {
     { path: 'container/card', name: `${pre}container-card`, component: () => import('@/pages/demo/components/container/card.vue'), meta: { ...meta, title: '布局组件 卡片' } },
     { path: 'container/card-slot', name: `${pre}container-card-slot`, component: () => import('@/pages/demo/components/container/card-slot.vue'), meta: { ...meta, title: '布局组件 卡片 插槽' } },
     { path: 'container/card-bs', name: `${pre}container-card-bs`, component: () => import('@/pages/demo/components/container/card-bs.vue'), meta: { ...meta, title: '布局组件 卡片 滚动优化' } },
+    { path: 'container/api', name: `${pre}container-api`, component: () => import('@/pages/demo/components/container/api.vue'), meta: { ...meta, title: '布局组件 API' } },
     { path: 'contextmenu/simple', name: `${pre}contextmenu-simple`, component: () => import('@/pages/demo/components/contextmenu/simple.vue'), meta: { ...meta, title: '右键菜单 基础' } },
     { path: 'contextmenu/divier', name: `${pre}contextmenu-divier`, component: () => import('@/pages/demo/components/contextmenu/divier.vue'), meta: { ...meta, title: '右键菜单 分割线' } },
     { path: 'contextmenu/group', name: `${pre}contextmenu-group`, component: () => import('@/pages/demo/components/contextmenu/group.vue'), meta: { ...meta, title: '右键菜单 分组' } },