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>
|
<template>
|
||||||
<div class="video-scroll" ref="root">
|
<div class="video-scroll" ref="root">
|
||||||
<template v-if="definition.direction === 'left' || definition.direction === 'right'">
|
<img class="visible loaded"
|
||||||
<img class="visible loaded"
|
:src="definition.files[0]"
|
||||||
:src="definition.files[0]"
|
:style="{
|
||||||
:style="{
|
|
||||||
top: `${Math.round(definition.top)}px`,
|
top: `${Math.round(definition.top)}px`,
|
||||||
left: `${Math.round(definition.left)}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 -->
|
<!--suppress RequiredAttributes -->
|
||||||
<img v-for="(file, idx) in definition.files.slice(1)"
|
<img v-for="(file, idx) in definition.files.slice(1)"
|
||||||
:data-src="file"
|
:data-src="file"
|
||||||
:data-direction="definition.direction"
|
:data-direction="definition.direction"
|
||||||
:style="{
|
:style="{
|
||||||
top: `${Math.round(definition.top)}px`,
|
top: `${Math.round(definition.top) +
|
||||||
left: `${Math.round(definition.left) + (definition.width * (idx + 1) * directionSign)}px`,
|
(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`,
|
width: `${Math.round(definition.width)}px`,
|
||||||
height: `${Math.round(definition.height)}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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -68,6 +47,11 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
isHorizontal(definition: VideoScrollDef): boolean {
|
||||||
|
return definition.direction === "left" || definition.direction === "right";
|
||||||
|
}
|
||||||
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const root = ref<Element | null>(null);
|
const root = ref<Element | null>(null);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue