feat: update carousel
tangjinzhou
parent
43c7c728fa
commit
c499aab367
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
dev: {
|
||||
componentName: 'card', // dev components
|
||||
componentName: 'carousel', // dev components
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="slick-dots" style="display: block;">
|
||||
<ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
|
|
@ -150,7 +150,7 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="slick-dots" style="display: block;">
|
||||
<ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
|
|
@ -238,7 +238,7 @@ exports[`renders ./components/carousel/demo/customArrows.md correctly 1`] = `
|
|||
<path d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"></path>
|
||||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
|
||||
</svg></i></div>
|
||||
<ul class="slick-dots" style="display: block;">
|
||||
<ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
|
|
@ -300,7 +300,7 @@ exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div><button type="button" class="slick-arrow slick-next" style="display: block;"> Next</button>
|
||||
<ul class="slick-dots slick-thumb" style="display: block;">
|
||||
<ul class="slick-dots slick-dots-bottom slick-thumb" style="display: block;">
|
||||
<li class="slick-active"><a class=""><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract01.jpg"></a></li>
|
||||
<li class=""><a class=""><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract02.jpg"></a></li>
|
||||
<li class=""><a class=""><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract03.jpg"></a></li>
|
||||
|
|
@ -345,7 +345,7 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="slick-dots" style="display: block;">
|
||||
<ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
|
|
@ -355,82 +355,85 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
|
|||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/carousel/demo/vertical.md correctly 1`] = `
|
||||
<div class="ant-carousel ant-carousel-vertical">
|
||||
<div class="slick-slider slick-vertical slick-initialized">
|
||||
<div class="slick-list">
|
||||
<div class="slick-track" style="width: 900%; left: -100%;">
|
||||
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>4</h3>
|
||||
exports[`renders ./components/carousel/demo/position.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-bottom: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>Top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>Bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>Left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>Right</span></label></div>
|
||||
<div class="ant-carousel">
|
||||
<div class="slick-slider slick-initialized">
|
||||
<div class="slick-list">
|
||||
<div class="slick-track" style="width: 900%; left: -100%;">
|
||||
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>4</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>1</h3>
|
||||
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>1</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>2</h3>
|
||||
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>2</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>3</h3>
|
||||
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>3</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>4</h3>
|
||||
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>4</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>1</h3>
|
||||
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>1</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>2</h3>
|
||||
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>2</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>3</h3>
|
||||
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>3</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>4</h3>
|
||||
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<h3>4</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="slick-dots slick-dots-top undefined" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
<li class=""><button class="">4</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="slick-dots" style="display: block;">
|
||||
<li class="slick-active"><button class="">1</button></li>
|
||||
<li class=""><button class="">2</button></li>
|
||||
<li class=""><button class="">3</button></li>
|
||||
<li class=""><button class="">4</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Carousel should works for dotPosition bottom 1`] = `
|
||||
<div class="ant-carousel">
|
||||
<div class="slick-slider slick-initialized">
|
||||
<div class="slick-list">
|
||||
<div class="slick-track" style="width: 100%; left: 0%;">
|
||||
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 100%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Carousel should works for dotPosition left 1`] = `
|
||||
<div class="ant-carousel ant-carousel-vertical">
|
||||
<div class="slick-slider slick-vertical slick-initialized">
|
||||
<div class="slick-list">
|
||||
<div class="slick-track" style="width: 100%; left: 0%;">
|
||||
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 100%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Carousel should works for dotPosition right 1`] = `
|
||||
<div class="ant-carousel ant-carousel-vertical">
|
||||
<div class="slick-slider slick-vertical slick-initialized">
|
||||
<div class="slick-list">
|
||||
<div class="slick-track" style="width: 100%; left: 0%;">
|
||||
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 100%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Carousel should works for dotPosition top 1`] = `
|
||||
<div class="ant-carousel">
|
||||
<div class="slick-slider slick-initialized">
|
||||
<div class="slick-list">
|
||||
<div class="slick-track" style="width: 100%; left: 0%;">
|
||||
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 100%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -1,14 +1,23 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import { asyncExpect } from '@/tests/utils';
|
||||
import Carousel from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
describe('Carousel', () => {
|
||||
mountTest(Carousel);
|
||||
// beforeEach(() => {
|
||||
// jest.useFakeTimers();
|
||||
// });
|
||||
|
||||
// afterEach(() => {
|
||||
// jest.useRealTimers();
|
||||
// });
|
||||
it('should has innerSlider', () => {
|
||||
const props = {
|
||||
slots: {
|
||||
default: '<div />',
|
||||
},
|
||||
sync: true,
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Carousel, props);
|
||||
const { innerSlider, $refs } = wrapper.vm;
|
||||
|
|
@ -22,7 +31,7 @@ describe('Carousel', () => {
|
|||
slots: {
|
||||
default: '<div>1</div><div>2</div><div>3</div>',
|
||||
},
|
||||
sync: true,
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Carousel, props);
|
||||
const { prev, next, goTo } = wrapper.vm;
|
||||
|
|
@ -56,14 +65,14 @@ describe('Carousel', () => {
|
|||
slots: {
|
||||
default: '<div>1</div><div>2</div><div>3</div>',
|
||||
},
|
||||
sync: true,
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Carousel, props);
|
||||
const spy = jest.spyOn(wrapper.vm.$refs.slick.innerSlider, 'handleAutoPlay');
|
||||
window.resizeTo(1000);
|
||||
expect(spy).not.toBeCalled();
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
expect(spy).toBeCalled();
|
||||
expect(spy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('cancel resize listener when unmount', async () => {
|
||||
|
|
@ -74,14 +83,48 @@ describe('Carousel', () => {
|
|||
slots: {
|
||||
default: '<div>1</div><div>2</div><div>3</div>',
|
||||
},
|
||||
sync: true,
|
||||
sync: false,
|
||||
};
|
||||
const wrapper = mount(Carousel, props);
|
||||
const { onWindowResized } = wrapper.vm;
|
||||
const spy = jest.spyOn(wrapper.vm.onWindowResized, 'cancel');
|
||||
const spy2 = jest.spyOn(window, 'removeEventListener');
|
||||
wrapper.destroy();
|
||||
expect(spy).toBeCalled();
|
||||
expect(spy2).toBeCalledWith('resize', onWindowResized);
|
||||
expect(spy).toHaveBeenCalled();
|
||||
expect(spy2).toHaveBeenCalledWith('resize', onWindowResized);
|
||||
});
|
||||
|
||||
describe('should works for dotPosition', () => {
|
||||
['left', 'right', 'top', 'bottom'].forEach(dotPosition => {
|
||||
it(dotPosition, () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<Carousel dotPosition={dotPosition}>
|
||||
<div />
|
||||
</Carousel>
|
||||
);
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('warning', () => {
|
||||
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
mount({
|
||||
render() {
|
||||
return (
|
||||
<Carousel vertical>
|
||||
<div />
|
||||
</Carousel>
|
||||
);
|
||||
},
|
||||
});
|
||||
expect(warnSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antdv: Carousel] `vertical` is deprecated, please use `dotPosition` instead.',
|
||||
);
|
||||
warnSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import Basic from './basic';
|
||||
import Fade from './fade';
|
||||
import Autoplay from './autoplay';
|
||||
import Vertical from './vertical';
|
||||
import Position from './position';
|
||||
import CustomPaging from './customPaging';
|
||||
import CustomArrows from './customArrows';
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ export default {
|
|||
<div>
|
||||
<md cn={md.cn} us={md.us} />
|
||||
<Basic />
|
||||
<Vertical />
|
||||
<Position />
|
||||
<Fade />
|
||||
<Autoplay />
|
||||
<CustomPaging />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
<cn>
|
||||
#### 位置
|
||||
位置有 4 个方向。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Position
|
||||
There are 4 position options available.
|
||||
</us>
|
||||
|
||||
```tpl
|
||||
<template>
|
||||
<div>
|
||||
<a-radio-group
|
||||
v-model="dotPosition"
|
||||
style="margin-bottom: 8px"
|
||||
>
|
||||
<a-radio-button value="top">Top</a-radio-button>
|
||||
<a-radio-button value="bottom">Bottom</a-radio-button>
|
||||
<a-radio-button value="left">Left</a-radio-button>
|
||||
<a-radio-button value="right">Right</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-carousel :dotPosition="dotPosition">
|
||||
<div><h3>1</h3></div>
|
||||
<div><h3>2</h3></div>
|
||||
<div><h3>3</h3></div>
|
||||
<div><h3>4</h3></div>
|
||||
</a-carousel>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dotPosition: 'top',
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/* For demo */
|
||||
.ant-carousel >>> .slick-slide {
|
||||
text-align: center;
|
||||
height: 160px;
|
||||
line-height: 160px;
|
||||
background: #364d79;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-carousel >>> .slick-slide h3 {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<cn>
|
||||
#### 垂直
|
||||
垂直显示。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Vertical
|
||||
Vertical pagination.
|
||||
</us>
|
||||
|
||||
```tpl
|
||||
<template>
|
||||
<a-carousel vertical>
|
||||
<div><h3>1</h3></div>
|
||||
<div><h3>2</h3></div>
|
||||
<div><h3>3</h3></div>
|
||||
<div><h3>4</h3></div>
|
||||
</a-carousel>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style scoped>
|
||||
/* For demo */
|
||||
.ant-carousel >>> .slick-slide {
|
||||
text-align: center;
|
||||
height: 160px;
|
||||
line-height: 160px;
|
||||
background: #364d79;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-carousel >>> .slick-slide h3 {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -1,22 +1,18 @@
|
|||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| afterChange | Callback function called after the current index changes | function(current) | - |
|
||||
| autoplay | Whether to scroll automatically | boolean | `false` |
|
||||
| beforeChange | Callback function called before the current index changes | function(from, to) | - |
|
||||
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |
|
||||
| dotsClass | Class name of the dots | string | `slick-dots` |
|
||||
| easing | Transition interpolation function name | string | `linear` |
|
||||
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` |
|
||||
| vertical | Whether to use a vertical display | boolean | `false` |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| afterChange | Callback function called after the current index changes | function(current) | - | |
|
||||
| autoplay | Whether to scroll automatically | boolean | `false` | |
|
||||
| beforeChange | Callback function called before the current index changes | function(from, to) | - | |
|
||||
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | |
|
||||
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | 1.5.0 |
|
||||
| dotsClass | Class name of the dots | string | `slick-dots` | |
|
||||
| easing | Transition interpolation function name | string | `linear` | |
|
||||
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |
|
||||
|
||||
## Methods
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation |
|
||||
| next() | Change current slide to next slide |
|
||||
| prev() | Change current slide to previous slide |
|
||||
| Name | Description | Version | | --- | --- | --- | Version | | goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation | | | next() | Change current slide to next slide | | | prev() | Change current slide to previous slide | |
|
||||
|
||||
For more info on the parameters, refer to the [vc-slick props](https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import debounce from 'lodash/debounce';
|
||||
import {
|
||||
import hasProp, {
|
||||
initDefaultProps,
|
||||
getComponentFromProp,
|
||||
filterEmpty,
|
||||
|
|
@ -8,6 +8,7 @@ import {
|
|||
} from '../_util/props-util';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import Base from '../base';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
// matchMedia polyfill for
|
||||
// https://github.com/WickyNilliams/enquire.js/issues/82
|
||||
|
|
@ -20,7 +21,8 @@ if (typeof window !== 'undefined') {
|
|||
removeListener() {},
|
||||
};
|
||||
};
|
||||
window.matchMedia = window.matchMedia || matchMediaPolyfill;
|
||||
// ref: https://github.com/ant-design/ant-design/issues/18774
|
||||
if (!window.matchMedia) window.matchMedia = matchMediaPolyfill;
|
||||
}
|
||||
// Use require over import (will be lifted up)
|
||||
// make sure matchMedia polyfill run before require('vc-slick')
|
||||
|
|
@ -71,6 +73,7 @@ export const CarouselProps = {
|
|||
useCSS: PropTypes.bool,
|
||||
slickGoTo: PropTypes.number,
|
||||
responsive: PropTypes.array,
|
||||
dotPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
|
||||
};
|
||||
|
||||
const Carousel = {
|
||||
|
|
@ -91,6 +94,13 @@ const Carousel = {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
if (hasProp(this, 'vertical')) {
|
||||
warning(
|
||||
!this.vertical,
|
||||
'Carousel',
|
||||
'`vertical` is deprecated, please use `dotPosition` instead.',
|
||||
);
|
||||
}
|
||||
const { autoplay } = this;
|
||||
if (autoplay) {
|
||||
window.addEventListener('resize', this.onWindowResized);
|
||||
|
|
@ -98,7 +108,6 @@ const Carousel = {
|
|||
// https://github.com/ant-design/ant-design/issues/7191
|
||||
this.innerSlider = this.$refs.slick && this.$refs.slick.innerSlider;
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
const { autoplay } = this;
|
||||
if (autoplay) {
|
||||
|
|
@ -107,6 +116,15 @@ const Carousel = {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getDotPosition() {
|
||||
if (this.dotPosition) {
|
||||
return this.dotPosition;
|
||||
}
|
||||
if (hasProp(this, 'vertical')) {
|
||||
return this.vertical ? 'right' : 'bottom';
|
||||
}
|
||||
return 'bottom';
|
||||
},
|
||||
onWindowResized() {
|
||||
// Fix https://github.com/ant-design/ant-design/issues/2550
|
||||
const { autoplay } = this;
|
||||
|
|
@ -134,9 +152,7 @@ const Carousel = {
|
|||
},
|
||||
|
||||
render() {
|
||||
const props = {
|
||||
...this.$props,
|
||||
};
|
||||
const props = { ...this.$props };
|
||||
const { $slots } = this;
|
||||
|
||||
if (props.effect === 'fade') {
|
||||
|
|
@ -145,7 +161,10 @@ const Carousel = {
|
|||
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
let className = getPrefixCls('carousel', props.prefixCls);
|
||||
|
||||
const dotsClass = 'slick-dots';
|
||||
const dotPosition = this.getDotPosition();
|
||||
props.vertical = dotPosition === 'left' || dotPosition === 'right';
|
||||
props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'} ${props.dotsClass}`;
|
||||
if (props.vertical) {
|
||||
className = `${className} ${className}-vertical`;
|
||||
}
|
||||
|
|
@ -158,11 +177,11 @@ const Carousel = {
|
|||
on: getListeners(this),
|
||||
scopedSlots: this.$scopedSlots,
|
||||
};
|
||||
|
||||
const children = filterEmpty($slots.default);
|
||||
return (
|
||||
<div class={className}>
|
||||
<SlickCarousel ref="slick" {...SlickCarouselProps}>
|
||||
{filterEmpty($slots.default)}
|
||||
{children}
|
||||
</SlickCarousel>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | -------------------------------- | ------------------ | ------------ |
|
||||
| afterChange | 切换面板的回调 | function(current) | 无 |
|
||||
| autoplay | 是否自动切换 | boolean | false |
|
||||
| beforeChange | 切换面板的回调 | function(from, to) | 无 |
|
||||
| dots | 是否显示面板指示点 | boolean | true |
|
||||
| dotsClass | 面板指示点类名 | string | `slick-dots` |
|
||||
| easing | 动画效果 | string | linear |
|
||||
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx |
|
||||
| vertical | 垂直显示 | boolean | false |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| afterChange | 切换面板的回调 | function(current) | 无 | |
|
||||
| autoplay | 是否自动切换 | boolean | false | |
|
||||
| beforeChange | 切换面板的回调 | function(from, to) | 无 | |
|
||||
| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | 1.5.0 |
|
||||
| dots | 是否显示面板指示点 | boolean | true | |
|
||||
| dotsClass | 面板指示点类名 | string | `slick-dots` | |
|
||||
| easing | 动画效果 | string | linear | |
|
||||
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx | |
|
||||
|
||||
## 方法
|
||||
|
||||
| 名称 | 描述 |
|
||||
| ------------------------------ | ------------------------------------------------- |
|
||||
| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |
|
||||
| next() | 切换到下一面板 |
|
||||
| prev() | 切换到上一面板 |
|
||||
| 名称 | 描述 | 版本 |
|
||||
| ------------------------------ | ------------------------------------------------- | ---- |
|
||||
| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 | |
|
||||
| next() | 切换到下一面板 | |
|
||||
| prev() | 切换到上一面板 | |
|
||||
|
||||
更多参数可参考：[vc-slick props](https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3)
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
import { AntdComponent } from './component';
|
||||
|
||||
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
|
||||
export interface Settings {
|
||||
accessibility?: boolean;
|
||||
adaptiveHeight?: boolean;
|
||||
|
|
@ -12,7 +13,6 @@ export interface Settings {
|
|||
autoplay?: boolean;
|
||||
centerMode?: boolean;
|
||||
centerPadding?: string;
|
||||
className?: string;
|
||||
cssEase?: string;
|
||||
dotsClass?: string;
|
||||
dots?: boolean;
|
||||
|
|
@ -44,12 +44,13 @@ export interface Settings {
|
|||
vertical?: boolean;
|
||||
verticalSwiping?: boolean;
|
||||
waitForAnimate?: boolean;
|
||||
dotPosition?: DotPosition;
|
||||
}
|
||||
export interface ResponsiveObject {
|
||||
breakpoint: number;
|
||||
settings: 'unslick' | Settings;
|
||||
}
|
||||
export declare class Carousel extends AntdComponent {
|
||||
export declare class Carousel extends Settings, AntdComponent {
|
||||
/**
|
||||
* Callback function called after the current index changes
|
||||
* @type Function
|
||||
|
|
|
|||
Loading…
Reference in New Issue