vue实现好友列表
Vue 实现好友列表功能
功能分析 好友列表通常需要展示用户头像、昵称、在线状态等基础信息，支持搜索、分组、最近聊天排序等功能。以下分模块实现核心逻辑。
数据准备 假设好友数据格式如下：
friends: [
{
id: 1,
name: '张三',
avatar: 'https://example.com/avatar1.jpg',
group: '同事',
online: true,
lastMessage: '2023-08-20T10:00:00'
},
// 更多好友数据...
]基础列表渲染
<template>
<div class="friend-list">
<div v-for="friend in filteredFriends" :key="friend.id" class="friend-item">
<img :src="friend.avatar" class="avatar" />
<div class="info">
<span class="name">{{ friend.name }}</span>
<span class="status" :class="{ online: friend.online }"></span>
</div>
</div>
</div>
</template>分组展示实现
computed: {
groupedFriends() {
return this.friends.reduce((groups, friend) => {
const group = friend.group || '未分组';
if (!groups[group]) groups[group] = [];
groups[group].push(friend);
return groups;
}, {});
}
}搜索功能实现
data() {
return {
searchQuery: ''
}
},
computed: {
filteredFriends() {
const query = this.searchQuery.toLowerCase();
return this.friends.filter(friend =>
friend.name.toLowerCase().includes(query)
);
}
}交互增强 添加点击事件和状态标记：
<div
v-for="friend in filteredFriends"
@click="selectFriend(friend)"
:class="{ active: selectedFriend?.id === friend.id }">
</div>样式建议
.friend-item {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}
.status {
display: inline-block;
width: 8px;
height: 8px;
background: #ccc;
border-radius: 50%;
}
.status.online {
background: #4CAF50;
}性能优化 对于大型好友列表：
// 使用虚拟滚动
import { RecycleScroller } from 'vue-virtual-scroller'
components: { RecycleScroller }完整组件示例
export default {
data() {
return {
friends: [...],
searchQuery: '',
selectedFriend: null
}
},
computed: {
filteredFriends() {
// 搜索过滤逻辑
}
},
methods: {
selectFriend(friend) {
this.selectedFriend = friend
this.$emit('select', friend)
}
}
}扩展功能建议
- 添加下拉刷新加载更多好友
- 实现右键菜单操作（删除、备注等）
- 集成WebSocket实时更新在线状态
- 添加好友分组折叠/展开功能
