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

fix(vc-slick): #6100 - Fix content responsiveness in carousel component slot. (#6149)

Browse Source 
* fix(vc-slick): #6100 - Fix content responsiveness in carousel component slot.

* feat(_util) add deepCloneElement function
This commit is contained in:
M.Wang 2022-12-15 10:28:33 +08:00 committed by GitHub
parent 7ea18a8287
commit 8a0c8a8fb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/_util/vnode.ts
View File

@ -3,11 +3,12 @@ import type { VNode, VNodeProps } from 'vue';
import { cloneVNode } from 'vue';
import warning from './warning';
import type { RefObject } from './createRef';
type NodeProps = Record<string, any> &
Omit<VNodeProps, 'ref'> & { ref?: VNodeProps['ref'] | RefObject };
export function cloneElement<T, U>(
vnode: VNode<T, U> | VNode<T, U>[],
nodeProps: Record<string, any> &
Omit<VNodeProps, 'ref'> & { ref?: VNodeProps['ref'] | RefObject } = {},
nodeProps: NodeProps = {},
override = true,
mergeRef = false,
): VNode<T, U> {
@ -29,3 +30,20 @@ export function cloneElement<T, U>(
export function cloneVNodes(vnodes, nodeProps = {}, override = true) {
return vnodes.map(vnode => cloneElement(vnode, nodeProps, override));
}
export function deepCloneElement<T, U>(
vnode: VNode<T, U> | VNode<T, U>[],
nodeProps: NodeProps = {},
override = true,
mergeRef = false,
) {
if (Array.isArray(vnode)) {
return vnode.map(item => deepCloneElement(item, nodeProps, override, mergeRef));
} else {
const cloned = cloneElement(vnode, nodeProps, override, mergeRef);
if (Array.isArray(cloned.children)) {
cloned.children = deepCloneElement(cloned.children as VNode<T, U>[]);
}
return cloned;
}
}

10
components/vc-slick/track.jsx
View File

@ -1,8 +1,8 @@
import { createVNode } from 'vue';
import classnames from '../_util/classNames';
import { cloneElement } from '../_util/vnode';
import { flattenChildren } from '../_util/props-util';
import { lazyStartIndex, lazyEndIndex, getPreClones } from './utils/innerSliderUtils';
import { deepCloneElement } from '../_util/vnode';
// given specifications/props for a slide, fetch all the classes that need to be applied to the slide
const getSlideClasses = spec => {
@ -84,7 +84,6 @@ const renderSlides = function (spec, children) {
const childrenCount = children.length;
const startIndex = lazyStartIndex(spec);
const endIndex = lazyEndIndex(spec);
children.forEach((elem, index) => {
let child;
const childOnClickOptions = {
@ -105,7 +104,7 @@ const renderSlides = function (spec, children) {
let slideClasses = getSlideClasses({ ...spec, index });
// push a cloned element of the desired slide
slides.push(
cloneElement(child, {
deepCloneElement(child, {
key: 'original' + getKey(child, index),
tabindex: '-1',
'data-index': index,
@ -131,7 +130,7 @@ const renderSlides = function (spec, children) {
}
slideClasses = getSlideClasses({ ...spec, index: key });
preCloneSlides.push(
cloneElement(child, {
deepCloneElement(child, {
key: 'precloned' + getKey(child, key),
class: classnames(slideClasses, slideClass),
tabindex: '-1',
@ -155,7 +154,7 @@ const renderSlides = function (spec, children) {
}
slideClasses = getSlideClasses({ ...spec, index: key });
postCloneSlides.push(
cloneElement(child, {
deepCloneElement(child, {
key: 'postcloned' + getKey(child, key),
tabindex: '-1',
'data-index': key,
@ -182,6 +181,7 @@ const renderSlides = function (spec, children) {
const Track = (_, { attrs, slots }) => {
const slides = renderSlides(attrs, flattenChildren(slots?.default()));
// const slides = renderSlides(attrs, slots?.default);
const { onMouseenter, onMouseover, onMouseleave } = attrs;
const mouseEvents = { onMouseenter, onMouseover, onMouseleave };
const trackProps = {