vue实现选择好友群发
Vue 实现选择好友群发功能
数据准备
在 Vue 的 data 或 setup 中定义好友列表和选中好友的数组：
data() {
return {
friends: [
{ id: 1, name: '张三', selected: false },
{ id: 2, name: '李四', selected: false }
],
selectedFriends: []
}
}好友选择界面
使用 v-for 渲染好友列表，并通过 v-model 绑定选择状态：
<div v-for="friend in friends" :key="friend.id">
<input
type="checkbox"
v-model="friend.selected"
@change="updateSelectedFriends(friend)"
>
<label>{{ friend.name }}</label>
</div>更新选中好友
在 methods 中定义方法处理选中状态变化：
methods: {
updateSelectedFriends(friend) {
if (friend.selected) {
this.selectedFriends.push(friend.id)
} else {
const index = this.selectedFriends.indexOf(friend.id)
this.selectedFriends.splice(index, 1)
}
}
}群发消息功能
添加消息输入框和发送按钮：
<textarea v-model="message" placeholder="输入要发送的消息"></textarea>
<button @click="sendBatchMessages" :disabled="selectedFriends.length === 0">
群发消息
</button>发送逻辑实现
实现群发消息的核心方法：
methods: {
sendBatchMessages() {
if (this.selectedFriends.length === 0) return
this.selectedFriends.forEach(friendId => {
const friend = this.friends.find(f => f.id === friendId)
console.log(`发送给 ${friend.name}: ${this.message}`)
// 这里替换为实际的API调用
})
// 清空选择
this.friends.forEach(f => f.selected = false)
this.selectedFriends = []
this.message = ''
}
}优化体验
添加全选/取消全选功能：
<button @click="toggleSelectAll">
{{ allSelected ? '取消全选' : '全选' }}
</button>computed: {
allSelected() {
return this.friends.every(f => f.selected)
}
},
methods: {
toggleSelectAll() {
const select = !this.allSelected
this.friends.forEach(f => {
f.selected = select
this.updateSelectedFriends(f)
})
}
}样式美化
使用 CSS 美化界面：
.friend-item {
padding: 8px;
border-bottom: 1px solid #eee;
}
.friend-item:hover {
background-color: #f5f5f5;
}注意事项
- 实际项目中应将好友数据通过 API 从后端获取
- 群发消息需要调用后端接口批量处理
- 添加加载状态和错误处理提升用户体验
- 对于大量好友应考虑分页或虚拟滚动优化性能
