github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update carousel

pull/1790/head
tangjinzhou 2020-02-11 11:49:08 +08:00
parent 43c7c728fa
commit c499aab367
11 changed files with 293 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
dev: { dev: {
componentName: 'card', // dev components componentName: 'carousel', // dev components
}, },
}; };

123
components/carousel/__tests__/__snapshots__/demo.test.js.snap
View File

@ -70,7 +70,7 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
</div> </div>
</div> </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="slick-active"><button class="">1</button></li>
<li class=""><button class="">2</button></li> <li class=""><button class="">2</button></li>
<li class=""><button class="">3</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> </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="slick-active"><button class="">1</button></li>
<li class=""><button class="">2</button></li> <li class=""><button class="">2</button></li>
<li class=""><button class="">3</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="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> <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> </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="slick-active"><button class="">1</button></li>
<li class=""><button class="">2</button></li> <li class=""><button class="">2</button></li>
<li class=""><button class="">3</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> </div>
</div><button type="button" class="slick-arrow slick-next" style="display: block;"> Next</button> </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="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/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> <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> </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="slick-active"><button class="">1</button></li>
<li class=""><button class="">2</button></li> <li class=""><button class="">2</button></li>
<li class=""><button class="">3</button></li> <li class=""><button class="">3</button></li>
@ -355,82 +355,85 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
</div> </div>
`; `;
exports[`renders ./components/carousel/demo/vertical.md correctly 1`] = ` exports[`renders ./components/carousel/demo/position.md correctly 1`] = `
<div class="ant-carousel ant-carousel-vertical"> <div>
<div class="slick-slider slick-vertical slick-initialized"> <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="slick-list"> <div class="ant-carousel">
<div class="slick-track" style="width: 900%; left: -100%;"> <div class="slick-slider slick-initialized">
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;"> <div class="slick-list">
<div> <div class="slick-track" style="width: 900%; left: -100%;">
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"> <div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<h3>4</h3> <div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div> </div>
</div> </div>
</div> <div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;"> <div>
<div> <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"> <h3>1</h3>
<h3>1</h3> </div>
</div> </div>
</div> </div>
</div> <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;"> <div>
<div> <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"> <h3>2</h3>
<h3>2</h3> </div>
</div> </div>
</div> </div>
</div> <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;"> <div>
<div> <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"> <h3>3</h3>
<h3>3</h3> </div>
</div> </div>
</div> </div>
</div> <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;"> <div>
<div> <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"> <h3>4</h3>
<h3>4</h3> </div>
</div> </div>
</div> </div>
</div> <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;"> <div>
<div> <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"> <h3>1</h3>
<h3>1</h3> </div>
</div> </div>
</div> </div>
</div> <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;"> <div>
<div> <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"> <h3>2</h3>
<h3>2</h3> </div>
</div> </div>
</div> </div>
</div> <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;"> <div>
<div> <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"> <h3>3</h3>
<h3>3</h3> </div>
</div> </div>
</div> </div>
</div> <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;"> <div>
<div> <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"> <h3>4</h3>
<h3>4</h3> </div>
</div> </div>
</div> </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> </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>
</div> </div>
`; `;

65
components/carousel/__tests__/__snapshots__/index.test.js.snap Normal file
View File

@ -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>
`;

59
components/carousel/__tests__/index.test.js
View File

@ -1,14 +1,23 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { asyncExpect } from '@/tests/utils'; import { asyncExpect } from '@/tests/utils';
import Carousel from '..'; import Carousel from '..';
import mountTest from '../../../tests/shared/mountTest';
describe('Carousel', () => { describe('Carousel', () => {
mountTest(Carousel);
// beforeEach(() => {
// jest.useFakeTimers();
// });
// afterEach(() => {
// jest.useRealTimers();
// });
it('should has innerSlider', () => { it('should has innerSlider', () => {
const props = { const props = {
slots: { slots: {
default: '<div />', default: '<div />',
}, },
sync: true, sync: false,
}; };
const wrapper = mount(Carousel, props); const wrapper = mount(Carousel, props);
const { innerSlider, $refs } = wrapper.vm; const { innerSlider, $refs } = wrapper.vm;
@ -22,7 +31,7 @@ describe('Carousel', () => {
slots: { slots: {
default: '<div>1</div><div>2</div><div>3</div>', default: '<div>1</div><div>2</div><div>3</div>',
}, },
sync: true, sync: false,
}; };
const wrapper = mount(Carousel, props); const wrapper = mount(Carousel, props);
const { prev, next, goTo } = wrapper.vm; const { prev, next, goTo } = wrapper.vm;
@ -56,14 +65,14 @@ describe('Carousel', () => {
slots: { slots: {
default: '<div>1</div><div>2</div><div>3</div>', default: '<div>1</div><div>2</div><div>3</div>',
}, },
sync: true, sync: false,
}; };
const wrapper = mount(Carousel, props); const wrapper = mount(Carousel, props);
const spy = jest.spyOn(wrapper.vm.$refs.slick.innerSlider, 'handleAutoPlay'); const spy = jest.spyOn(wrapper.vm.$refs.slick.innerSlider, 'handleAutoPlay');
window.resizeTo(1000); window.resizeTo(1000);
expect(spy).not.toBeCalled(); expect(spy).not.toHaveBeenCalled();
await new Promise(resolve => setTimeout(resolve, 1000)); await new Promise(resolve => setTimeout(resolve, 1000));
expect(spy).toBeCalled(); expect(spy).toHaveBeenCalled();
}); });
it('cancel resize listener when unmount', async () => { it('cancel resize listener when unmount', async () => {
@ -74,14 +83,48 @@ describe('Carousel', () => {
slots: { slots: {
default: '<div>1</div><div>2</div><div>3</div>', default: '<div>1</div><div>2</div><div>3</div>',
}, },
sync: true, sync: false,
}; };
const wrapper = mount(Carousel, props); const wrapper = mount(Carousel, props);
const { onWindowResized } = wrapper.vm; const { onWindowResized } = wrapper.vm;
const spy = jest.spyOn(wrapper.vm.onWindowResized, 'cancel'); const spy = jest.spyOn(wrapper.vm.onWindowResized, 'cancel');
const spy2 = jest.spyOn(window, 'removeEventListener'); const spy2 = jest.spyOn(window, 'removeEventListener');
wrapper.destroy(); wrapper.destroy();
expect(spy).toBeCalled(); expect(spy).toHaveBeenCalled();
expect(spy2).toBeCalledWith('resize', onWindowResized); 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();
}); });
}); });

4
components/carousel/demo/index.vue
View File

@ -2,7 +2,7 @@
import Basic from './basic'; import Basic from './basic';
import Fade from './fade'; import Fade from './fade';
import Autoplay from './autoplay'; import Autoplay from './autoplay';
import Vertical from './vertical'; import Position from './position';
import CustomPaging from './customPaging'; import CustomPaging from './customPaging';
import CustomArrows from './customArrows'; import CustomArrows from './customArrows';
@ -42,7 +42,7 @@ export default {
<div> <div>
<md cn={md.cn} us={md.us} /> <md cn={md.cn} us={md.us} />
<Basic /> <Basic />
<Vertical /> <Position />
<Fade /> <Fade />
<Autoplay /> <Autoplay />
<CustomPaging /> <CustomPaging />

54
components/carousel/demo/position.md Normal file
View File

@ -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>
```

37
components/carousel/demo/vertical.md
View File

@ -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>
```

26
components/carousel/index.en-US.md
View File

@ -1,22 +1,18 @@
## API ## API
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| afterChange | Callback function called after the current index changes | function(current) | - | | afterChange | Callback function called after the current index changes | function(current) | - | |
| autoplay | Whether to scroll automatically | boolean | `false` | | autoplay | Whether to scroll automatically | boolean | `false` | |
| beforeChange | Callback function called before the current index changes | function(from, to) | - | | 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` | | dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | |
| dotsClass | Class name of the dots | string | `slick-dots` | | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | 1.5.0 |
| easing | Transition interpolation function name | string | `linear` | | dotsClass | Class name of the dots | string | `slick-dots` | |
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | | easing | Transition interpolation function name | string | `linear` | |
| vertical | Whether to use a vertical display | boolean | `false` | | effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |
## Methods ## Methods
| Name | Description | | 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 | |
| --- | --- |
| 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) 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)

37
components/carousel/index.jsx
View File

@ -1,6 +1,6 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { import hasProp, {
initDefaultProps, initDefaultProps,
getComponentFromProp, getComponentFromProp,
filterEmpty, filterEmpty,
@ -8,6 +8,7 @@ import {
} from '../_util/props-util'; } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import Base from '../base'; import Base from '../base';
import warning from '../_util/warning';
// matchMedia polyfill for // matchMedia polyfill for
// https://github.com/WickyNilliams/enquire.js/issues/82 // https://github.com/WickyNilliams/enquire.js/issues/82
@ -20,7 +21,8 @@ if (typeof window !== 'undefined') {
removeListener() {}, 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) // Use require over import (will be lifted up)
// make sure matchMedia polyfill run before require('vc-slick') // make sure matchMedia polyfill run before require('vc-slick')
@ -71,6 +73,7 @@ export const CarouselProps = {
useCSS: PropTypes.bool, useCSS: PropTypes.bool,
slickGoTo: PropTypes.number, slickGoTo: PropTypes.number,
responsive: PropTypes.array, responsive: PropTypes.array,
dotPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
}; };
const Carousel = { const Carousel = {
@ -91,6 +94,13 @@ const Carousel = {
}, },
mounted() { mounted() {
if (hasProp(this, 'vertical')) {
warning(
!this.vertical,
'Carousel',
'`vertical` is deprecated, please use `dotPosition` instead.',
);
}
const { autoplay } = this; const { autoplay } = this;
if (autoplay) { if (autoplay) {
window.addEventListener('resize', this.onWindowResized); window.addEventListener('resize', this.onWindowResized);
@ -98,7 +108,6 @@ const Carousel = {
// https://github.com/ant-design/ant-design/issues/7191 // https://github.com/ant-design/ant-design/issues/7191
this.innerSlider = this.$refs.slick && this.$refs.slick.innerSlider; this.innerSlider = this.$refs.slick && this.$refs.slick.innerSlider;
}, },
beforeDestroy() { beforeDestroy() {
const { autoplay } = this; const { autoplay } = this;
if (autoplay) { if (autoplay) {
@ -107,6 +116,15 @@ const Carousel = {
} }
}, },
methods: { methods: {
getDotPosition() {
if (this.dotPosition) {
return this.dotPosition;
}
if (hasProp(this, 'vertical')) {
return this.vertical ? 'right' : 'bottom';
}
return 'bottom';
},
onWindowResized() { onWindowResized() {
// Fix https://github.com/ant-design/ant-design/issues/2550 // Fix https://github.com/ant-design/ant-design/issues/2550
const { autoplay } = this; const { autoplay } = this;
@ -134,9 +152,7 @@ const Carousel = {
}, },
render() { render() {
const props = { const props = { ...this.$props };
...this.$props,
};
const { $slots } = this; const { $slots } = this;
if (props.effect === 'fade') { if (props.effect === 'fade') {
@ -145,7 +161,10 @@ const Carousel = {
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
let className = getPrefixCls('carousel', props.prefixCls); 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) { if (props.vertical) {
className = `${className} ${className}-vertical`; className = `${className} ${className}-vertical`;
} }
@ -158,11 +177,11 @@ const Carousel = {
on: getListeners(this), on: getListeners(this),
scopedSlots: this.$scopedSlots, scopedSlots: this.$scopedSlots,
}; };
const children = filterEmpty($slots.default);
return ( return (
<div class={className}> <div class={className}>
<SlickCarousel ref="slick" {...SlickCarouselProps}> <SlickCarousel ref="slick" {...SlickCarouselProps}>
{filterEmpty($slots.default)} {children}
</SlickCarousel> </SlickCarousel>
</div> </div>
); );

30
components/carousel/index.zh-CN.md
View File

@ -1,22 +1,22 @@
## API ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------ | -------------------------------- | ------------------ | ------------ | | --- | --- | --- | --- | --- |
| afterChange | 切换面板的回调 | function(current) | 无 | | afterChange | 切换面板的回调 | function(current) | 无 | |
| autoplay | 是否自动切换 | boolean | false | | autoplay | 是否自动切换 | boolean | false | |
| beforeChange | 切换面板的回调 | function(from, to) | 无 | | beforeChange | 切换面板的回调 | function(from, to) | 无 | |
| dots | 是否显示面板指示点 | boolean | true | | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | 1.5.0 |
| dotsClass | 面板指示点类名 | string | `slick-dots` | | dots | 是否显示面板指示点 | boolean | true | |
| easing | 动画效果 | string | linear | | dotsClass | 面板指示点类名 | string | `slick-dots` | |
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx | | easing | 动画效果 | string | linear | |
| vertical | 垂直显示 | boolean | false | | effect | 动画效果函数，可取 scrollx, fade | string | scrollx | |
## 方法 ## 方法
| 名称 | 描述 | | 名称 | 描述 | 版本 |
| ------------------------------ | ------------------------------------------------- | | ------------------------------ | ------------------------------------------------- | ---- |
| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 | | goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 | |
| next() | 切换到下一面板 | | next() | 切换到下一面板 | |
| prev() | 切换到上一面板 | | prev() | 切换到上一面板 | |
更多参数可参考：[vc-slick props](https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3) 更多参数可参考：[vc-slick props](https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3)

5
types/carousel.d.ts vendored
View File

@ -4,6 +4,7 @@
import { AntdComponent } from './component'; import { AntdComponent } from './component';
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
export interface Settings { export interface Settings {
accessibility?: boolean; accessibility?: boolean;
adaptiveHeight?: boolean; adaptiveHeight?: boolean;
@ -12,7 +13,6 @@ export interface Settings {
autoplay?: boolean; autoplay?: boolean;
centerMode?: boolean; centerMode?: boolean;
centerPadding?: string; centerPadding?: string;
className?: string;
cssEase?: string; cssEase?: string;
dotsClass?: string; dotsClass?: string;
dots?: boolean; dots?: boolean;
@ -44,12 +44,13 @@ export interface Settings {
vertical?: boolean; vertical?: boolean;
verticalSwiping?: boolean; verticalSwiping?: boolean;
waitForAnimate?: boolean; waitForAnimate?: boolean;
dotPosition?: DotPosition;
} }
export interface ResponsiveObject { export interface ResponsiveObject {
breakpoint: number; breakpoint: number;
settings: 'unslick' | Settings; settings: 'unslick' | Settings;
} }
export declare class Carousel extends AntdComponent { export declare class Carousel extends Settings, AntdComponent {
/** /**
* Callback function called after the current index changes * Callback function called after the current index changes
* @type Function * @type Function