vue 是当今最受欢迎的前端开发框架之一，拥有众多高效、易用的特性，如数据绑定、组件化、响应式等。分段选择是常见的 ui 组件，它允许用户选择一个或多个分段，通常用于查询条件、标签过滤、数据筛选等场景。本文将介绍如何使用 vue 实现一个分段选择组件。
- 准备工作
在开始之前，我们需要准备以下文件：
- index.html：包含 Vue 的引入和组件的挂在代码
- Segment.vue：分段选择组件的代码
在 index.html 文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Segment Selector Component</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>这里我们使用了 Vue 3.0 的全局构建版本，并将其引入到页面中。同时还引入了一个名为 app.js 的脚本，用于挂载组件。
接下来创建 app.js 文件，并添加以下代码：
立即学习“前端免费学习笔记（深入）”；
import Segment from './Segment.vue';
const app = Vue.createApp({});
app.component('Segment', Segment);
app.mount('#app');这里我们使用 Vue 3.0 的 API 创建了一个空的应用实例，并注册了一个名为 Segment 的组件，并将其挂载到 id 为 app 的 DOM 元素上。同时我们还需要创建一个名为 Segment.vue 的文件，用于实现分段选择组件的代码。
- 实现分段选择组件
在 Segment.vue 文件中，我们实现一个名为 Segment 的组件。我们需要添加三个 props：data、selectedIndex 和 multiSelect。data 为分段数据源，selectedIndeX 为当前选中的分段索引，multiSelect 为是否开启多选模式。同时我们需要在组件中定义一个方法 handleSegmentClick 用于处理分段的点击事件。
<template>
<div class="segment-container">
<div
v-for="(segment, index) in data"
:key="index"
:class="{
'segment': true,
'segment-active': multiSelect ?
selectedIndex.includes(index) :
selectedIndex === index
}"
@click="handleSegmentClick(index)"
>
{{ segment }}
</div>
</div>
</template>
<script>
export default {
name: 'Segment',
props: {
data: {
type: Array,
default: () => []
},
selectedIndex: {
type: [Number, Array],
default: -1
},
multiSelect: {
type: Boolean,
default: false
}
},
methods: {
handleSegmentClick(index) {
let selected = this.selectedIndex;
if (this.multiSelect) {
selected = (Array.isArray(selected)) ? selected : [];
if (selected.includes(index)) {
selected.splice(selected.indexOf(index), 1);
} else {
selected.push(index);
}
} else {
selected = index === selected ? -1 : index;
}
this.$emit('update:selectedIndex', selected);
}
}
};
</script>在模板部分，我们使用 v-for 遍历数据源中的每一个分段，并通过样式绑定指令为选中的分段添加 active 样式。同时通过 @click 绑定事件，我们实现了分段的点击事件处理。
在脚本部分，我们定义了一个名为 handleSegmentClick 的方法，用于处理分段的点击事件。方法中，我们首先获取当前选中的分段，并根据多选模式与否的状态进行不同的处理。具体而言，在多选模式下，我们将选中状态存储在数组 selected 中，当分段被选中时，我们向 selected 中添加当前分段的索引，否则我们从 selected 中删除该分段的索引。而在单选模式下，我们仅仅是将选中的分段索引存储在 selected 中，如果点击的分段已经被选中，则清除选中状态。
最后，我们通过 this.$emit 将更新后的选中状态传递回父组件。并将 handleSegmentClick 方法绑定到模板中的 @click 事件中去。
- 使用分段选择组件
在 index.html 文件中，我们创建一个名为 segmentData 的变量，它是一个数组类型，并将其作为组件的 props 传递给 Segment 组件。
<div id="app">
<Segment
:data="segmentData"
:selected-index.sync="selectedIndex"
:multi-select="multiSelect"
/>
</div>可以看出，我们配置了三个 props：data、selectedIndex 和 multiSelect，selectedIndex 使用了.sync 修饰符，以使其支持双向数据绑定。
接下来，我们在 app.js 中添加以下代码，以进行数据初始化和相关处理：
import Segment from './Segment.vue';
const app = Vue.createApp({
data() {
return {
segmentData: ['Web Development', 'Data Science', 'Mobile Development'],
selectedIndex: 0,
multiSelect: false
};
},
methods: {
toggleSelection() {
this.multiSelect = !this.multiSelect;
this.selectedIndex = this.multiSelect ? [0, 2] : 0;
}
}
});
app.component('Segment', Segment);
app.mount('#app');在 data 方法中，我们初始化了三个变量：segmentData、selectedIndex 和 multiSelect。segmentData 是我们所需选择的分段数据源，selectedIndex 则用于记录当前选中的分段索引，multiSelect 则表示分段选择是否开启多选模式。
在 methods 中，我们定义了一个名为 toggleSelection 的方法，在该方法中我们切换了 multiSelect 的值，并根据其状态设置了 selectedIndex 的值。具体而言，当 multiSelect 为 true 时，我们将 selectedIndex 设置为 [0, 2]，表示第一和第三个分段被选中，否则我们将 selectedIndex 设置为 0，表示选中的是第一个分段。
- 总结
在本文中，我们介绍了如何使用 Vue 实现一个分段选择组件。该组件是一个通用的 UI 组件，可以用于多种场景，如查询条件、标签过滤、数据筛选等。通过本文的介绍，读者可以学习到如何利用 Vue 实现数据绑定、组件化、响应式等重要特性，加深对 Vue 的理解和使用。
