[new feature] add sticky component (#3888)

2019-07-18 17:48:18 +08:00
parent e1021e70ba
commit b273c89b3a
23 changed files with 651 additions and 124 deletions
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div>
+      <div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">
+        基础用法
+      </span></button></div>
+    </div>
+  </div>
+  <div>
+    <div style="height: 0px;">
+      <div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;"><span class="van-button__text">
+        吸顶距离
+      </span></button></div>
+    </div>
+  </div>
+  <div>
+    <div style="height: 150px; background-color: rgb(255, 255, 255);">
+      <div>
+        <div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;"><span class="van-button__text">
+          指定容器
+        </span></button></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`container prop 1`] = `
+<div style="height: 20px;">
+  <div style="height: 10px;">
+    <div class="van-sticky van-sticky--fixed" style="transform: translate3d(0, -5px, 0);">
+      Content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`container prop 2`] = `
+<div style="height: 20px;">
+  <div style="height: 10px;">
+    <div class="van-sticky" style="">
+      Content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`offset-top prop 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed" style="top: 10px;">
+    Content
+  </div>
+</div>
+`;
+
+exports[`sticky to top 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky">
+    Content
+  </div>
+</div>
+`;
+
+exports[`sticky to top 2`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed">
+    Content
+  </div>
+</div>
+`;
+
+exports[`z-index prop 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed" style="z-index: 0;">
+    Content
+  </div>
+</div>
+`;
@@ -0,0 +1,6 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+import { mockHTMLElementOffset } from '../../../test/utils';
+
+mockHTMLElementOffset();
+demoTest(Demo);
@@ -0,0 +1,77 @@
+import { mount, mockScrollTop, mockHTMLElementOffset } from '../../../test/utils';
+import Vue from 'vue';
+import Sticky from '..';
+
+Vue.use(Sticky);
+
+test('sticky to top', () => {
+  const wrapper = mount({
+    template: `
+      <van-sticky style="height: 10px;">
+        Content
+      </van-sticky>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(100);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(0);
+});
+
+test('z-index prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-sticky style="height: 10px;" :z-index="0">
+        Content
+      </van-sticky>
+    `
+  });
+
+  mockHTMLElementOffset();
+  mockScrollTop(100);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(0);
+});
+
+test('offset-top prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-sticky style="height: 10px;" :offset-top="10">
+        Content
+      </van-sticky>
+    `
+  });
+
+  mockHTMLElementOffset();
+  mockScrollTop(100);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(0);
+});
+
+test('container prop', () => {
+  const wrapper = mount({
+    template: `
+      <div ref="container" style="height: 20px;">
+        <van-sticky ref="sticky" style="height: 10px;" :container="container">
+          Content
+        </van-sticky>
+      </div>
+    `,
+    data() {
+      return {
+        container: null
+      };
+    },
+    mounted() {
+      this.container = this.$refs.container;
+      mockHTMLElementOffset();
+    }
+  });
+
+  mockScrollTop(15);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(25);
+  expect(wrapper).toMatchSnapshot();
+  mockScrollTop(0);
+});