Vue3 Compare ImageSimple component
View source
vue
<template>
<div style="max-width: 500px; width: auto; height: auto; margin: 50px auto;">
<VueCompareImage :left-image="cat1" :right-image="cat2" />
</div>
</template>vue
<script setup lang="ts">
import { VueCompareImage } from 'vue3-compare-image'
// cassets
import cat1 from '@assets/cat1.jpg'
import cat2 from '@assets/cat2.jpg'
</script>vue
<style>
/* styles */
</style>Custom handle
To use custom handle, Just pass a valid html <div /> element as handle prop.
In this example, you can also move the slider by pressing keyboard left and right arrow keys.
View source
vue
<template>
<div style="max-width: 500px; width: auto; height: auto; margin: 50px auto;">
<VueCompareImage
:left-image="cat1" :right-image="cat2" keyboard handle="<div style='border: 1px solid white'>I am Custom Handle</div>" slider-line-color="red"
/>
</div>
</template>vue
<script setup lang="ts">
import { VueCompareImage } from 'vue3-compare-image'
// cassets
import cat1 from '@assets/cat1.jpg'
import cat2 from '@assets/cat2.jpg'
</script>vue
<style>
/* styles */
</style>Emmitted events
Sliding: false
Open browsers console to view event logs.
View source
vue
<template>
<div style="max-width: 500px; width: auto; height: auto; margin: 50px auto;">
<VueCompareImage
:left-image="forest1" :right-image="forest2" @is-sliding="slideCallback" @slide-start="startCallback" @slide-end="endCallback"
/>
</div>
</template>vue
<script setup lang="ts">
import { VueCompareImage } from 'vue3-compare-image'
// cassets
import cat1 from '@assets/cat1.jpg'
import cat2 from '@assets/cat2.jpg'
const hover = ref(false)
const sliding = ref(false)
function startCallback(pos: number) {
console.log('sliding started at ', pos)
}
function endCallback(pos: number) {
console.log(`sliding has ended at: ${pos}`)
}
function slideCallback(state: boolean) {
sliding.value = state
}
</script>vue
<style>
/* styles */
</style>