当前位置：首页 > VUE

vue实现微博话题

2026-02-25 18:59:50VUE

实现微博话题功能的关键点

微博话题功能主要包括话题的识别、高亮显示、点击跳转以及数据统计。Vue中可以通过以下方式实现：

话题识别与正则匹配

使用正则表达式匹配文本中的话题格式（如#话题内容#），提取话题关键词：

const topicRegex = /#([^#]+)#/g;
const text = "今天天气真好#阳光明媚#出去走走";
const topics = text.match(topicRegex); // ["#阳光明媚#"]

高亮显示话题

通过v-html或自定义指令实现话题高亮，需注意XSS防护：

vue实现微博话题

<template>
  <div v-html="formatTopics(rawText)"></div>
</template>

<script>
methods: {
  formatTopics(text) {
    return text.replace(/#([^#]+)#/g, '<span class="topic">#$1#</span>');
  }
}
</script>

点击事件处理

为话题绑定点击事件，通过事件委托或自定义指令实现跳转：

directives: {
  'topic': {
    inserted(el) {
      el.addEventListener('click', (e) => {
        if (e.target.classList.contains('topic')) {
          const topic = e.target.innerText.slice(1, -1);
          router.push(`/topic/${encodeURIComponent(topic)}`);
        }
      });
    }
  }
}

路由与话题页

配置动态路由展示话题相关内容：

vue实现微博话题

// router.js
{
  path: '/topic/:topicName',
  component: TopicPage,
  props: true
}

数据存储结构

建议的话题数据结构示例：

{
  id: 1,
  name: "阳光明媚",
  viewCount: 12000,
  posts: [
    {id: 101, content: "今天#阳光明媚#", author: "用户A"},
    {id: 102, content: "#阳光明媚#适合拍照", author: "用户B"}
  ]
}

完整组件示例

组合上述功能的TopicInput组件：

<template>
  <div>
    <textarea v-model="content" @input="handleInput"></textarea>
    <div class="preview" v-html="formattedContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      topics: []
    }
  },
  computed: {
    formattedContent() {
      return this.content.replace(/#([^#]+)#/g, 
        '<span class="topic" @click="gotoTopic">#$1#</span>');
    }
  },
  methods: {
    gotoTopic(event) {
      const topic = event.target.innerText.slice(1, -1);
      this.$router.push(`/topic/${topic}`);
    },
    handleInput() {
      this.topics = this.content.match(/#([^#]+)#/g) || [];
    }
  }
}
</script>