暂存

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>

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>