暂存

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
2018-11-08 23:08:07 +08:00
parent 8379102b40
commit 7cd7297723
7 changed files with 181 additions and 40 deletions
--- 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>
--- 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)
    }
  }
 }
--- 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"/>
--- 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' }
      ]
    },
    {
--- a/src/pages/demo/components/container/api.vue
+++ 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>
--- 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>
--- 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: '右键菜单 分组' } },