简化代码

Former-commit-id: bd356fb67ff4b7138cb245203c01aaec7374b8b8 [formerly bd356fb67ff4b7138cb245203c01aaec7374b8b8 [formerly bd356fb67ff4b7138cb245203c01aaec7374b8b8 [formerly bd356fb67ff4b7138cb245203c01aaec7374b8b8 [formerly 53a7f073009a8066a7c5673a6c27eb70dcd201e0 [formerly b5943262046e85618f24f20ff5a18c22c9660d57]]]]]
Former-commit-id: 14b0b52a698ed902aa8ca6008c7c9cc9f4a922c1
Former-commit-id: 1547cce2ef1de0acc5078b033f499ab8b74ac7f5
Former-commit-id: 64145c3fb940834f88877fa9ab4d44b0c2bf53ad [formerly e985341b7fcb491ee0f9a8e61f878f261fb7a712]
Former-commit-id: 5cedd4c754eba078ab88d27280183774c56bd053
Former-commit-id: 72ff1602a26b2ba61f997fe2177f0c885f02a5a8
Former-commit-id: e5a0d1b18b63e498d98dec392459bb05acb7035a
Former-commit-id: f024b9a51a480258ae18114b092bf22d8e1708ec
Former-commit-id: 33152b0004e8abe0036cf459d47e1155cfc67324

src/components/d2-container/index.js

@@ -64,6 +64,18 @@ export default {
     // 返回顶部
     scrollToTop () {
       this.$refs.component.scrollToTop()
+    },
+    // 用法同原生方法 scrollBy
+    scrollBy (x = 0, y = 0) {
+      this.$refs.component.$refs.body.scrollBy(x, y)
+    },
+    // 用法同原生方法 scrollTo
+    scrollTo (x = 0, y = 0) {
+      this.$refs.component.$refs.body.scrollTo(x, y)
+    },
+    // 用法同原生方法 scrollTop
+    scrollTop (top = 0) {
+      this.$refs.component.$refs.body.scrollTop = top
     }
   }
 }

src/pages/demo/components/container/api.vue

@@ -1,19 +1,28 @@
 <template>
   <d2-container
     ref="container"
-    type="card"
+    :type="containerType"
     :scroll-delay="scrollDelay"
-    @scroll="handleScroll">
+    @scroll="e => { scrollTop = e.target.scrollTop }">
     <template slot="header">
       <el-form
         :inline="true"
         size="mini">
+        <el-form-item
+          label="布局类型"
+          class="d2-mb-0">
+          <el-radio-group v-model="containerType">
+            <el-radio-button label="full"></el-radio-button>
+            <el-radio-button label="card"></el-radio-button>
+            <el-radio-button label="ghost"></el-radio-button>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item
           label="滚动距离"
           class="d2-mb-0">
           <el-input
             :value="scrollTop"
-            style="width: 120px;">
+            style="width: 130px;">
             <template slot="append">px</template>
           </el-input>
         </el-form-item>
@@ -31,13 +40,17 @@
           <el-button
             v-if="scrollTop >= 55"
             type="primary"
-            @click="handleScrollToTop">
+            @click="$refs.container.scrollToTop">
             回到顶部
           </el-button>
         </el-form-item>
       </el-form>
     </template>
-    <el-alert type="success" title="请向下滚动" center class="d2-mb-10"/>
+    <el-alert
+      type="success"
+      title="请向下滚动"
+      class="d2-mb-10"
+      center/>
     <d2-demo-article
       v-for="i in 10"
       :key="i"
@@ -48,13 +61,13 @@
         :inline="true"
         size="mini">
         <el-form-item class="d2-mb-0">
-          <el-button @click="handleScrollBy">相对滚动 (0, 30) 像素</el-button>
+          <el-button @click="$refs.container.scrollBy(0, 30)">相对滚动 (0, 30) 像素</el-button>
         </el-form-item>
         <el-form-item class="d2-mb-0">
-          <el-button @click="handleScrollTo">滚动到 (0, 100) 像素位置</el-button>
+          <el-button @click="$refs.container.scrollTo(0, 100)">滚动到 (0, 100) 像素位置</el-button>
         </el-form-item>
         <el-form-item class="d2-mb-0">
-          <el-button @click="handleScrollTop">滚动到垂直位置 100</el-button>
+          <el-button @click="$refs.container.scrollTop(100)">滚动到垂直位置 100</el-button>
         </el-form-item>
       </el-form>
     </template>
@@ -69,6 +82,7 @@ export default {
   },
   data () {
     return {
+      containerType: 'full',
       scrollDelay: 100,
       scrollTop: 0
     }
@@ -80,21 +94,14 @@ export default {
       }
     }
   },
-  methods: {
+  watch: {
-    handleScroll (e) {
+    containerType (val, oldVal) {
-      this.scrollTop = e.target.scrollTop
+      let top = this.scrollTop
-    },
+      // 因为 ghost 模式下的容器没有 20px 的 padding
-    handleScrollToTop () {
+      // 为了保持垂直位置 需要重新计算定位高度
-      this.$refs.container.scrollToTop()
+      if (oldVal === 'ghost') top += 20
-    },
+      if (val === 'ghost') top -= 20
-    handleScrollBy () {
+      this.$nextTick(() => this.$refs.container.scrollTo(0, top))
-      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
     }
   }
 }