mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
[new feature] IndexBar: add sticky prop (#3402)
This commit is contained in:
neverland
GitHub
parent
74124246f6
commit
82134fe402
@ -2,6 +2,10 @@
|
||||
|
||||
### [v2.0.0-beta.3](https://github.com/youzan/vant/tree/v2.0.0-beta.3)
|
||||
|
||||
##### IndexBar
|
||||
|
||||
- 新增`sticky`参数
|
||||
|
||||
##### Rate
|
||||
|
||||
- 新增`gutter`属性
|
||||
|
||||
@ -10,6 +10,32 @@ export default sfc({
|
||||
index: [String, Number]
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
top: 0,
|
||||
active: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
sticky() {
|
||||
return this.active && this.parent.sticky;
|
||||
},
|
||||
|
||||
anchorStyle() {
|
||||
if (this.sticky) {
|
||||
return {
|
||||
top: `${this.top}px`,
|
||||
zIndex: `${this.parent.zIndex}`
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.height = this.$el.offsetHeight;
|
||||
},
|
||||
|
||||
methods: {
|
||||
scrollIntoView() {
|
||||
this.$el.scrollIntoView();
|
||||
@ -17,9 +43,16 @@ export default sfc({
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { sticky } = this;
|
||||
|
||||
return (
|
||||
<div class={bem()}>
|
||||
{this.slots('default') ? this.slots('default') : this.index}
|
||||
<div style={{ height: sticky ? `${this.height}px` : null }}>
|
||||
<div
|
||||
style={this.anchorStyle}
|
||||
class={[bem({ sticky }), { 'van-hairline--bottom': sticky }]}
|
||||
>
|
||||
{this.slots('default') || this.index}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,4 +5,15 @@
|
||||
font-weight: @index-anchor-font-weight;
|
||||
font-size: @index-anchor-font-size;
|
||||
line-height: @index-anchor-line-height;
|
||||
background-color: transparent;
|
||||
transition: background-color .2s;
|
||||
|
||||
&--sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -64,6 +64,7 @@ export default {
|
||||
|------|------|------|------|
|
||||
| index-list | Index List | `Array` | `A-Z` |
|
||||
| z-index | z-index | `Number` | `1` |
|
||||
| sticky | Whether to enable anchor sticky top | `Boolean` | `true` |
|
||||
|
||||
### IndexAnchor Props
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { use } from '../utils';
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
import { on, off } from '../utils/event';
|
||||
import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/scroll';
|
||||
|
||||
const [sfc, bem] = use('index-bar');
|
||||
|
||||
@ -8,6 +10,10 @@ export default sfc({
|
||||
mixins: [TouchMixin, ParentMixin('vanIndexBar')],
|
||||
|
||||
props: {
|
||||
sticky: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
@ -27,13 +33,72 @@ export default sfc({
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.scroller = getScrollEventTarget(this.$el);
|
||||
this.handler(true);
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
this.handler(false);
|
||||
},
|
||||
|
||||
activated() {
|
||||
this.handler(true);
|
||||
},
|
||||
|
||||
deactivated() {
|
||||
this.handler(false);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
this.scrollToElement(event.target);
|
||||
handler(bind) {
|
||||
/* istanbul ignore else */
|
||||
if (this.binded !== bind) {
|
||||
this.binded = bind;
|
||||
(bind ? on : off)(this.scroller, 'scroll', this.onScroll);
|
||||
}
|
||||
},
|
||||
|
||||
onTouchStart(event) {
|
||||
this.touchStart(event);
|
||||
onScroll() {
|
||||
if (!this.sticky) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scrollTop = getScrollTop(this.scroller);
|
||||
const rects = this.children.map(item => ({
|
||||
height: item.height,
|
||||
top: getElementTop(item.$el)
|
||||
}));
|
||||
|
||||
const active = this.getActiveAnchorIndex(scrollTop, rects);
|
||||
|
||||
this.children.forEach((item, index) => {
|
||||
if (index === active) {
|
||||
item.active = true;
|
||||
item.top = Math.max(0, rects[index].top - scrollTop);
|
||||
} else if (index === active - 1) {
|
||||
const activeItemTop = rects[active].top - scrollTop;
|
||||
item.active = activeItemTop > 0;
|
||||
item.top = activeItemTop - rects[active].height;
|
||||
} else {
|
||||
item.active = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getActiveAnchorIndex(scrollTop, rects) {
|
||||
for (let i = this.children.length - 1; i >= 0; i--) {
|
||||
const prevHeight = i > 0 ? rects[i - 1].height : 0;
|
||||
|
||||
if (scrollTop + prevHeight >= rects[i].top) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
this.scrollToElement(event.target);
|
||||
},
|
||||
|
||||
onTouchMove(event) {
|
||||
@ -80,7 +145,7 @@ export default sfc({
|
||||
class={bem('sidebar')}
|
||||
style={{ zIndex: this.zIndex }}
|
||||
onClick={this.onClick}
|
||||
onTouchstart={this.onTouchStart}
|
||||
onTouchstart={this.touchStart}
|
||||
onTouchmove={this.onTouchMove}
|
||||
onTouchend={this.onTouchEnd}
|
||||
onTouchcancel={this.onTouchEnd}
|
||||
|
||||
@ -15,7 +15,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-index-bar">
|
||||
<div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
|
||||
<div>
|
||||
<div class="van-index-anchor">A</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">A</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -27,7 +29,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">B</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">B</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -39,7 +43,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">C</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">C</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -51,7 +57,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">D</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">D</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -63,7 +71,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">E</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">E</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -75,7 +85,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">F</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">F</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -87,7 +99,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">G</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">G</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -99,7 +113,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">H</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">H</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -111,7 +127,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">I</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">I</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -123,7 +141,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">J</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">J</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -135,7 +155,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">K</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">K</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -147,7 +169,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">L</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">L</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -159,7 +183,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">M</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">M</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -171,7 +197,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">N</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">N</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -183,7 +211,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">O</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">O</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -195,7 +225,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">P</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">P</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -207,7 +239,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Q</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Q</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -219,7 +253,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">R</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">R</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -231,7 +267,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">S</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">S</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -243,7 +281,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">T</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">T</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -255,7 +295,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">U</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">U</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -267,7 +309,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">V</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">V</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -279,7 +323,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">W</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">W</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -291,7 +337,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">X</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">X</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -303,7 +351,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Y</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Y</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@ -315,7 +365,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Z</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Z</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,11 @@
|
||||
exports[`custom anchor text 1`] = `
|
||||
<div class="van-index-bar">
|
||||
<div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
|
||||
<div class="van-index-anchor">Title A</div>
|
||||
<div class="van-index-anchor">Title B</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Title A</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Title B</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -68,6 +68,7 @@ export default {
|
||||
|------|------|------|------|------|
|
||||
| index-list | 索引字符列表 | `Array` | `A-Z` | - |
|
||||
| z-index | z-index 层级 | `Number` | `1` | - |
|
||||
| sticky | 是否开启锚点自动吸顶 | `Boolean` | `true` | - |
|
||||
|
||||
### IndexAnchor Props
|
||||
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import Slider from '..';
|
||||
import { mount, trigger, triggerDrag } from '../../../test/utils';
|
||||
import { mount, trigger, triggerDrag, mockGetBoundingClientRect } from '../../../test/utils';
|
||||
|
||||
function mockGetBoundingClientRect(vertical) {
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({
|
||||
function mockRect(vertical) {
|
||||
return mockGetBoundingClientRect({
|
||||
width: vertical ? 0 : 100,
|
||||
height: vertical ? 100 : 0,
|
||||
top: vertical ? 0 : 100,
|
||||
left: vertical ? 100 : 0
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
test('drag button', () => {
|
||||
mockGetBoundingClientRect();
|
||||
const restoreMock = mockRect();
|
||||
|
||||
const wrapper = mount(Slider, {
|
||||
propsData: {
|
||||
@ -37,10 +37,12 @@ test('drag button', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.emitted('drag-start')).toBeTruthy();
|
||||
expect(wrapper.emitted('drag-end')).toBeTruthy();
|
||||
|
||||
restoreMock();
|
||||
});
|
||||
|
||||
it('click bar', () => {
|
||||
mockGetBoundingClientRect();
|
||||
const restoreMock = mockRect();
|
||||
|
||||
const wrapper = mount(Slider, {
|
||||
propsData: {
|
||||
@ -59,10 +61,12 @@ it('click bar', () => {
|
||||
wrapper.setData({ disabled: false });
|
||||
trigger(wrapper, 'click', 100, 0);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
restoreMock();
|
||||
});
|
||||
|
||||
test('drag button vertical', () => {
|
||||
mockGetBoundingClientRect(true);
|
||||
const restoreMock = mockRect(true);
|
||||
|
||||
const wrapper = mount(Slider, {
|
||||
propsData: {
|
||||
@ -78,10 +82,12 @@ test('drag button vertical', () => {
|
||||
const button = wrapper.find('.van-slider__button');
|
||||
triggerDrag(button, 0, 50);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
restoreMock();
|
||||
});
|
||||
|
||||
it('click vertical', () => {
|
||||
mockGetBoundingClientRect(true);
|
||||
const restoreMock = mockRect(true);
|
||||
|
||||
const wrapper = mount(Slider, {
|
||||
propsData: {
|
||||
@ -96,4 +102,6 @@ it('click vertical', () => {
|
||||
|
||||
trigger(wrapper, 'click', 0, 100);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
restoreMock();
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import SwipeCell from '..';
|
||||
import { mount, triggerDrag, later } from '../../../test/utils';
|
||||
import { mount, triggerDrag, later, mockGetBoundingClientRect } from '../../../test/utils';
|
||||
|
||||
const THRESHOLD = 0.15;
|
||||
const defaultProps = {
|
||||
@ -13,12 +13,6 @@ const defaultProps = {
|
||||
}
|
||||
};
|
||||
|
||||
function mockGetBoundingClientRect(vertical) {
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({
|
||||
width: 50
|
||||
}));
|
||||
}
|
||||
|
||||
it('drag and show left part', () => {
|
||||
const wrapper = mount(SwipeCell, defaultProps);
|
||||
|
||||
@ -98,7 +92,9 @@ it('disabled prop', () => {
|
||||
});
|
||||
|
||||
it('auto calc width', async () => {
|
||||
mockGetBoundingClientRect();
|
||||
const restoreMock = mockGetBoundingClientRect({
|
||||
width: 50
|
||||
});
|
||||
|
||||
const wrapper = mount(SwipeCell, {
|
||||
scopedSlots: defaultProps.scopedSlots
|
||||
@ -107,4 +103,6 @@ it('auto calc width', async () => {
|
||||
await later();
|
||||
triggerDrag(wrapper, 100, 0);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
restoreMock();
|
||||
});
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
import { mockGetBoundingClientRect } from '../../../test/utils';
|
||||
|
||||
function mockGetBoundingClientRect(vertical) {
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({
|
||||
width: 100,
|
||||
height: 100
|
||||
}));
|
||||
}
|
||||
let restore;
|
||||
|
||||
mockGetBoundingClientRect();
|
||||
demoTest(Demo);
|
||||
demoTest(Demo, {
|
||||
hookBeforeTest: () => {
|
||||
restore = mockGetBoundingClientRect({
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
},
|
||||
hookAfterTest: () => {
|
||||
restore();
|
||||
}
|
||||
});
|
||||
|
||||
@ -239,6 +239,7 @@ export default sfc({
|
||||
const elTopToPageTop = getElementTop(this.$el);
|
||||
const elBottomToPageTop =
|
||||
elTopToPageTop + this.$el.offsetHeight - this.$refs.wrap.offsetHeight;
|
||||
|
||||
if (scrollTop > elBottomToPageTop) {
|
||||
this.position = 'bottom';
|
||||
} else if (scrollTop > elTopToPageTop) {
|
||||
@ -246,10 +247,12 @@ export default sfc({
|
||||
} else {
|
||||
this.position = '';
|
||||
}
|
||||
|
||||
const scrollParams = {
|
||||
scrollTop,
|
||||
isFixed: this.position === 'top'
|
||||
};
|
||||
|
||||
this.$emit('scroll', scrollParams);
|
||||
},
|
||||
|
||||
|
||||
@ -13,8 +13,12 @@ const empty = {
|
||||
Vue.component('demo-block', empty);
|
||||
Vue.component('demo-section', empty);
|
||||
|
||||
export default function (Demo: any) {
|
||||
export default function (Demo: any, option: any = {}) {
|
||||
test('renders demo correctly', async () => {
|
||||
if (option.hookBeforeTest) {
|
||||
option.hookBeforeTest();
|
||||
}
|
||||
|
||||
if (Demo.i18n) {
|
||||
Locale.add(Demo.i18n);
|
||||
}
|
||||
@ -24,5 +28,9 @@ export default function (Demo: any) {
|
||||
await later();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
if (option.hookAfterTest) {
|
||||
option.hookAfterTest();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -70,3 +70,13 @@ export function later(delay: number = 0): Promise<void> {
|
||||
export function transitionStub(): void {
|
||||
Vue.component('transition', TransitionStub as any);
|
||||
}
|
||||
|
||||
export function mockGetBoundingClientRect(rect: ClientRect | DOMRect): Function {
|
||||
const originMethod = Element.prototype.getBoundingClientRect;
|
||||
|
||||
Element.prototype.getBoundingClientRect = <any> jest.fn(() => rect);
|
||||
|
||||
return function () {
|
||||
Element.prototype.getBoundingClientRect = originMethod;
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user