58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'resize', delta: number): void
|
|
}>()
|
|
|
|
const isDragging = ref(false)
|
|
const startX = ref(0)
|
|
|
|
const onMouseDown = (e: MouseEvent) => {
|
|
isDragging.value = true
|
|
startX.value = e.clientX
|
|
document.addEventListener('mousemove', onMouseMove)
|
|
document.addEventListener('mouseup', onMouseUp)
|
|
document.body.style.cursor = 'col-resize'
|
|
document.body.style.userSelect = 'none'
|
|
}
|
|
|
|
const onMouseMove = (e: MouseEvent) => {
|
|
if (!isDragging.value) return
|
|
const delta = e.clientX - startX.value
|
|
startX.value = e.clientX
|
|
emit('resize', delta)
|
|
}
|
|
|
|
const onMouseUp = () => {
|
|
isDragging.value = false
|
|
document.removeEventListener('mousemove', onMouseMove)
|
|
document.removeEventListener('mouseup', onMouseUp)
|
|
document.body.style.cursor = ''
|
|
document.body.style.userSelect = ''
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="resizer"
|
|
:class="{ dragging: isDragging }"
|
|
@mousedown="onMouseDown"
|
|
></div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.resizer {
|
|
width: 4px;
|
|
background: #181818;
|
|
cursor: col-resize;
|
|
flex-shrink: 0;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.resizer:hover,
|
|
.resizer.dragging {
|
|
background: #007acc;
|
|
}
|
|
</style>
|