File size: 1,819 Bytes
89ce340 |
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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<template>
<div class="remark">
<div
class="resize-handler"
@mousedown="$event => resize($event)"
></div>
<Editor
:value="remark"
ref="editorRef"
@update="value => handleInput(value)"
/>
</div>
</template>
<script lang="ts" setup>
import { computed, nextTick, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import Editor from './Editor.vue'
const props = defineProps<{
height: number
}>()
const emit = defineEmits<{
(event: 'update:height', payload: number): void
}>()
const slidesStore = useSlidesStore()
const { currentSlide } = storeToRefs(slidesStore)
const editorRef = ref<InstanceType<typeof Editor>>()
watch(() => currentSlide.value.id, () => {
nextTick(() => {
editorRef.value!.updateTextContent()
})
}, {
immediate: true,
})
const remark = computed(() => currentSlide.value?.remark || '')
const handleInput = (content: string) => {
slidesStore.updateSlide({ remark: content })
}
const resize = (e: MouseEvent) => {
let isMouseDown = true
const startPageY = e.pageY
const originHeight = props.height
document.onmousemove = e => {
if (!isMouseDown) return
const currentPageY = e.pageY
const moveY = currentPageY - startPageY
let newHeight = -moveY + originHeight
if (newHeight < 40) newHeight = 40
if (newHeight > 360) newHeight = 360
emit('update:height', newHeight)
}
document.onmouseup = () => {
isMouseDown = false
document.onmousemove = null
document.onmouseup = null
}
}
</script>
<style lang="scss" scoped>
.remark {
position: relative;
border-top: 1px solid $borderColor;
}
.resize-handler {
height: 7px;
position: absolute;
top: -3px;
left: 0;
right: 0;
cursor: n-resize;
z-index: 2;
}
</style> |