vue实现微博话题
Vue 实现微博话题功能
微博话题功能通常包括话题的展示、点击跳转、热门话题推荐等模块。以下是基于 Vue 的实现方案：
数据格式设计
话题数据通常从后端获取，格式示例：
{
"topics": [
{
"id": 1,
"name": "#Vue3新特性#",
"heat": 1200000,
"link": "/topic/1"
},
{
"id": 2,
"name": "#前端开发#",
"heat": 980000,
"link": "/topic/2"
}
]
}基础话题组件实现
创建 Topic.vue 组件：
<template>
<div class="topic-list">
<router-link
v-for="topic in topics"
:key="topic.id"
:to="topic.link"
class="topic-item"
>
{{ topic.name }}
<span class="heat" v-if="showHeat">({{ formatHeat(topic.heat) }})</span>
</router-link>
</div>
</template>
<script>
export default {
props: {
topics: {
type: Array,
required: true
},
showHeat: {
type: Boolean,
default: true
}
},
methods: {
formatHeat(heat) {
return heat > 10000 ? `${(heat/10000).toFixed(1)}万` : heat
}
}
}
</script>
<style scoped>
.topic-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.topic-item {
color: var(--primary-color);
background: #f2f2f2;
padding: 4px 8px;
border-radius: 4px;
text-decoration: none;
}
.topic-item:hover {
background: #e5e5e5;
}
.heat {
color: #999;
font-size: 0.8em;
}
</style>话题输入功能
在发微博组件中添加话题识别：
<template>
<textarea
v-model="content"
@input="detectTopics"
placeholder="分享新鲜事..."
/>
<div class="detected-topics" v-if="detectedTopics.length">
检测到话题：
<Topic :topics="detectedTopics" :showHeat="false"/>
</div>
</template>
<script>
import Topic from './Topic.vue'
export default {
components: { Topic },
data() {
return {
content: '',
detectedTopics: []
}
},
methods: {
detectTopics() {
const topicRegex = /#[^#\s]+#/g
const matches = this.content.match(topicRegex) || []
this.detectedTopics = matches.map(name => ({
name,
link: `/topic/search?q=${encodeURIComponent(name)}`
}))
}
}
}
</script>热门话题推荐
创建热门话题组件 HotTopics.vue：
<template>
<div class="hot-topics">
<h3>热门话题</h3>
<Topic :topics="hotTopics"/>
</div>
</template>
<script>
import { fetchHotTopics } from '@/api/topics'
import Topic from './Topic.vue'
export default {
components: { Topic },
data() {
return {
hotTopics: []
}
},
async created() {
this.hotTopics = await fetchHotTopics()
}
}
</script>
<style scoped>
.hot-topics {
background: white;
padding: 12px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h3 {
margin-top: 0;
margin-bottom: 12px;
font-size: 1.1em;
}
</style>话题详情页
创建话题详情页 TopicDetail.vue：
<template>
<div v-if="topic">
<h1>{{ topic.name }}</h1>
<p>阅读量: {{ formatHeat(topic.heat) }}</p>
<PostList :posts="posts"/>
</div>
</template>
<script>
import { fetchTopicDetail } from '@/api/topics'
import PostList from '@/components/PostList.vue'
export default {
components: { PostList },
data() {
return {
topic: null,
posts: []
}
},
async created() {
const topicId = this.$route.params.id
const data = await fetchTopicDetail(topicId)
this.topic = data.topic
this.posts = data.posts
},
methods: {
formatHeat(heat) {
return heat > 10000 ? `${(heat/10000).toFixed(1)}万` : heat
}
}
}
</script>路由配置
在 router.js 中添加路由：
{
path: '/topic/:id',
name: 'Topic',
component: () => import('@/views/TopicDetail.vue')
}实现要点
- 使用正则表达式
/#[^#\s]+#/g检测话题格式 - 热度显示格式化为"万"单位
- 话题样式使用浅色背景突出显示
- 热门话题组件可复用基础话题组件
- 话题详情页展示相关微博列表
以上实现可根据实际需求进行调整，如添加话题订阅功能、话题排行榜等扩展功能。
