63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { ComputedRef, CSSProperties } from 'vue'
|
|
import { computed, defineComponent, reactive } from 'vue'
|
|
import { PREFIX } from '../_constants'
|
|
import { useInject } from '../_hooks'
|
|
import { getMainClass, getMainStyle } from '../_utils'
|
|
import type { SwiperProps } from '../swiper/swiper'
|
|
import { SWIPER_KEY } from '../swiper/swiper'
|
|
import { swiperItemProps } from './swiperitem'
|
|
|
|
const props = defineProps(swiperItemProps)
|
|
const { parent } = useInject<{ size: ComputedRef<number>, props: Required<SwiperProps> }>(SWIPER_KEY)
|
|
|
|
const state = reactive({
|
|
offset: 0,
|
|
})
|
|
|
|
const classes = computed(() => {
|
|
return getMainClass(props, componentName)
|
|
})
|
|
|
|
const style = computed<string>(() => {
|
|
const style = {} as CSSProperties
|
|
const direction = parent?.props.direction
|
|
if (parent?.size.value)
|
|
style[direction === 'horizontal' ? 'width' : 'height'] = `${parent?.size.value}px`
|
|
|
|
if (state.offset)
|
|
style.transform = `translate${direction === 'horizontal' ? 'X' : 'Y'}(${state.offset}px)`
|
|
|
|
return getMainStyle(props, style)
|
|
})
|
|
|
|
function setOffset(offset: number) {
|
|
state.offset = offset
|
|
}
|
|
|
|
defineExpose({ setOffset })
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const componentName = `${PREFIX}-swiper-item`
|
|
|
|
export default defineComponent({
|
|
name: componentName,
|
|
options: {
|
|
virtualHost: true,
|
|
addGlobalClass: true,
|
|
styleIsolation: 'shared',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view :class="classes" :style="style">
|
|
<slot />
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import './index';
|
|
</style>
|