shorten VideoScroll.vue
This commit is contained in:
parent
3721067cca
commit
452cb267fb
1 changed files with 21 additions and 37 deletions
|
@ -1,49 +1,28 @@
|
|||
<template>
|
||||
<div class="video-scroll" ref="root">
|
||||
<template v-if="definition.direction === 'left' || definition.direction === 'right'">
|
||||
<img class="visible loaded"
|
||||
:src="definition.files[0]"
|
||||
:style="{
|
||||
<img class="visible loaded"
|
||||
:src="definition.files[0]"
|
||||
:style="{
|
||||
top: `${Math.round(definition.top)}px`,
|
||||
left: `${Math.round(definition.left)}px`,
|
||||
width: `${Math.round(definition.width)}px`,
|
||||
width: isHorizontal(definition) ? `${Math.round(definition.width)}px` : 'auto',
|
||||
height: isHorizontal(definition) ? 'auto' : `${Math.round(definition.height)}px`,
|
||||
}"
|
||||
/>
|
||||
/>
|
||||
|
||||
<!--suppress RequiredAttributes -->
|
||||
<img v-for="(file, idx) in definition.files.slice(1)"
|
||||
:data-src="file"
|
||||
:data-direction="definition.direction"
|
||||
:style="{
|
||||
top: `${Math.round(definition.top)}px`,
|
||||
left: `${Math.round(definition.left) + (definition.width * (idx + 1) * directionSign)}px`,
|
||||
<!--suppress RequiredAttributes -->
|
||||
<img v-for="(file, idx) in definition.files.slice(1)"
|
||||
:data-src="file"
|
||||
:data-direction="definition.direction"
|
||||
:style="{
|
||||
top: `${Math.round(definition.top) +
|
||||
(isHorizontal(definition) ? 0 : (definition.height * (idx + 1) * directionSign))}px`,
|
||||
left: `${Math.round(definition.left) +
|
||||
(isHorizontal(definition) ? (definition.width * (idx + 1) * directionSign) : 0)}px`,
|
||||
width: `${Math.round(definition.width)}px`,
|
||||
height: `${Math.round(definition.height)}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img class="visible loaded"
|
||||
:src="definition.files[0]"
|
||||
:style="{
|
||||
top: `${Math.round(definition.top)}px`,
|
||||
left: `${Math.round(definition.left)}px`,
|
||||
height: `${Math.round(definition.height)}px`,
|
||||
}"
|
||||
/>
|
||||
|
||||
<!--suppress RequiredAttributes -->
|
||||
<img v-for="(file, idx) in definition.files.slice(1)"
|
||||
:data-src="file"
|
||||
:data-direction="definition.direction"
|
||||
:style="{
|
||||
top: `${Math.round(definition.top) + (definition.height * (idx + 1) * directionSign)}px`,
|
||||
left: `${Math.round(definition.left)}px`,
|
||||
height: `${Math.round(definition.height)}px`,
|
||||
width: `${Math.round(definition.width)}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -68,6 +47,11 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isHorizontal(definition: VideoScrollDef): boolean {
|
||||
return definition.direction === "left" || definition.direction === "right";
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const root = ref<Element | null>(null);
|
||||
|
||||
|
|
Loading…
Reference in a new issue