vue实现微博发布

Vue 实现微博发布功能

核心功能模块

1. 文本输入框

   • 使用 v-model 双向绑定输入内容
   • 添加字数统计和限制逻辑（通常140字）

     <textarea 
     v-model="content" 
     maxlength="140"
     placeholder="分享新鲜事...">
     </textarea>
     <span>{{ content.length }}/140</span>

2. 图片上传组件

   • 通过 <input type="file"> 获取图片文件
   • 使用 FileReader 实现本地预览

     handleImageUpload(e) {
     const file = e.target.files[0];
     const reader = new FileReader();
     reader.onload = (event) => {
       this.previewImage = event.target.result;
     };
     reader.readAsDataURL(file);
     }

3. 表情选择器

   • 维护一个表情符号数组
   • 点击表情时追加到文本内容

     emojis: ['😀', '😂', '😍', '👍'],
     insertEmoji(emoji) {
     this.content += emoji;
     }

数据存储结构

data() {
  return {
    posts: [],
    content: '',
    previewImage: null,
    isSubmitting: false
  }
}

发布逻辑实现

1. 表单验证

   validatePost() {
     if (!this.content.trim()) {
       alert('内容不能为空');
       return false;
     }
     return true;
   }

2. 提交到虚拟API

   async submitPost() {
     if (!this.validatePost()) return;
   
     this.isSubmitting = true;
     try {
       const newPost = {
         id: Date.now(),
         content: this.content,
         image: this.previewImage,
         timestamp: new Date().toISOString()
       };
   
       // 模拟API请求
       await new Promise(resolve => setTimeout(resolve, 500));
       this.posts.unshift(newPost);
   
       // 重置表单
       this.content = '';
       this.previewImage = null;
     } finally {
       this.isSubmitting = false;
     }
   }

界面布局示例

<div class="weibo-editor">
  <div class="editor-tools">
    <button @click="$refs.fileInput.click()">图片</button>
    <input 
      ref="fileInput"
      type="file" 
      accept="image/*"
      @change="handleImageUpload"
      hidden>

    <div class="emoji-picker">
      <span 
        v-for="emoji in emojis"
        @click="insertEmoji(emoji)">
        {{ emoji }}
      </span>
    </div>
  </div>

  <img v-if="previewImage" :src="previewImage" class="preview-image">

  <button 
    @click="submitPost"
    :disabled="isSubmitting">
    {{ isSubmitting ? '发布中...' : '发布' }}
  </button>
</div>

样式优化建议

1. 使用CSS变量定义主题色

   :root {
     --primary-color: #ff8200;
   }
   button {
     background: var(--primary-color);
   }

2. 响应式布局

   .weibo-editor {
     max-width: 600px;
     margin: 0 auto;
     padding: 15px;
   }

进阶功能扩展

1. @提及功能

   • 监听 @ 输入触发用户搜索
   • 实现下拉选择框

2. 话题标签

   • 自动高亮 #话题# 文本
   • 添加点击跳转功能

3. 内容安全过滤

   • 使用正则表达式过滤敏感词
   • 客户端预校验机制

4. 草稿保存

   • 利用 localStorage 自动保存未发布内容
   • 页面加载时恢复草稿

这种实现方式兼顾了核心功能和扩展性，可根据实际需求调整各模块细节。注意需要添加适当的错误处理和加载状态管理以提升用户体验。