代码如下
<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 class="app-container"> <header class="navbar"> <div class="navbar-content"> <div class="navbar-brand"> <span class="brand-icon">✍️</span> <span class="brand-name">我的博客</span> </div> <nav class="navbar-nav"> <div class="nav-dropdown" @mouseenter="isDropdownOpen = true" @mouseleave="isDropdownOpen = false"> <button class="dropdown-toggle" :class="{ active: isDropdownOpen }"> 菜单 <span class="dropdown-arrow">▼</span> </button> <ul class="dropdown-menu" :class="{ 'show': isDropdownOpen }"> <li v-for="item in navItems" :key="item.name"> <span class="menu-link" @click="handleNavigate(item.path)">{{ item.name }}</span> </li> </ul> </div> </nav> </div> </header> <main class="main"> <div class="editor-card"> <div class="editor-header"> <h2 class="editor-title">写文章</h2> </div> <div class="form-group"> <label class="form-label">标题</label> <input type="text" class="title-input" v-model="title" placeholder="请输入文章标题..." /> </div> <div class="form-group"> <label class="form-label">内容</label> <div ref="editorRef" class="content-editor" contenteditable="true" @input="handleContentInput($event)" />
)
