fix: carousel customPaging demo

This commit is contained in:
wangxueliang 2018-07-20 18:24:22 +08:00
parent dcf2048231
commit e7d82d3b60
6 changed files with 106 additions and 30 deletions

View File

@ -176,6 +176,104 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
</div>
`;
exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
<div class="ant-carousel">
<div class="slick-slider slick-initialized">
<button type="button" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
<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;">
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
</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;">
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
</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;">
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
</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;">
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
</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;">
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
</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;">
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
</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;">
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
</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;">
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
</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;">
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
</div>
</div>
</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;">
<li class="slick-active">
<a class="">
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/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/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/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/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
</a>
</li>
</ul>
</div>
</div>
`;
exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
<div class="ant-carousel">
<div class="slick-slider slick-initialized">

View File

@ -1,3 +1,3 @@
import demoTest from '../../../tests/shared/demoTest'
demoTest('carousel', { skip: ['customPaging.md'] })
demoTest('carousel')

View File

@ -14,31 +14,22 @@ Custom paging display
<a slot="customPaging" slot-scope="props">
<img :src="getImgUrl(props.i)" />
</a>
<div>
<img :src="imgList['abstract01']" />
</div>
<div>
<img :src="imgList['abstract02']" />
</div>
<div>
<img :src="imgList['abstract03']" />
</div>
<div>
<img :src="imgList['abstract04']" />
<div v-for="item in 4">
<img :src="baseUrl+'abstract0'+item+'.jpg'" />
</div>
</a-carousel>
</template>
<script>
import imgList from '../../vc-slick/demo/imglist'
const baseUrl = 'https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/'
export default {
data() {
return {
imgList,
baseUrl,
}
},
methods: {
getImgUrl(i) {
return this.imgList[`abstract0${i + 1}`]
return `${baseUrl}abstract0${i + 1}.jpg`
}
}
}

View File

@ -18,4 +18,4 @@
| next() | Change current slide to next slide |
| prev() | Change current slide to previous slide |
For more info on the parameters, refer to the <https://github.com/akiran/react-slick>
For more info on the parameters, refer to the [vc-slick props](<https://github.com/vueComponent/ant-design/blob/master/components/vc-slick/src/default-props.js#L3>)

View File

@ -18,4 +18,4 @@
| next() | 切换到下一面板 |
| prev() | 切换到上一面板 |
更多参数可参考:<https://github.com/akiran/react-slick>
更多参数可参考:[vc-slick props](<https://github.com/vueComponent/ant-design/blob/master/components/vc-slick/src/default-props.js#L3>)

View File

@ -5,20 +5,13 @@ const defaultProps = {
// 自定义高度
adaptiveHeight: PropTypes.bool.def(false),
afterChange: PropTypes.any.def(null),
// appendDots: PropTypes.func.def((h, { dots }) => {
// return <ul style={{ display: 'block' }}>{dots}</ul>
// }),
arrows: PropTypes.bool.def(true),
autoplay: PropTypes.bool.def(false),
autoplaySpeed: PropTypes.number.def(3000),
beforeChange: PropTypes.any.def(null),
centerMode: PropTypes.bool.def(false),
centerPadding: PropTypes.string.def('50px'),
// className: '',
cssEase: PropTypes.string.def('ease'),
// customPaging: PropTypes.func.def((h, { i }) => {
// return <button>{i + 1}</button>
// }),
dots: PropTypes.bool.def(false),
dotsClass: PropTypes.string.def('slick-dots'),
draggable: PropTypes.bool.def(true),
@ -30,20 +23,14 @@ const defaultProps = {
infinite: PropTypes.bool.def(true),
initialSlide: PropTypes.number.def(0),
lazyLoad: PropTypes.any.def(null),
// nextArrow: PropTypes.any.def(null),
verticalSwiping: PropTypes.bool.def(false),
asNavFor: PropTypes.any.def(null),
// onEdge: null,
// onInit: null,
// onLazyLoadError: null,
// onReInit: null,
// 圆点hover是否暂停
pauseOnDotsHover: PropTypes.bool.def(false),
// focus是否暂停
pauseOnFocus: PropTypes.bool.def(false),
// hover是否暂停
pauseOnHover: PropTypes.bool.def(true),
// prevArrow: PropTypes.any.def(null),
responsive: PropTypes.any.def(null),
rows: PropTypes.number.def(1),
rtl: PropTypes.bool.def(false),