代码如下script setup import { ref } from vue const title ref() const content ref() const note ref() const backgroundImage ref() const isDropdownOpen ref(false) const navItems [ { name: 首页, path: / }, { name: 文章, path: /articles }, { name: 分类, path: /categories }, { name: 关于, path: /about } ] const handleContentInput (event) { content.value event.target.innerHTML console.log(内容编辑器的值:, content.value) } const handleImageUpload (event) { const file event.target.files[0] if (!file) return // 增加校验 if (!file.type.startsWith(image/)) { alert(请选择图片文件) return } if (file.size 5 * 1024 * 1024) { alert(图片不能超过5MB) return } const reader new FileReader() reader.onload (e) { backgroundImage.value e.target.result } reader.readAsDataURL(file) } const handlePublish () { if (!title.value.trim()) { alert(请填写文章标题) return } if (!content.value.trim()) { alert(请填写文章内容) return } const postData { title: title.value.trim(), content: content.value, note: note.value.trim(), backgroundImage: backgroundImage.value } console.log(发布内容:, postData) alert(文章发布成功) } // 新增导航点击跳转方法 const handleNavigate (path) { // 点击跳转后关闭下拉菜单 isDropdownOpen.value false // 原生页面跳转若使用vue-router请替换为 router.push(path) window.location.href path } /script template div classapp-container header classnavbar div classnavbar-content div classnavbar-brand span classbrand-icon✍️/span span classbrand-name我的博客/span /div nav classnavbar-nav div classnav-dropdown mouseenterisDropdownOpen true mouseleaveisDropdownOpen false button classdropdown-toggle :class{ active: isDropdownOpen } 菜单 span classdropdown-arrow▼/span /button ul classdropdown-menu :class{ show: isDropdownOpen } li v-foritem in navItems :keyitem.name span classmenu-link clickhandleNavigate(item.path){{ item.name }}/span /li /ul /div /nav /div /header main classmain div classeditor-card div classeditor-header h2 classeditor-title写文章/h2 /div div classform-group label classform-label标题/label input typetext classtitle-input v-modeltitle placeholder请输入文章标题... / /div div classform-group label classform-label内容/label div refeditorRef classcontent-editor contenteditabletrue inputhandleContentInput($event) />