暂存

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/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>