test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-02 12:07:54 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: update carousel

Browse Source
This commit is contained in:
tanjinzhou 2020-07-20 16:29:46 +08:00
parent a3592033be
commit 0faded160b
11 changed files with 298 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit 9df702457ee48468507ed7c6c1bf73758087f227 Subproject commit c2521df74700792b5cd6c353cf9fce91fbd40e19

4
components/_util/BaseMixin.js
View File

@ -17,7 +17,9 @@ export default {
} }
} }
Object.assign(this.$data, newState); Object.assign(this.$data, newState);
this.$forceUpdate(); if (this._.isMounted) {
this.$forceUpdate();
}
this.$nextTick(() => { this.$nextTick(() => {
callback && callback(); callback && callback();
}); });

2
components/_util/vnode.js
View File

@ -1,5 +1,6 @@
import { filterEmpty } from './props-util'; import { filterEmpty } from './props-util';
import { cloneVNode } from 'vue'; import { cloneVNode } from 'vue';
import warning from './warning';
export function cloneElement(vnode, nodeProps = {}, override = true) { export function cloneElement(vnode, nodeProps = {}, override = true) {
let ele = vnode; let ele = vnode;
@ -13,6 +14,7 @@ export function cloneElement(vnode, nodeProps = {}, override = true) {
// cloneVNode内部是合并属性，这里改成覆盖属性 // cloneVNode内部是合并属性，这里改成覆盖属性
node.props = override ? { ...node.props, ...nodeProps } : node.props; node.props = override ? { ...node.props, ...nodeProps } : node.props;
warning(typeof node.props.class !== 'object', 'class must be string');
return node; return node;
} }

59
components/carousel/index.jsx
View File

@ -1,13 +1,8 @@
import { inject } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import hasProp, { import hasProp, { initDefaultProps, getComponent } from '../_util/props-util';
initDefaultProps,
getComponent,
filterEmpty,
getListeners,
} from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import Base from '../base';
import warning from '../_util/warning'; import warning from '../_util/warning';
import classNames from 'classnames'; import classNames from 'classnames';
@ -79,21 +74,22 @@ export const CarouselProps = {
const Carousel = { const Carousel = {
name: 'ACarousel', name: 'ACarousel',
inheritAttrs: false,
props: initDefaultProps(CarouselProps, { props: initDefaultProps(CarouselProps, {
dots: true, dots: true,
arrows: false, arrows: false,
draggable: false, draggable: false,
}), }),
inject: { setup() {
configProvider: { default: () => ConfigConsumerProps }, return {
configProvider: inject('configProvider', ConfigConsumerProps),
};
}, },
beforeMount() { beforeMount() {
this.onWindowResized = debounce(this.onWindowResized, 500, { this.onWindowResized = debounce(this.onWindowResized, 500, {
leading: false, leading: false,
}); });
}, },
mounted() { mounted() {
if (hasProp(this, 'vertical')) { if (hasProp(this, 'vertical')) {
warning( warning(
@ -107,7 +103,7 @@ const Carousel = {
window.addEventListener('resize', this.onWindowResized); window.addEventListener('resize', this.onWindowResized);
} }
// 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.slick && this.slick.innerSlider;
}, },
beforeUnmount() { beforeUnmount() {
const { autoplay } = this; const { autoplay } = this;
@ -126,29 +122,27 @@ const Carousel = {
} }
return 'bottom'; return 'bottom';
}, },
saveSlick(node) {
this.slick = node;
},
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;
if ( if (autoplay && this.slick && this.slick.innerSlider && this.slick.innerSlider.autoPlay) {
autoplay && this.slick.innerSlider.autoPlay();
this.$refs.slick &&
this.$refs.slick.innerSlider &&
this.$refs.slick.innerSlider.autoPlay
) {
this.$refs.slick.innerSlider.autoPlay();
} }
}, },
next() { next() {
this.$refs.slick.slickNext(); this.slick.slickNext();
}, },
prev() { prev() {
this.$refs.slick.slickPrev(); this.slick.slickPrev();
}, },
goTo(slide, dontAnimate = false) { goTo(slide, dontAnimate = false) {
this.$refs.slick.slickGoTo(slide, dontAnimate); this.slick.slickGoTo(slide, dontAnimate);
}, },
}, },
@ -172,29 +166,22 @@ const Carousel = {
className = `${className} ${className}-vertical`; className = `${className} ${className}-vertical`;
} }
const SlickCarouselProps = { const SlickCarouselProps = {
props: { ...props,
...props, ...this.$attrs,
nextArrow: getComponent(this, 'nextArrow'), nextArrow: getComponent(this, 'nextArrow'),
prevArrow: getComponent(this, 'prevArrow'), prevArrow: getComponent(this, 'prevArrow'),
},
on: getListeners(this),
scopedSlots: this.$scopedSlots,
}; };
const children = filterEmpty($slots.default);
return ( return (
<div class={className}> <div class={className}>
<SlickCarousel ref="slick" {...SlickCarouselProps}> <SlickCarousel ref="slick" {...SlickCarouselProps} vSlots={$slots}></SlickCarousel>
{children}
</SlickCarousel>
</div> </div>
); );
}, },
}; };
/* istanbul ignore next */ /* istanbul ignore next */
Carousel.install = function(Vue) { Carousel.install = function(app) {
Vue.use(Base); app.component(Carousel.name, Carousel);
Vue.component(Carousel.name, Carousel);
}; };
export default Carousel; export default Carousel;

235
components/vc-slick/src/arrows.js
View File

@ -1,146 +1,119 @@
import classnames from 'classnames';
import { cloneElement } from '../../_util/vnode'; import { cloneElement } from '../../_util/vnode';
import { canGoNext } from './utils/innerSliderUtils'; import { canGoNext } from './utils/innerSliderUtils';
function noop() {} function noop() {}
export const PrevArrow = { function handler(options, handle, e) {
functional: true, if (e) {
clickHandler(options, handle, e) { e.preventDefault();
if (e) { }
e.preventDefault(); handle(options, e);
} }
handle(options, e);
},
render(createElement, context) {
const { props } = context;
const { clickHandler, infinite, currentSlide, slideCount, slidesToShow } = props;
const prevClasses = { 'slick-arrow': true, 'slick-prev': true };
let prevHandler = function(e) {
if (e) {
e.preventDefault();
}
clickHandler({ message: 'previous' });
};
if (!infinite && (currentSlide === 0 || slideCount <= slidesToShow)) { const PrevArrow = (_, { attrs }) => {
prevClasses['slick-disabled'] = true; const { clickHandler, infinite, currentSlide, slideCount, slidesToShow } = attrs;
prevHandler = noop; const prevClasses = { 'slick-arrow': true, 'slick-prev': true };
} let prevHandler = function(e) {
handler({ message: 'previous' }, clickHandler, e);
};
const prevArrowProps = { if (!infinite && (currentSlide === 0 || slideCount <= slidesToShow)) {
key: '0', prevClasses['slick-disabled'] = true;
domProps: { prevHandler = noop;
'data-role': 'none', }
const prevArrowProps = {
key: '0',
'data-role': 'none',
class: prevClasses,
style: { display: 'block' },
onClick: prevHandler,
};
const customProps = {
currentSlide,
slideCount,
};
let prevArrow;
if (attrs.prevArrow) {
prevArrow = cloneElement(
attrs.prevArrow({
...prevArrowProps,
...customProps,
}),
{
key: '0',
class: prevClasses,
style: { display: 'block' },
onClick: prevHandler,
}, },
class: prevClasses, false,
style: { display: 'block' }, );
on: { } else {
click: prevHandler, prevArrow = (
}, <button key="0" type="button" {...prevArrowProps}>
}; {' '}
const customProps = { Previous
currentSlide, </button>
slideCount, );
}; }
let prevArrow; return prevArrow;
if (props.prevArrow) {
prevArrow = cloneElement(
props.prevArrow({
...prevArrowProps,
...{
props: customProps,
},
}),
{
key: '0',
class: prevClasses,
style: { display: 'block' },
on: {
click: prevHandler,
},
},
);
} else {
prevArrow = (
<button key="0" type="button" {...prevArrowProps}>
{' '}
Previous
</button>
);
}
return prevArrow;
},
}; };
export const NextArrow = { PrevArrow.inheritAttrs = false;
functional: true,
clickHandler(options, handle, e) {
if (e) {
e.preventDefault();
}
handle(options, e);
},
render(createElement, context) {
const { props } = context;
const { clickHandler, currentSlide, slideCount } = props;
const nextClasses = { 'slick-arrow': true, 'slick-next': true }; const NextArrow = (_, { attrs }) => {
let nextHandler = function(e) { const { clickHandler, currentSlide, slideCount } = attrs;
if (e) {
e.preventDefault();
}
clickHandler({ message: 'next' });
};
if (!canGoNext(props)) {
nextClasses['slick-disabled'] = true;
nextHandler = noop;
}
const nextArrowProps = { const nextClasses = { 'slick-arrow': true, 'slick-next': true };
key: '1', let nextHandler = function(e) {
domProps: { handler({ message: 'next' }, clickHandler, e);
'data-role': 'none', };
if (!canGoNext(attrs)) {
nextClasses['slick-disabled'] = true;
nextHandler = noop;
}
const nextArrowProps = {
key: '1',
'data-role': 'none',
class: classnames(nextClasses),
style: { display: 'block' },
onClick: nextHandler,
};
const customProps = {
currentSlide,
slideCount,
};
let nextArrow;
if (attrs.nextArrow) {
nextArrow = cloneElement(
attrs.nextArrow({
...nextArrowProps,
...customProps,
}),
{
key: '1',
class: classnames(nextClasses),
style: { display: 'block' },
onClick: nextHandler,
}, },
class: nextClasses, false,
style: { display: 'block' }, );
on: { } else {
click: nextHandler, nextArrow = (
}, <button key="1" type="button" {...nextArrowProps}>
}; {' '}
const customProps = { Next
currentSlide, </button>
slideCount, );
}; }
let nextArrow;
if (props.nextArrow) { return nextArrow;
nextArrow = cloneElement(
props.nextArrow({
...nextArrowProps,
...{
props: customProps,
},
}),
{
key: '1',
class: nextClasses,
style: { display: 'block' },
on: {
click: nextHandler,
},
},
);
} else {
nextArrow = (
<button key="1" type="button" {...nextArrowProps}>
{' '}
Next
</button>
);
}
return nextArrow;
},
}; };
NextArrow.inheritAttrs = false;
export { PrevArrow, NextArrow };

132
components/vc-slick/src/dots.js
View File

@ -13,75 +13,73 @@ const getDotCount = function(spec) {
return dots; return dots;
}; };
export default { const Dots = (_, { attrs }) => {
functional: true, const {
render(createElement, context) { slideCount,
const { props, listeners } = context; slidesToScroll,
const { slidesToShow,
slideCount, infinite,
currentSlide,
appendDots,
customPaging,
clickHandler,
dotsClass,
onMouseenter,
onMouseover,
onMouseleave,
} = attrs;
const dotCount = getDotCount({
slideCount,
slidesToScroll,
slidesToShow,
infinite,
});
// Apply join & split to Array to pre-fill it for IE8
//
// Credit: http://stackoverflow.com/a/13735425/1849458
const mouseEvents = { onMouseenter, onMouseover, onMouseleave };
const dots = Array.apply(
null,
Array(dotCount + 1)
.join('0')
.split(''),
).map((x, i) => {
const leftBound = i * slidesToScroll;
const rightBound = i * slidesToScroll + (slidesToScroll - 1);
const className = classnames({
'slick-active': currentSlide >= leftBound && currentSlide <= rightBound,
});
const dotOptions = {
message: 'dots',
index: i,
slidesToScroll, slidesToScroll,
slidesToShow,
infinite,
currentSlide, currentSlide,
appendDots, };
customPaging, function onClick(e) {
clickHandler, // In Autoplay the focus stays on clicked button even after transition
dotsClass, // to next slide. That only goes away by click somewhere outside
} = props; if (e) {
const dotCount = getDotCount({ e.preventDefault();
slideCount,
slidesToScroll,
slidesToShow,
infinite,
});
// Apply join & split to Array to pre-fill it for IE8
//
// Credit: http://stackoverflow.com/a/13735425/1849458
const { mouseenter, mouseover, mouseleave } = listeners;
const mouseEvents = { mouseenter, mouseover, mouseleave };
const dots = Array.apply(
null,
Array(dotCount + 1)
.join('0')
.split(''),
).map((x, i) => {
const leftBound = i * slidesToScroll;
const rightBound = i * slidesToScroll + (slidesToScroll - 1);
const className = classnames({
'slick-active': currentSlide >= leftBound && currentSlide <= rightBound,
});
const dotOptions = {
message: 'dots',
index: i,
slidesToScroll,
currentSlide,
};
function onClick(e) {
// In Autoplay the focus stays on clicked button even after transition
// to next slide. That only goes away by click somewhere outside
if (e) {
e.preventDefault();
}
clickHandler(dotOptions);
} }
return ( clickHandler(dotOptions);
<li key={i} class={className}> }
{cloneElement(customPaging({ i }), { return (
on: { <li key={i} class={className}>
click: onClick, {cloneElement(customPaging({ i }), {
}, onClick,
})} })}
</li> </li>
); );
}); });
return cloneElement(appendDots({ dots }), { return cloneElement(appendDots({ dots }), {
class: dotsClass, class: dotsClass,
on: { ...mouseEvents,
...mouseEvents, });
},
});
},
}; };
Dots.inheritAttrs = false;
export default Dots;

96
components/vc-slick/src/inner-slider.js
View File

@ -1,8 +1,5 @@
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import classnames from 'classnames'; import classnames from 'classnames';
import Vue from 'vue';
import ref from 'vue-ref';
import { getStyle, getListeners } from '../../_util/props-util';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import defaultProps from './default-props'; import defaultProps from './default-props';
import initialState from './initial-state'; import initialState from './initial-state';
@ -28,11 +25,11 @@ import Dots from './dots';
import { PrevArrow, NextArrow } from './arrows'; import { PrevArrow, NextArrow } from './arrows';
import ResizeObserver from 'resize-observer-polyfill'; import ResizeObserver from 'resize-observer-polyfill';
Vue.use(ref, { name: 'ant-ref' });
function noop() {} function noop() {}
export default { export default {
name: 'InnerSlider',
inheritAttrs: false,
props: { props: {
...defaultProps, ...defaultProps,
}, },
@ -119,7 +116,7 @@ export default {
slideCount: children.length, slideCount: children.length,
}); });
children.forEach(child => { children.forEach(child => {
const childWidth = getStyle(child).width.split('px')[0]; const childWidth = child.props.width.split('px')[0];
childrenWidths.push(childWidth); childrenWidths.push(childWidth);
trackWidth += childWidth; trackWidth += childWidth;
}); });
@ -236,7 +233,7 @@ export default {
const slidesToLoad = state.lazyLoadedList.filter( const slidesToLoad = state.lazyLoadedList.filter(
value => this.lazyLoadedList.indexOf(value) < 0, value => this.lazyLoadedList.indexOf(value) < 0,
); );
if (getListeners(this).lazyLoad && slidesToLoad.length > 0) { if (this.$attrs.onLazyLoad && slidesToLoad.length > 0) {
this.$emit('lazyLoad', slidesToLoad); this.$emit('lazyLoad', slidesToLoad);
} }
this.setState(state, () => { this.setState(state, () => {
@ -574,7 +571,7 @@ export default {
}, },
}, },
render() { render() {
const className = classnames('slick-slider', { const className = classnames('slick-slider', this.$attrs.class, {
'slick-vertical': this.vertical, 'slick-vertical': this.vertical,
'slick-initialized': true, 'slick-initialized': true,
}); });
@ -604,21 +601,12 @@ export default {
]); ]);
const { pauseOnHover } = this.$props; const { pauseOnHover } = this.$props;
trackProps = { trackProps = {
props: { ...trackProps,
...trackProps, focusOnSelect: this.focusOnSelect ? this.selectHandler : null,
focusOnSelect: this.focusOnSelect ? this.selectHandler : null, ref: this.trackRefHandler,
}, onMouseenter: pauseOnHover ? this.onTrackOver : noop,
directives: [ onMouseleave: pauseOnHover ? this.onTrackLeave : noop,
{ onMouseover: pauseOnHover ? this.onTrackOver : noop,
name: 'ant-ref',
value: this.trackRefHandler,
},
],
on: {
mouseenter: pauseOnHover ? this.onTrackOver : noop,
mouseleave: pauseOnHover ? this.onTrackLeave : noop,
mouseover: pauseOnHover ? this.onTrackOver : noop,
},
}; };
let dots; let dots;
@ -636,7 +624,7 @@ export default {
]); ]);
dotProps.customPaging = this.customPaging; dotProps.customPaging = this.customPaging;
dotProps.appendDots = this.appendDots; dotProps.appendDots = this.appendDots;
const { customPaging, appendDots } = this.$scopedSlots; const { customPaging, appendDots } = this.$slots;
if (customPaging) { if (customPaging) {
dotProps.customPaging = customPaging; dotProps.customPaging = customPaging;
} }
@ -645,15 +633,11 @@ export default {
} }
const { pauseOnDotsHover } = this.$props; const { pauseOnDotsHover } = this.$props;
dotProps = { dotProps = {
props: { ...dotProps,
...dotProps, clickHandler: this.changeSlide,
clickHandler: this.changeSlide, onMouseenter: pauseOnDotsHover ? this.onDotsLeave : noop,
}, onMouseover: pauseOnDotsHover ? this.onDotsOver : noop,
on: { onMouseleave: pauseOnDotsHover ? this.onDotsLeave : noop,
mouseenter: pauseOnDotsHover ? this.onDotsLeave : noop,
mouseover: pauseOnDotsHover ? this.onDotsOver : noop,
mouseleave: pauseOnDotsHover ? this.onDotsLeave : noop,
},
}; };
dots = <Dots {...dotProps} />; dots = <Dots {...dotProps} />;
} }
@ -667,7 +651,7 @@ export default {
'slidesToShow', 'slidesToShow',
]); ]);
arrowProps.clickHandler = this.changeSlide; arrowProps.clickHandler = this.changeSlide;
const { prevArrow: prevArrowCustom, nextArrow: nextArrowCustom } = this.$scopedSlots; const { prevArrow: prevArrowCustom, nextArrow: nextArrowCustom } = this.$slots;
if (prevArrowCustom) { if (prevArrowCustom) {
arrowProps.prevArrow = prevArrowCustom; arrowProps.prevArrow = prevArrowCustom;
} }
@ -675,8 +659,8 @@ export default {
arrowProps.nextArrow = nextArrowCustom; arrowProps.nextArrow = nextArrowCustom;
} }
if (this.arrows) { if (this.arrows) {
prevArrow = <PrevArrow {...{ props: arrowProps }} />; prevArrow = <PrevArrow {...arrowProps} />;
nextArrow = <NextArrow {...{ props: arrowProps }} />; nextArrow = <NextArrow {...arrowProps} />;
} }
let verticalHeightStyle = null; let verticalHeightStyle = null;
@ -705,44 +689,30 @@ export default {
const listStyle = { ...verticalHeightStyle, ...centerPaddingStyle }; const listStyle = { ...verticalHeightStyle, ...centerPaddingStyle };
const touchMove = this.touchMove; const touchMove = this.touchMove;
let listProps = { let listProps = {
directives: [ ref: this.listRefHandler,
{
name: 'ant-ref',
value: this.listRefHandler,
},
],
class: 'slick-list', class: 'slick-list',
style: listStyle, style: listStyle,
on: { onClick: this.clickHandler,
click: this.clickHandler, onMousedown: touchMove ? this.swipeStart : noop,
mousedown: touchMove ? this.swipeStart : noop, onMousemove: this.dragging && touchMove ? this.swipeMove : noop,
mousemove: this.dragging && touchMove ? this.swipeMove : noop, onMouseup: touchMove ? this.swipeEnd : noop,
mouseup: touchMove ? this.swipeEnd : noop, onMouseleave: this.dragging && touchMove ? this.swipeEnd : noop,
mouseleave: this.dragging && touchMove ? this.swipeEnd : noop, onTouchstart: touchMove ? this.swipeStart : noop,
touchstart: touchMove ? this.swipeStart : noop, onTouchmove: this.dragging && touchMove ? this.swipeMove : noop,
touchmove: this.dragging && touchMove ? this.swipeMove : noop, onTouchend: touchMove ? this.swipeEnd : noop,
touchend: touchMove ? this.swipeEnd : noop, onTouchcancel: this.dragging && touchMove ? this.swipeEnd : noop,
touchcancel: this.dragging && touchMove ? this.swipeEnd : noop, onKeydown: this.accessibility ? this.keyHandler : noop,
keydown: this.accessibility ? this.keyHandler : noop,
},
}; };
let innerSliderProps = { let innerSliderProps = {
class: className, class: className,
props: { dir: 'ltr',
dir: 'ltr',
},
}; };
if (this.unslick) { if (this.unslick) {
listProps = { listProps = {
class: 'slick-list', class: 'slick-list',
directives: [ ref: this.listRefHandler,
{
name: 'ant-ref',
value: this.listRefHandler,
},
],
}; };
innerSliderProps = { class: className }; innerSliderProps = { class: className };
} }

38
components/vc-slick/src/slider.js
View File

@ -1,20 +1,18 @@
import json2mq from 'json2mq'; import json2mq from 'json2mq';
import Vue from 'vue';
import ref from 'vue-ref';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { cloneElement } from '../../_util/vnode'; import { cloneElement } from '../../_util/vnode';
import { getStyle, getListeners } from '../../_util/props-util';
import InnerSlider from './inner-slider'; import InnerSlider from './inner-slider';
import defaultProps from './default-props'; import defaultProps from './default-props';
import { canUseDOM } from './utils/innerSliderUtils'; import { canUseDOM } from './utils/innerSliderUtils';
import { getSlot } from '../../_util/props-util';
const enquire = canUseDOM() && require('enquire.js'); const enquire = canUseDOM() && require('enquire.js');
Vue.use(ref, { name: 'ant-ref' });
export default { export default {
name: 'Slider',
props: { props: {
...defaultProps, ...defaultProps,
}, },
inheritAttrs: false,
mixins: [BaseMixin], mixins: [BaseMixin],
data() { data() {
this._responsiveMediaHandlers = []; this._responsiveMediaHandlers = [];
@ -132,7 +130,7 @@ export default {
} }
// makes sure that children is an array, even when there is only 1 child // makes sure that children is an array, even when there is only 1 child
let children = this.$slots.default || []; let children = getSlot(this) || [];
// Children may contain false or null, so we should filter them // Children may contain false or null, so we should filter them
// children may also contain string filled with spaces (in certain cases where we use jsx strings) // children may also contain string filled with spaces (in certain cases where we use jsx strings)
@ -155,16 +153,14 @@ export default {
for (let j = i; j < i + settings.rows * settings.slidesPerRow; j += settings.slidesPerRow) { for (let j = i; j < i + settings.rows * settings.slidesPerRow; j += settings.slidesPerRow) {
const row = []; const row = [];
for (let k = j; k < j + settings.slidesPerRow; k += 1) { for (let k = j; k < j + settings.slidesPerRow; k += 1) {
if (settings.variableWidth && getStyle(children[k])) { if (settings.variableWidth && children[k].props.style) {
currentWidth = getStyle(children[k]).width; currentWidth = children[k].props.style.width;
} }
if (k >= children.length) break; if (k >= children.length) break;
row.push( row.push(
cloneElement(children[k], { cloneElement(children[k], {
key: 100 * i + 10 * j + k, key: 100 * i + 10 * j + k,
attrs: { tabindex: -1,
tabindex: -1,
},
style: { style: {
width: `${100 / settings.slidesPerRow}%`, width: `${100 / settings.slidesPerRow}%`,
display: 'inline-block', display: 'inline-block',
@ -192,20 +188,12 @@ export default {
settings.unslick = true; settings.unslick = true;
} }
const sliderProps = { const sliderProps = {
props: { ...this.$attrs,
...settings, ...settings,
children: newChildren, children: newChildren,
__propsSymbol__: Symbol(), __propsSymbol__: Symbol(),
}, ref: this.innerSliderRefHandler,
on: getListeners(this),
directives: [
{
name: 'ant-ref',
value: this.innerSliderRefHandler,
},
],
scopedSlots: this.$scopedSlots,
}; };
return <InnerSlider {...sliderProps} />; return <InnerSlider {...sliderProps} vSlots={this.$slots} />;
}, },
}; };

118
components/vc-slick/src/track.js
View File

@ -1,6 +1,7 @@
import { createVNode } from 'vue';
import classnames from 'classnames'; import classnames from 'classnames';
import { cloneElement } from '../../_util/vnode'; import { cloneElement } from '../../_util/vnode';
import { getStyle, getClass } from '../../_util/props-util'; import { flattenChildren } from '../../_util/props-util';
import { lazyStartIndex, lazyEndIndex, getPreClones } from './utils/innerSliderUtils'; import { lazyStartIndex, lazyEndIndex, getPreClones } from './utils/innerSliderUtils';
// given specifications/props for a slide, fetch all the classes that need to be applied to the slide // given specifications/props for a slide, fetch all the classes that need to be applied to the slide
@ -75,7 +76,7 @@ const getSlideStyle = function(spec) {
const getKey = (child, fallbackKey) => child.key || (child.key === 0 && '0') || fallbackKey; const getKey = (child, fallbackKey) => child.key || (child.key === 0 && '0') || fallbackKey;
const renderSlides = function(spec, children, createElement) { const renderSlides = function(spec, children) {
let key; let key;
const slides = []; const slides = [];
const preCloneSlides = []; const preCloneSlides = [];
@ -97,35 +98,27 @@ const renderSlides = function(spec, children, createElement) {
if (!spec.lazyLoad || (spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0)) { if (!spec.lazyLoad || (spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0)) {
child = elem; child = elem;
} else { } else {
child = createElement('div'); child = createVNode('div');
} }
const childStyle = getSlideStyle({ ...spec, index }); const childStyle = getSlideStyle({ ...spec, index });
const slideClass = getClass(child.context) || ''; const slideClass = child.props.class || '';
let slideClasses = getSlideClasses({ ...spec, index }); let slideClasses = getSlideClasses({ ...spec, index });
// push a cloned element of the desired slide // push a cloned element of the desired slide
slides.push( slides.push(
cloneElement( cloneElement(child, {
child, key: 'original' + getKey(child, index),
{ tabindex: '-1',
key: 'original' + getKey(child, index), 'data-index': index,
attrs: { 'aria-hidden': !slideClasses['slick-active'],
tabindex: '-1', class: classnames(slideClasses, slideClass),
'data-index': index, style: { outline: 'none', ...(child.props.style || {}), ...childStyle },
'aria-hidden': !slideClasses['slick-active'], onClick: () => {
}, // child.props && child.props.onClick && child.props.onClick(e)
class: classnames(slideClasses, slideClass), if (spec.focusOnSelect) {
style: { outline: 'none', ...(getStyle(child.context) || {}), ...childStyle }, spec.focusOnSelect(childOnClickOptions);
on: { }
click: () => {
// child.props && child.props.onClick && child.props.onClick(e)
if (spec.focusOnSelect) {
spec.focusOnSelect(childOnClickOptions);
}
},
},
}, },
true, }),
),
); );
// if slide needs to be precloned or postcloned // if slide needs to be precloned or postcloned
@ -141,19 +134,15 @@ const renderSlides = function(spec, children, createElement) {
cloneElement(child, { cloneElement(child, {
key: 'precloned' + getKey(child, key), key: 'precloned' + getKey(child, key),
class: classnames(slideClasses, slideClass), class: classnames(slideClasses, slideClass),
attrs: { tabindex: '-1',
tabindex: '-1', 'data-index': key,
'data-index': key, 'aria-hidden': !slideClasses['slick-active'],
'aria-hidden': !slideClasses['slick-active'], style: { ...(child.props.style || {}), ...childStyle },
}, onClick: () => {
style: { ...(getStyle(child.context) || {}), ...childStyle }, // child.props && child.props.onClick && child.props.onClick(e)
on: { if (spec.focusOnSelect) {
click: () => { spec.focusOnSelect(childOnClickOptions);
// child.props && child.props.onClick && child.props.onClick(e) }
if (spec.focusOnSelect) {
spec.focusOnSelect(childOnClickOptions);
}
},
}, },
}), }),
); );
@ -168,20 +157,16 @@ const renderSlides = function(spec, children, createElement) {
postCloneSlides.push( postCloneSlides.push(
cloneElement(child, { cloneElement(child, {
key: 'postcloned' + getKey(child, key), key: 'postcloned' + getKey(child, key),
attrs: { tabindex: '-1',
tabindex: '-1', 'data-index': key,
'data-index': key, 'aria-hidden': !slideClasses['slick-active'],
'aria-hidden': !slideClasses['slick-active'],
},
class: classnames(slideClasses, slideClass), class: classnames(slideClasses, slideClass),
style: { ...(getStyle(child.context) || {}), ...childStyle }, style: { ...(child.props.style || {}), ...childStyle },
on: { onClick: () => {
click: () => { // child.props && child.props.onClick && child.props.onClick(e)
// child.props && child.props.onClick && child.props.onClick(e) if (spec.focusOnSelect) {
if (spec.focusOnSelect) { spec.focusOnSelect(childOnClickOptions);
spec.focusOnSelect(childOnClickOptions); }
}
},
}, },
}), }),
); );
@ -195,21 +180,18 @@ const renderSlides = function(spec, children, createElement) {
} }
}; };
export default { const Track = (_, { attrs, slots }) => {
functional: true, const slides = renderSlides(attrs, flattenChildren(slots?.default()));
render(createElement, context) { const { onMouseenter, onMouseover, onMouseleave } = attrs;
const { props, listeners, children, data } = context; const mouseEvents = { onMouseenter, onMouseover, onMouseleave };
const slides = renderSlides(props, children, createElement); const trackProps = {
const { mouseenter, mouseover, mouseleave } = listeners; class: 'slick-track',
const mouseEvents = { mouseenter, mouseover, mouseleave }; style: attrs.trackStyle,
const trackProps = { ...mouseEvents,
class: 'slick-track', };
style: props.trackStyle, return <div {...trackProps}>{slides}</div>;
on: {
...mouseEvents,
},
directives: data.directives,
};
return <div {...trackProps}>{slides}</div>;
},
}; };
Track.inheritAttrs = false;
export default Track;

2
examples/App.vue
View File

@ -4,7 +4,7 @@
</div> </div>
</template> </template>
<script> <script>
import demo from '../antdv-demo/docs/tree-select/demo/treeData'; import demo from '../antdv-demo/docs/carousel/demo/customPaging';
export default { export default {
components: { components: {

5
examples/index.js
View File

@ -1,4 +1,5 @@
import '@babel/polyfill'; import '@babel/polyfill';
import 'ant-design-vue/style.js';
import { createApp, version } from 'vue'; import { createApp, version } from 'vue';
import App from './App.vue'; import App from './App.vue';
import { import {
@ -30,12 +31,11 @@ import {
Tree, Tree,
TreeSelect, TreeSelect,
Transfer, Transfer,
Carousel,
notification, notification,
message, message,
} from 'ant-design-vue'; } from 'ant-design-vue';
import 'ant-design-vue/style.js';
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log('Vue version: ', version); console.log('Vue version: ', version);
const basic = { const basic = {
@ -80,4 +80,5 @@ app
.use(Tree) .use(Tree)
.use(TreeSelect) .use(TreeSelect)
.use(Transfer) .use(Transfer)
.use(Carousel)
.mount('#app'); .mount('#app');