94 lines
3.6 KiB
Vue
94 lines
3.6 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import {
|
||
Undo2, Redo2, Bold, Italic, Underline,
|
||
AlignLeft, AlignCenter, AlignRight, Image as ImageIcon, Plus
|
||
} from 'lucide-vue-next'
|
||
|
||
const props = defineProps(['currentStyle'])
|
||
const emit = defineEmits(['action'])
|
||
|
||
const fileInput = ref(null)
|
||
|
||
const triggerImageUpload = () => fileInput.value.click()
|
||
|
||
// 支持多图上传的处理逻辑
|
||
const handleImageUpload = async (e) => {
|
||
const files = Array.from(e.target.files)
|
||
if (files.length === 0) return
|
||
|
||
// 并发读取所有图片
|
||
const readers = files.map(file => {
|
||
return new Promise((resolve, reject) => {
|
||
const reader = new FileReader()
|
||
reader.onload = (evt) => resolve(evt.target.result)
|
||
reader.onerror = reject
|
||
reader.readAsDataURL(file)
|
||
})
|
||
})
|
||
|
||
try {
|
||
const images = await Promise.all(readers)
|
||
// 触发批量插入事件
|
||
emit('action', 'insertImages', images)
|
||
} catch (error) {
|
||
console.error("图片读取失败", error)
|
||
}
|
||
|
||
// 重置 input 以便能重复上传同一文件
|
||
e.target.value = ''
|
||
}
|
||
|
||
const btnClass = "p-1.5 rounded hover:bg-gray-200 transition text-gray-600 flex items-center justify-center cursor-pointer"
|
||
const activeClass = "bg-gray-300 text-black"
|
||
</script>
|
||
|
||
<template>
|
||
<div class="h-10 bg-[#fbfbfb] border-b border-gray-300 flex items-center px-2 gap-2 select-none shrink-0">
|
||
<div class="flex gap-1 pr-2 border-r border-gray-300">
|
||
<button :class="btnClass" title="撤销"><Undo2 class="w-4 h-4" /></button>
|
||
<button :class="btnClass" title="重做"><Redo2 class="w-4 h-4" /></button>
|
||
</div>
|
||
|
||
<div class="flex gap-1 pr-2 border-r border-gray-300">
|
||
<button :class="[btnClass, currentStyle.bold ? activeClass : '']" @click="$emit('action', 'toggleStyle', 'bold')">
|
||
<Bold class="w-4 h-4" />
|
||
</button>
|
||
<button :class="[btnClass, currentStyle.italic ? activeClass : '']" @click="$emit('action', 'toggleStyle', 'italic')">
|
||
<Italic class="w-4 h-4" />
|
||
</button>
|
||
<button :class="[btnClass, currentStyle.underline ? activeClass : '']" @click="$emit('action', 'toggleStyle', 'underline')">
|
||
<Underline class="w-4 h-4" />
|
||
</button>
|
||
|
||
<div class="w-px h-4 bg-gray-300 mx-1 self-center"></div>
|
||
|
||
<button :class="[btnClass, currentStyle.align === 'left' ? activeClass : '']" @click="$emit('action', 'setAlign', 'left')">
|
||
<AlignLeft class="w-4 h-4" />
|
||
</button>
|
||
<button :class="[btnClass, currentStyle.align === 'center' ? activeClass : '']" @click="$emit('action', 'setAlign', 'center')">
|
||
<AlignCenter class="w-4 h-4" />
|
||
</button>
|
||
<button :class="[btnClass, currentStyle.align === 'right' ? activeClass : '']" @click="$emit('action', 'setAlign', 'right')">
|
||
<AlignRight class="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
|
||
<div class="flex gap-1 pr-2 border-r border-gray-300">
|
||
<button :class="btnClass" title="插入图片" @click="triggerImageUpload">
|
||
<ImageIcon class="w-4 h-4" />
|
||
</button>
|
||
<!-- 关键修改：添加 multiple 属性支持多选 -->
|
||
<input type="file" ref="fileInput" class="hidden" accept="image/*" multiple @change="handleImageUpload">
|
||
</div>
|
||
|
||
<div class="flex gap-1">
|
||
<button class="flex items-center gap-1 px-2 py-1 hover:bg-gray-200 rounded text-xs text-gray-700" @click="$emit('action', 'addRow')">
|
||
<Plus class="w-3 h-3" /> 行
|
||
</button>
|
||
<button class="flex items-center gap-1 px-2 py-1 hover:bg-gray-200 rounded text-xs text-gray-700" @click="$emit('action', 'addCol')">
|
||
<Plus class="w-3 h-3" /> 列
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template> |