alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(IndexBar): add change event (#7296)

Browse Source 
* feat(IndexBar): add change event

* docs(IndexBar): update event param
This commit is contained in:
neverland
2020-10-08 18:56:21 +08:00
committed by GitHub
parent abcb2dc8df
commit c13b953cff
5 changed files with 64 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index-bar/test/__snapshots__/index.spec.js.snap
+3 -3
View File
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`custom anchor text 1`] = `
exports[`should allow to custom anchor text 1`] = `
<div class="van-index-bar">
<div class="van-index-bar__sidebar"><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>
@@ -12,7 +12,7 @@ exports[`custom anchor text 1`] = `
</div>
`;
exports[`scroll and update active anchor 1`] = `
exports[`should update active anchor after page scroll 1`] = `
<div class="van-index-bar">
<div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index van-index-bar__index--active">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 data-index="0">
@@ -30,7 +30,7 @@ exports[`scroll and update active anchor 1`] = `
</div>
`;
exports[`scroll and update active anchor 2`] = `
exports[`should update active anchor after page scroll 2`] = `
<div class="van-index-bar">
<div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active">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 data-index="0" style="height: 10px;">
src/index-bar/test/index.spec.js
+46 -4
View File
@@ -8,7 +8,7 @@ function mockOffsetHeight(offsetHeight) {
});
}
test('custom anchor text', () => {
test('should allow to custom anchor text', () => {
const wrapper = mount({
template: `
<van-index-bar>
@@ -21,7 +21,7 @@ test('custom anchor text', () => {
expect(wrapper).toMatchSnapshot();
});
test('click and scroll to anchor', () => {
test('should scroll to anchor and emit select event after clicking the index-bar', () => {
const onSelect = jest.fn();
const wrapper = mount({
template: `
@@ -43,7 +43,7 @@ test('click and scroll to anchor', () => {
expect(onSelect).toHaveBeenCalledWith('A');
});
test('touch and scroll to anchor', () => {
test('should scroll to anchor after touching the index-bar', () => {
const onSelect = jest.fn();
const wrapper = mount({
template: `
@@ -91,7 +91,7 @@ test('touch and scroll to anchor', () => {
expect(onSelect).toHaveBeenCalledWith('B');
});
test('scroll and update active anchor', () => {
test('should update active anchor after page scroll', () => {
const nativeRect = Element.prototype.getBoundingClientRect;
Element.prototype.getBoundingClientRect = function () {
const { index } = this.dataset;
@@ -131,3 +131,45 @@ test('scroll and update active anchor', () => {
Element.prototype.getBoundingClientRect = nativeRect;
});
test('should emit change event when active index changed', () => {
const nativeRect = Element.prototype.getBoundingClientRect;
Element.prototype.getBoundingClientRect = function () {
const { index } = this.dataset;
return {
top: index ? index * 10 : 0,
};
};
mockOffsetHeight(10);
const onChange = jest.fn();
mount({
template: `
<van-index-bar @change="onChange">
<van-index-anchor
v-for="index in 4"
:key="index"
:index="index"
:data-index="index - 1"
/>
</van-index-bar>
`,
methods: {
onChange,
},
});
window.scrollTop = 0;
trigger(window, 'scroll');
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenLastCalledWith('B');
window.scrollTop = 100;
trigger(window, 'scroll');
expect(onChange).toHaveBeenCalledTimes(2);
expect(onChange).toHaveBeenLastCalledWith('D');
Element.prototype.getBoundingClientRect = nativeRect;
});