@zebra-ui/swiper/components/shared/create-shadow.ts

专为多端设计的高性能swiper轮播组件库，支持多种复杂的 3D swiper轮播效果。

import { createElement, getSlideTransformEl, isWeb } from './utils'
import { useClass, useStyle } from '../adapter'
import type { CreateShadow } from '../../types/components/shared/create-shadow'

const createShadow: CreateShadow = (suffix, slideEl, side) => {
  const shadowClass = `swiper-slide-shadow${side ? `-${side}` : ''}${
    suffix ? ` swiper-slide-shadow-${suffix}` : ''
  }`
  const shadowContainer = getSlideTransformEl(slideEl)
  let shadowEl

  if (isWeb()) {
    shadowEl = shadowContainer.querySelector(
      `.${shadowClass.split(' ').join('.')}`
    )

    if (!shadowEl) {
      shadowEl = createElement('div', shadowClass.split(' '))
      shadowContainer.append(shadowEl)
    }
  } else {
    shadowEl = shadowContainer
      .getShadowList()
      .find((item: any) =>
        item.classList.containsMultiple(`.${shadowClass.split(' ').join('.')}`)
      )
    if (!shadowEl) {
      const shadowItem = {
        ...useClass(shadowClass),
        ...useStyle()
      }
      shadowEl = shadowItem
      shadowContainer.addShadowItem(shadowEl)
    }
  }

  return shadowEl
}

export default createShadow