diff --git a/antdv-demo b/antdv-demo index 9df702457..c2521df74 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 9df702457ee48468507ed7c6c1bf73758087f227 +Subproject commit c2521df74700792b5cd6c353cf9fce91fbd40e19 diff --git a/components/_util/BaseMixin.js b/components/_util/BaseMixin.js index a04367bcb..037d5e05f 100644 --- a/components/_util/BaseMixin.js +++ b/components/_util/BaseMixin.js @@ -17,7 +17,9 @@ export default { } } Object.assign(this.$data, newState); - this.$forceUpdate(); + if (this._.isMounted) { + this.$forceUpdate(); + } this.$nextTick(() => { callback && callback(); }); diff --git a/components/_util/vnode.js b/components/_util/vnode.js index 4540b797a..aa786c34b 100644 --- a/components/_util/vnode.js +++ b/components/_util/vnode.js @@ -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; } diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx index a00d55886..ab85b8ef7 100644 --- a/components/carousel/index.jsx +++ b/components/carousel/index.jsx @@ -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 (
- - {children} - +
); }, }; /* 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; diff --git a/components/vc-slick/src/arrows.js b/components/vc-slick/src/arrows.js index 25fd57a77..fc580728a 100644 --- a/components/vc-slick/src/arrows.js +++ b/components/vc-slick/src/arrows.js @@ -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 = ( - - ); - } - - return prevArrow; - }, + false, + ); + } else { + prevArrow = ( + + ); + } + 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 = ( + + ); + } - if (props.nextArrow) { - nextArrow = cloneElement( - props.nextArrow({ - ...nextArrowProps, - ...{ - props: customProps, - }, - }), - { - key: '1', - class: nextClasses, - style: { display: 'block' }, - on: { - click: nextHandler, - }, - }, - ); - } else { - nextArrow = ( - - ); - } - - return nextArrow; - }, + return nextArrow; }; + +NextArrow.inheritAttrs = false; + +export { PrevArrow, NextArrow }; diff --git a/components/vc-slick/src/dots.js b/components/vc-slick/src/dots.js index a4fb77b44..64a5f59cd 100644 --- a/components/vc-slick/src/dots.js +++ b/components/vc-slick/src/dots.js @@ -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 ( -
  • - {cloneElement(customPaging({ i }), { - on: { - click: onClick, - }, - })} -
    • - ); - }); + clickHandler(dotOptions); + } + return ( +
  • + {cloneElement(customPaging({ i }), { + onClick, + })} +
    • + ); + }); - return cloneElement(appendDots({ dots }), { - class: dotsClass, - on: { - ...mouseEvents, - }, - }); - }, + return cloneElement(appendDots({ dots }), { + class: dotsClass, + ...mouseEvents, + }); }; + +Dots.inheritAttrs = false; + +export default Dots; diff --git a/components/vc-slick/src/inner-slider.js b/components/vc-slick/src/inner-slider.js index dfde18f69..e75e7b140 100644 --- a/components/vc-slick/src/inner-slider.js +++ b/components/vc-slick/src/inner-slider.js @@ -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 = ; } @@ -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 = ; - nextArrow = ; + prevArrow = ; + nextArrow = ; } 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 }; } diff --git a/components/vc-slick/src/slider.js b/components/vc-slick/src/slider.js index a3a9e3a64..626d75fca 100644 --- a/components/vc-slick/src/slider.js +++ b/components/vc-slick/src/slider.js @@ -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 ; + return ; }, }; diff --git a/components/vc-slick/src/track.js b/components/vc-slick/src/track.js index fd78bc216..8af84cb77 100644 --- a/components/vc-slick/src/track.js +++ b/components/vc-slick/src/track.js @@ -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
    {slides}
    ; - }, +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
    {slides}
    ; }; + +Track.inheritAttrs = false; + +export default Track; diff --git a/examples/index.js b/examples/index.js index 697ccb2b1..131ac0243 100644 --- a/examples/index.js +++ b/examples/index.js @@ -1,4 +1,5 @@ import '@babel/polyfill'; +import 'ant-design-vue/style.js'; import { createApp, version } from 'vue'; import App from './App.vue'; import { @@ -31,12 +32,11 @@ import { TreeSelect, Transfer, Slider, + 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 = { @@ -82,4 +82,5 @@ app .use(TreeSelect) .use(Transfer) .use(Slider) + .use(Carousel) .mount('#app');