Skip to content

Commit 4e929f5

Browse files
committed
fix(vc-slick): vueComponent#6100 - Fix content responsiveness in carousel component slot.
1 parent 5b3ade8 commit 4e929f5

File tree

2 files changed

+27
-3
lines changed

2 files changed

+27
-3
lines changed

components/vc-slick/track.jsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { createVNode } from 'vue';
22
import classnames from '../_util/classNames';
3-
import { cloneElement } from '../_util/vnode';
43
import { flattenChildren } from '../_util/props-util';
5-
import { lazyStartIndex, lazyEndIndex, getPreClones } from './utils/innerSliderUtils';
4+
import { lazyStartIndex, lazyEndIndex, getPreClones, cloneElement } from './utils/innerSliderUtils';
65

76
// given specifications/props for a slide, fetch all the classes that need to be applied to the slide
87
const getSlideClasses = spec => {
@@ -84,7 +83,6 @@ const renderSlides = function (spec, children) {
8483
const childrenCount = children.length;
8584
const startIndex = lazyStartIndex(spec);
8685
const endIndex = lazyEndIndex(spec);
87-
8886
children.forEach((elem, index) => {
8987
let child;
9088
const childOnClickOptions = {
@@ -182,6 +180,7 @@ const renderSlides = function (spec, children) {
182180

183181
const Track = (_, { attrs, slots }) => {
184182
const slides = renderSlides(attrs, flattenChildren(slots?.default()));
183+
// const slides = renderSlides(attrs, slots?.default);
185184
const { onMouseenter, onMouseover, onMouseleave } = attrs;
186185
const mouseEvents = { onMouseenter, onMouseover, onMouseleave };
187186
const trackProps = {

components/vc-slick/utils/innerSliderUtils.js

+25
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// import supportsPassive from '../../../_util/supportsPassive';
2+
import { cloneElement as cloneVnode } from '../../_util/vnode';
23

34
export function clamp(number, lowerBound, upperBound) {
45
return Math.max(lowerBound, Math.min(number, upperBound));
@@ -788,3 +789,27 @@ export const slidesOnLeft = ({ slidesToShow, centerMode, rtl, centerPadding }) =
788789

789790
export const canUseDOM = () =>
790791
!!(typeof window !== 'undefined' && window.document && window.document.createElement);
792+
793+
export const cloneElement = (vnode, nodeProps) => {
794+
const node = cloneVnode(vnode, nodeProps);
795+
796+
if (!Array.isArray(vnode.children)) {
797+
return node;
798+
}
799+
800+
const children = [];
801+
node.children.forEach(el => {
802+
if (Array.isArray(el)) {
803+
const newItem = [];
804+
el.forEach(item => {
805+
newItem.push(cloneElement(item));
806+
});
807+
children.push(newItem);
808+
} else {
809+
children.push(cloneElement(el));
810+
}
811+
});
812+
node.children = children;
813+
814+
return node;
815+
};

0 commit comments

Comments
 (0)