-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
SlideContainer.vue
72 lines (61 loc) · 1.67 KB
/
SlideContainer.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script setup lang="ts">
import { useElementSize } from '@vueuse/core'
import { computed, provide, ref, watchEffect } from 'vue'
import { slideAspect, slideWidth, slideHeight, configs } from '../env'
const props = defineProps({
width: {
type: Number,
},
meta: {
default: () => ({}) as any,
},
scale: {
type: [Number, String],
},
})
const root = ref<HTMLDivElement>()
const element = useElementSize(root)
const width = computed(() => props.width ? props.width : element.width.value)
const height = computed(() => props.width ? props.width / slideAspect : element.height.value)
if (props.width) {
watchEffect(() => {
if (root.value) {
root.value.style.width = `${width.value}px`
root.value.style.height = `${height.value}px`
}
})
}
const screenAspect = computed(() => width.value / height.value)
const scale = computed(() => {
if (props.scale)
return props.scale
if (screenAspect.value < slideAspect)
return width.value / slideWidth
return height.value * slideAspect / slideWidth
})
const style = computed(() => ({
height: `${slideHeight}px`,
width: `${slideWidth}px`,
transform: `translate(-50%, -50%) scale(${scale.value})`,
}))
const className = computed(() => ({
'select-none': !configs.selectable,
'slidev-code-line-numbers': configs.lineNumbers,
}))
</script>
<template>
<div id="slide-container" ref="root" :class="className">
<div id="slide-content" :style="style">
<slot />
</div>
<slot name="controls" />
</div>
</template>
<style lang="postcss">
#slide-container {
@apply relative overflow-hidden;
}
#slide-content {
@apply relative overflow-hidden bg-main absolute left-1/2 top-1/2;
}
</style>