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/2682/head
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);
this.$forceUpdate();
if (this._.isMounted) {
this.$forceUpdate();
}
this.$nextTick(() => {
callback && callback();
});

2
components/_util/vnode.js
View File

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

59
components/carousel/index.jsx
View File

@ -1,13 +1,8 @@
import { inject } from 'vue';
import PropTypes from '../_util/vue-types';
import debounce from 'lodash/debounce';
import hasProp, {
initDefaultProps,
getComponent,
filterEmpty,
getListeners,
} from '../_util/props-util';
import hasProp, { initDefaultProps, getComponent } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
import Base from '../base';
import warning from '../_util/warning';
import classNames from 'classnames';
@ -79,21 +74,22 @@ export const CarouselProps = {
const Carousel = {
name: 'ACarousel',
inheritAttrs: false,
props: initDefaultProps(CarouselProps, {
dots: true,
arrows: false,
draggable: false,
}),
inject: {
configProvider: { default: () => ConfigConsumerProps },
setup() {
return {
configProvider: inject('configProvider', ConfigConsumerProps),
};
},
beforeMount() {
this.onWindowResized = debounce(this.onWindowResized, 500, {
leading: false,
});
},
mounted() {
if (hasProp(this, 'vertical')) {
warning(
@ -107,7 +103,7 @@ const Carousel = {
window.addEventListener('resize', this.onWindowResized);
}
// 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() {
const { autoplay } = this;
@ -126,29 +122,27 @@ const Carousel = {
}
return 'bottom';
},
saveSlick(node) {
this.slick = node;
},
onWindowResized() {
// Fix https://github.com/ant-design/ant-design/issues/2550
const { autoplay } = this;
if (
autoplay &&
this.$refs.slick &&
this.$refs.slick.innerSlider &&
this.$refs.slick.innerSlider.autoPlay
) {
this.$refs.slick.innerSlider.autoPlay();
if (autoplay && this.slick && this.slick.innerSlider && this.slick.innerSlider.autoPlay) {
this.slick.innerSlider.autoPlay();
}
},
next() {
this.$refs.slick.slickNext();
this.slick.slickNext();
},
prev() {
this.$refs.slick.slickPrev();
this.slick.slickPrev();
},
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`;
}
const SlickCarouselProps = {
props: {
...props,
nextArrow: getComponent(this, 'nextArrow'),
prevArrow: getComponent(this, 'prevArrow'),
},
on: getListeners(this),
scopedSlots: this.$scopedSlots,
...props,
...this.$attrs,
nextArrow: getComponent(this, 'nextArrow'),
prevArrow: getComponent(this, 'prevArrow'),
};
const children = filterEmpty($slots.default);
return (
<div class={className}>
<SlickCarousel ref="slick" {...SlickCarouselProps}>
{children}
</SlickCarousel>
<SlickCarousel ref="slick" {...SlickCarouselProps} vSlots={$slots}></SlickCarousel>
</div>
);
},
};
/* istanbul ignore next */
Carousel.install = function(Vue) {
Vue.use(Base);
Vue.component(Carousel.name, Carousel);
Carousel.install = function(app) {
app.component(Carousel.name, 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 { canGoNext } from './utils/innerSliderUtils';
function noop() {}
export const PrevArrow = {
functional: true,
clickHandler(options, handle, e) {
if (e) {
e.preventDefault();
}
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' });
};
function handler(options, handle, e) {
if (e) {
e.preventDefault();
}
handle(options, e);
}
if (!infinite && (currentSlide === 0 || slideCount <= slidesToShow)) {
prevClasses['slick-disabled'] = true;
prevHandler = noop;
}
const PrevArrow = (_, { attrs }) => {
const { clickHandler, infinite, currentSlide, slideCount, slidesToShow } = attrs;
const prevClasses = { 'slick-arrow': true, 'slick-prev': true };
let prevHandler = function(e) {
handler({ message: 'previous' }, clickHandler, e);
};
const prevArrowProps = {
key: '0',
domProps: {
'data-role': 'none',
if (!infinite && (currentSlide === 0 || slideCount <= slidesToShow)) {
prevClasses['slick-disabled'] = true;
prevHandler = noop;
}
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,
style: { display: 'block' },
on: {
click: prevHandler,
},
};
const customProps = {
currentSlide,
slideCount,
};
let 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;
},
false,
);
} else {
prevArrow = (
<button key="0" type="button" {...prevArrowProps}>
{' '}
Previous
</button>
);
}
return prevArrow;
};
export const NextArrow = {
functional: true,
clickHandler(options, handle, e) {
if (e) {
e.preventDefault();
}
handle(options, e);
},
render(createElement, context) {
const { props } = context;
const { clickHandler, currentSlide, slideCount } = props;
PrevArrow.inheritAttrs = false;
const nextClasses = { 'slick-arrow': true, 'slick-next': true };
let nextHandler = function(e) {
if (e) {
e.preventDefault();
}
clickHandler({ message: 'next' });
};
if (!canGoNext(props)) {
nextClasses['slick-disabled'] = true;
nextHandler = noop;
}
const NextArrow = (_, { attrs }) => {
const { clickHandler, currentSlide, slideCount } = attrs;
const nextArrowProps = {
key: '1',
domProps: {
'data-role': 'none',
const nextClasses = { 'slick-arrow': true, 'slick-next': true };
let nextHandler = function(e) {
handler({ message: 'next' }, clickHandler, e);
};
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,
style: { display: 'block' },
on: {
click: nextHandler,
},
};
const customProps = {
currentSlide,
slideCount,
};
let nextArrow;
false,
);
} else {
nextArrow = (
<button key="1" type="button" {...nextArrowProps}>
{' '}
Next
</button>
);
}
if (props.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;
},
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;
};
export default {
functional: true,
render(createElement, context) {
const { props, listeners } = context;
const {
slideCount,
const Dots = (_, { attrs }) => {
const {
slideCount,
slidesToScroll,
slidesToShow,
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,
slidesToShow,
infinite,
currentSlide,
appendDots,
customPaging,
clickHandler,
dotsClass,
} = props;
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 { 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);
};
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();
}
return (
<li key={i} class={className}>
{cloneElement(customPaging({ i }), {
on: {
click: onClick,
},
})}
</li>
);
});
clickHandler(dotOptions);
}
return (
<li key={i} class={className}>
{cloneElement(customPaging({ i }), {
onClick,
})}
</li>
);
});
return cloneElement(appendDots({ dots }), {
class: dotsClass,
on: {
...mouseEvents,
},
});
},
return cloneElement(appendDots({ dots }), {
class: dotsClass,
...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 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 defaultProps from './default-props';
import initialState from './initial-state';
@ -28,11 +25,11 @@ import Dots from './dots';
import { PrevArrow, NextArrow } from './arrows';
import ResizeObserver from 'resize-observer-polyfill';
Vue.use(ref, { name: 'ant-ref' });
function noop() {}
export default {
name: 'InnerSlider',
inheritAttrs: false,
props: {
...defaultProps,
},
@ -119,7 +116,7 @@ export default {
slideCount: children.length,
});
children.forEach(child => {
const childWidth = getStyle(child).width.split('px')[0];
const childWidth = child.props.width.split('px')[0];
childrenWidths.push(childWidth);
trackWidth += childWidth;
});
@ -236,7 +233,7 @@ export default {
const slidesToLoad = state.lazyLoadedList.filter(
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.setState(state, () => {
@ -574,7 +571,7 @@ export default {
},
},
render() {
const className = classnames('slick-slider', {
const className = classnames('slick-slider', this.$attrs.class, {
'slick-vertical': this.vertical,
'slick-initialized': true,
});
@ -604,21 +601,12 @@ export default {
]);
const { pauseOnHover } = this.$props;
trackProps = {
props: {
...trackProps,
focusOnSelect: this.focusOnSelect ? this.selectHandler : null,
},
directives: [
{
name: 'ant-ref',
value: this.trackRefHandler,
},
],
on: {
mouseenter: pauseOnHover ? this.onTrackOver : noop,
mouseleave: pauseOnHover ? this.onTrackLeave : noop,
mouseover: pauseOnHover ? this.onTrackOver : noop,
},
...trackProps,
focusOnSelect: this.focusOnSelect ? this.selectHandler : null,
ref: this.trackRefHandler,
onMouseenter: pauseOnHover ? this.onTrackOver : noop,
onMouseleave: pauseOnHover ? this.onTrackLeave : noop,
onMouseover: pauseOnHover ? this.onTrackOver : noop,
};
let dots;
@ -636,7 +624,7 @@ export default {
]);
dotProps.customPaging = this.customPaging;
dotProps.appendDots = this.appendDots;
const { customPaging, appendDots } = this.$scopedSlots;
const { customPaging, appendDots } = this.$slots;
if (customPaging) {
dotProps.customPaging = customPaging;
}
@ -645,15 +633,11 @@ export default {
}
const { pauseOnDotsHover } = this.$props;
dotProps = {
props: {
...dotProps,
clickHandler: this.changeSlide,
},
on: {
mouseenter: pauseOnDotsHover ? this.onDotsLeave : noop,
mouseover: pauseOnDotsHover ? this.onDotsOver : noop,
mouseleave: pauseOnDotsHover ? this.onDotsLeave : noop,
},
...dotProps,
clickHandler: this.changeSlide,
onMouseenter: pauseOnDotsHover ? this.onDotsLeave : noop,
onMouseover: pauseOnDotsHover ? this.onDotsOver : noop,
onMouseleave: pauseOnDotsHover ? this.onDotsLeave : noop,
};
dots = <Dots {...dotProps} />;
}
@ -667,7 +651,7 @@ export default {
'slidesToShow',
]);
arrowProps.clickHandler = this.changeSlide;
const { prevArrow: prevArrowCustom, nextArrow: nextArrowCustom } = this.$scopedSlots;
const { prevArrow: prevArrowCustom, nextArrow: nextArrowCustom } = this.$slots;
if (prevArrowCustom) {
arrowProps.prevArrow = prevArrowCustom;
}
@ -675,8 +659,8 @@ export default {
arrowProps.nextArrow = nextArrowCustom;
}
if (this.arrows) {
prevArrow = <PrevArrow {...{ props: arrowProps }} />;
nextArrow = <NextArrow {...{ props: arrowProps }} />;
prevArrow = <PrevArrow {...arrowProps} />;
nextArrow = <NextArrow {...arrowProps} />;
}
let verticalHeightStyle = null;
@ -705,44 +689,30 @@ export default {
const listStyle = { ...verticalHeightStyle, ...centerPaddingStyle };
const touchMove = this.touchMove;
let listProps = {
directives: [
{
name: 'ant-ref',
value: this.listRefHandler,
},
],
ref: this.listRefHandler,
class: 'slick-list',
style: listStyle,
on: {
click: this.clickHandler,
mousedown: touchMove ? this.swipeStart : noop,
mousemove: this.dragging && touchMove ? this.swipeMove : noop,
mouseup: touchMove ? this.swipeEnd : noop,
mouseleave: this.dragging && touchMove ? this.swipeEnd : noop,
touchstart: touchMove ? this.swipeStart : noop,
touchmove: this.dragging && touchMove ? this.swipeMove : noop,
touchend: touchMove ? this.swipeEnd : noop,
touchcancel: this.dragging && touchMove ? this.swipeEnd : noop,
keydown: this.accessibility ? this.keyHandler : noop,
},
onClick: this.clickHandler,
onMousedown: touchMove ? this.swipeStart : noop,
onMousemove: this.dragging && touchMove ? this.swipeMove : noop,
onMouseup: touchMove ? this.swipeEnd : noop,
onMouseleave: this.dragging && touchMove ? this.swipeEnd : noop,
onTouchstart: touchMove ? this.swipeStart : noop,
onTouchmove: this.dragging && touchMove ? this.swipeMove : noop,
onTouchend: touchMove ? this.swipeEnd : noop,
onTouchcancel: this.dragging && touchMove ? this.swipeEnd : noop,
onKeydown: this.accessibility ? this.keyHandler : noop,
};
let innerSliderProps = {
class: className,
props: {
dir: 'ltr',
},
dir: 'ltr',
};
if (this.unslick) {
listProps = {
class: 'slick-list',
directives: [
{
name: 'ant-ref',
value: this.listRefHandler,
},
],
ref: this.listRefHandler,
};
innerSliderProps = { class: className };
}

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

@ -1,20 +1,18 @@
import json2mq from 'json2mq';
import Vue from 'vue';
import ref from 'vue-ref';
import BaseMixin from '../../_util/BaseMixin';
import { cloneElement } from '../../_util/vnode';
import { getStyle, getListeners } from '../../_util/props-util';
import InnerSlider from './inner-slider';
import defaultProps from './default-props';
import { canUseDOM } from './utils/innerSliderUtils';
import { getSlot } from '../../_util/props-util';
const enquire = canUseDOM() && require('enquire.js');
Vue.use(ref, { name: 'ant-ref' });
export default {
name: 'Slider',
props: {
...defaultProps,
},
inheritAttrs: false,
mixins: [BaseMixin],
data() {
this._responsiveMediaHandlers = [];
@ -132,7 +130,7 @@ export default {
}
// 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 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) {
const row = [];
for (let k = j; k < j + settings.slidesPerRow; k += 1) {
if (settings.variableWidth && getStyle(children[k])) {
currentWidth = getStyle(children[k]).width;
if (settings.variableWidth && children[k].props.style) {
currentWidth = children[k].props.style.width;
}
if (k >= children.length) break;
row.push(
cloneElement(children[k], {
key: 100 * i + 10 * j + k,
attrs: {
tabindex: -1,
},
tabindex: -1,
style: {
width: `${100 / settings.slidesPerRow}%`,
display: 'inline-block',
@ -192,20 +188,12 @@ export default {
settings.unslick = true;
}
const sliderProps = {
props: {
...settings,
children: newChildren,
__propsSymbol__: Symbol(),
},
on: getListeners(this),
directives: [
{
name: 'ant-ref',
value: this.innerSliderRefHandler,
},
],
scopedSlots: this.$scopedSlots,
...this.$attrs,
...settings,
children: newChildren,
__propsSymbol__: Symbol(),
ref: this.innerSliderRefHandler,
};
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 { cloneElement } from '../../_util/vnode';
import { getStyle, getClass } from '../../_util/props-util';
import { flattenChildren } from '../../_util/props-util';
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
@ -75,7 +76,7 @@ const getSlideStyle = function(spec) {
const getKey = (child, fallbackKey) => child.key || (child.key === 0 && '0') || fallbackKey;
const renderSlides = function(spec, children, createElement) {
const renderSlides = function(spec, children) {
let key;
const slides = [];
const preCloneSlides = [];
@ -97,35 +98,27 @@ const renderSlides = function(spec, children, createElement) {
if (!spec.lazyLoad || (spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0)) {
child = elem;
} else {
child = createElement('div');
child = createVNode('div');
}
const childStyle = getSlideStyle({ ...spec, index });
const slideClass = getClass(child.context) || '';
const slideClass = child.props.class || '';
let slideClasses = getSlideClasses({ ...spec, index });
// push a cloned element of the desired slide
slides.push(
cloneElement(
child,
{
key: 'original' + getKey(child, index),
attrs: {
tabindex: '-1',
'data-index': index,
'aria-hidden': !slideClasses['slick-active'],
},
class: classnames(slideClasses, slideClass),
style: { outline: 'none', ...(getStyle(child.context) || {}), ...childStyle },
on: {
click: () => {
// child.props && child.props.onClick && child.props.onClick(e)
if (spec.focusOnSelect) {
spec.focusOnSelect(childOnClickOptions);
}
},
},
cloneElement(child, {
key: 'original' + getKey(child, index),
tabindex: '-1',
'data-index': index,
'aria-hidden': !slideClasses['slick-active'],
class: classnames(slideClasses, slideClass),
style: { outline: 'none', ...(child.props.style || {}), ...childStyle },
onClick: () => {
// child.props && child.props.onClick && child.props.onClick(e)
if (spec.focusOnSelect) {
spec.focusOnSelect(childOnClickOptions);
}
},
true,
),
}),
);
// if slide needs to be precloned or postcloned
@ -141,19 +134,15 @@ const renderSlides = function(spec, children, createElement) {
cloneElement(child, {
key: 'precloned' + getKey(child, key),
class: classnames(slideClasses, slideClass),
attrs: {
tabindex: '-1',
'data-index': key,
'aria-hidden': !slideClasses['slick-active'],
},
style: { ...(getStyle(child.context) || {}), ...childStyle },
on: {
click: () => {
// child.props && child.props.onClick && child.props.onClick(e)
if (spec.focusOnSelect) {
spec.focusOnSelect(childOnClickOptions);
}
},
tabindex: '-1',
'data-index': key,
'aria-hidden': !slideClasses['slick-active'],
style: { ...(child.props.style || {}), ...childStyle },
onClick: () => {
// 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(
cloneElement(child, {
key: 'postcloned' + getKey(child, key),
attrs: {
tabindex: '-1',
'data-index': key,
'aria-hidden': !slideClasses['slick-active'],
},
tabindex: '-1',
'data-index': key,
'aria-hidden': !slideClasses['slick-active'],
class: classnames(slideClasses, slideClass),
style: { ...(getStyle(child.context) || {}), ...childStyle },
on: {
click: () => {
// child.props && child.props.onClick && child.props.onClick(e)
if (spec.focusOnSelect) {
spec.focusOnSelect(childOnClickOptions);
}
},
style: { ...(child.props.style || {}), ...childStyle },
onClick: () => {
// child.props && child.props.onClick && child.props.onClick(e)
if (spec.focusOnSelect) {
spec.focusOnSelect(childOnClickOptions);
}
},
}),
);
@ -195,21 +180,18 @@ const renderSlides = function(spec, children, createElement) {
}
};
export default {
functional: true,
render(createElement, context) {
const { props, listeners, children, data } = context;
const slides = renderSlides(props, children, createElement);
const { mouseenter, mouseover, mouseleave } = listeners;
const mouseEvents = { mouseenter, mouseover, mouseleave };
const trackProps = {
class: 'slick-track',
style: props.trackStyle,
on: {
...mouseEvents,
},
directives: data.directives,
};
return <div {...trackProps}>{slides}</div>;
},
const Track = (_, { attrs, slots }) => {
const slides = renderSlides(attrs, flattenChildren(slots?.default()));
const { onMouseenter, onMouseover, onMouseleave } = attrs;
const mouseEvents = { onMouseenter, onMouseover, onMouseleave };
const trackProps = {
class: 'slick-track',
style: attrs.trackStyle,
...mouseEvents,
};
return <div {...trackProps}>{slides}</div>;
};
Track.inheritAttrs = false;
export default Track;

2
examples/App.vue
View File

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

5
examples/index.js
View File

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