128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
||
<!-- ✅ 必须使用 NodeViewWrapper 作为根 -->
|
||
<NodeViewWrapper
|
||
class="ri-wrap"
|
||
:class="{ selected }"
|
||
contenteditable="false"
|
||
ref="wrap"
|
||
>
|
||
<img
|
||
ref="img"
|
||
:src="node.attrs.src"
|
||
:alt="node.attrs.alt || ''"
|
||
:title="node.attrs.title || ''"
|
||
:style="imgStyle"
|
||
draggable="false"
|
||
@mousedown.stop
|
||
@click.stop
|
||
/>
|
||
|
||
<!-- 右下角拖拽手柄（等比缩放，写回 width） -->
|
||
<span
|
||
v-if="editor.isEditable"
|
||
class="ri-handle"
|
||
title="拖动调整大小"
|
||
@mousedown.stop.prevent="onStartDrag"
|
||
/>
|
||
</NodeViewWrapper>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { NodeViewWrapper } from '@tiptap/vue-3'
|
||
import { onBeforeUnmount, ref, computed } from 'vue'
|
||
|
||
const props = defineProps({
|
||
editor: Object,
|
||
node: Object,
|
||
selected: Boolean,
|
||
updateAttributes: Function,
|
||
deleteNode: Function,
|
||
getPos: Function,
|
||
})
|
||
|
||
const img = ref(null)
|
||
const wrap = ref(null)
|
||
|
||
const imgStyle = computed(() => {
|
||
const w = props.node.attrs.width || null
|
||
return {
|
||
width: w || 'auto',
|
||
height: 'auto',
|
||
maxWidth: '100%',
|
||
display: 'block',
|
||
}
|
||
})
|
||
|
||
let dragging = false
|
||
let startX = 0
|
||
let startWidth = 0
|
||
let cleanups = []
|
||
|
||
function onStartDrag(e) {
|
||
if (!img.value) return
|
||
const r = img.value.getBoundingClientRect()
|
||
startX = e.clientX
|
||
startWidth = r.width
|
||
|
||
dragging = true
|
||
document.body.style.userSelect = 'none'
|
||
document.body.style.cursor = 'nwse-resize'
|
||
|
||
const onMove = (ev) => {
|
||
if (!dragging) return
|
||
const dx = ev.clientX - startX
|
||
const containerW = wrap.value?.parentElement?.getBoundingClientRect?.().width || 1200
|
||
const newW = Math.max(40, Math.min(containerW, Math.round(startWidth + dx)))
|
||
props.updateAttributes({ width: `${newW}px` })
|
||
}
|
||
const onUp = () => {
|
||
dragging = false
|
||
document.body.style.userSelect = ''
|
||
document.body.style.cursor = ''
|
||
window.removeEventListener('mousemove', onMove)
|
||
window.removeEventListener('mouseup', onUp)
|
||
}
|
||
|
||
window.addEventListener('mousemove', onMove)
|
||
window.addEventListener('mouseup', onUp)
|
||
cleanups.push(() => {
|
||
window.removeEventListener('mousemove', onMove)
|
||
window.removeEventListener('mouseup', onUp)
|
||
})
|
||
}
|
||
|
||
onBeforeUnmount(() => cleanups.forEach((fn) => fn()))
|
||
</script>
|
||
|
||
<style scoped>
|
||
.ri-wrap {
|
||
position: relative;
|
||
display: inline-block;
|
||
line-height: 0;
|
||
max-width: 100%;
|
||
border-radius: 10px;
|
||
}
|
||
.ri-wrap.selected {
|
||
outline: 2px solid rgba(99,102,241,.35);
|
||
outline-offset: 2px;
|
||
}
|
||
.ri-wrap img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 10px;
|
||
box-shadow: 0 6px 20px rgba(2,6,23,.08);
|
||
}
|
||
.ri-handle {
|
||
position: absolute;
|
||
right: -6px;
|
||
bottom: -6px;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #6366f1;
|
||
border: 2px solid #fff;
|
||
border-radius: 4px;
|
||
box-shadow: 0 1px 4px rgba(2,6,23,.25);
|
||
cursor: nwse-resize;
|
||
}
|
||
</style>
|