<think>我们有一个stickyboxlist数组，每个元素有title和type
属性。需要实现
多选功能，并且当某个
选项被
选中时，给它添加一个
选中的class（比如"active"）。
我们将使用Vue2来实现，因为用户提到了微信小程序（但微信小程序原生语法不同，这里按照Vue2实现，如果用于小程序需要调整）。
我们可以在data中定义一个数组selectedTypes，用于存储被
选中的项的type值（因为type是唯一的，可以作为标识）。
当点击某个
选项时，判断其type是否在selectedTypes中，如果在则移除（取消
选中），如果不在则添加（
选中）。
同时，根据该type是否在selectedTypes中，动态添加class（例如"active"）。
另外，根据用户之前的需求，我们还需要实现全
选、取消全
选、反
选等功能，并显示
选中计数。
注意：在原问题中，有两个“高铁动车”，它们的type分别是3和5，所以可以用type作为唯一标识。
下面我们给出完整的Vue2组件代码。
</think>基于您的需求，我将实现一个完整的
多选功能组件，支持
选中状态管理、样式切换和扩展功能：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
多选功能实现</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
.sticky-container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
background-color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.filter-controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.filter-btn {
padding: 8px 15px;
border-radius: 20px;
border: 1px solid #dcdfe6;
background-color: #fff;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
color: #606266;
}
/*
选中状态的样式 */
.filter-btn.active {
background-color: #409eff;
color: white;
border-color: #409eff;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}
/* 悬停效果 */
.filter-btn:hover:not(.active) {
background-color: #f5f
7fa;
border-color: #c0c4cc;
}
.select-controls {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.control-btn {
padding: 8px 15px;
border-radius: 4px;
background: #f0f0f0;
border: 1px solid #ddd;
cursor: pointer;
font-size: 14px;
}
.control-btn:hover {
background: #e6e6e6;
}
.selection-info {
margin-top: 15px;
padding: 10px;
background-color: #f8f8f8;
border-radius: 4px;
font-size: 14px;
color: #666;
}
h3 {
color: #333;
margin-bottom: 15px;
font-weight: 600;
}
</style>
</head>
<body>
<div id="app">
<div class="sticky-container">
<h3>车站筛
选器</h3>
<div class="select-controls">
<button class="control-btn" @click="selectAll">全
选</button>
<button class="control-btn" @click="deselectAll">取消全
选</button>
<button class="control-btn" @click="toggleSelect">反
选</button>
</div>
<div class="filter-controls">
<div
v-for="(item, index) in stickyboxlist"
:key="index"
class="filter-btn"
:class="{ 'active': selectedTypes.includes(item.type) }"
@click="toggleSelection(item.type)"
>
{{ item.title }}
</div>
</div>
<div class="selection-info">
<p>已
选中: {{ selectedTypes.length }} 项（共 {{ stickyboxlist.length }} 项）</p>
<p v-if="selectedItems.length > 0">
选中内容: {{ selectedItems.join(', ') }}</p>
<p v-else>未
选中任何项</p>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
stickyboxlist: [
{ title: "北京南", type: 0 },
{ title: "天津", type: 1 },
{ title: "仅看有票", type: 2 },
{ title: "高铁动车", type: 3 },
{ title: "测试", type: 4 },
{ title: "高铁动车", type: 5 }
],
selectedTypes: [] // 存储
选中的type值
},
computed: {
// 获取
选中项的标题
selectedItems() {
return this.stickyboxlist
.filter(item => this.selectedTypes.includes(item.type))
.map(item => item.title);
}
},
methods: {
// 切换单个
选项的
选中状态
toggleSelection(type) {
const index = this.selectedTypes.indexOf(type);
if (index > -1) {
// 如果已
选中则移除
this.selectedTypes.splice(index, 1);
} else {
// 如果未
选中则添加
this.selectedTypes.push(type);
}
},
// 全
选
selectAll() {
this.selectedTypes = this.stickyboxlist.map(item => item.type);
},
// 取消全
选
deselectAll() {
this.selectedTypes = [];
},
// 反
选
toggleSelect() {
const allTypes = this.stickyboxlist.map(item => item.type);
this.selectedTypes = allTypes.filter(type => !this.selectedTypes.includes(type));
}
},
mounted() {
// 初始化
选择：默认
选中第一项（可
选）
if (this.stickyboxlist.length > 0) {
this.toggleSelection(this.stickyboxlist[0].type);
}
}
});
</script>
</body>
</html>
```
### 功能说明
1. **
多选功能核心实现**：
- 使用`selectedTypes`数组存储
选中项的`type`值
- 通过`toggleSelection()`方法切换
选中状态
- 动态绑定`active`类名：`:class="{ 'active': selectedTypes.includes(item.type) }"`
2. **交互特性**：
- 胶囊式设计：采用圆角边框的按钮样式[^1]
- 视觉反馈：
选中项使用蓝色背景和阴影效果
- 悬停效果：未
选中项悬停时有轻微背景变化
3. **扩展功能**：
- **全
选/取消全
选**：一键操作所有
选项
- **反
选**：快速切换
选中状态
- **
选中计数**：实时显示
选中项数量和具体内容
- **默认
选中**：初始化时默认
选中第一项
4. **数据展示**：
- 底部信息面板显示已
选项数量
- 实时列出所有
选中项的标题
- 清晰的视觉区分
选中和未
选中状态
### 相关问题
1. 如何在小程序中实现类似的
多选功能？
2. 当
选中的项目需要持久化存储时，有哪些实现方案？
3. Vue3的Composition API如何优化
多选状态管理？
4. 当列表项非常
多时（如超过100项），如何优化性能？
5. 如何实现
多选组件与服务端API的数据同步？
6.
多选功能在响应式布局中有哪些最佳实践？
> 实现参考:[^1]
> 交互设计参考:[^3]
扫一扫
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
