vue封装Segmented组件

很高兴能回答这个问题。Vue的Segmented组件可以通过以下方式进行封装：

1. 创建一个组件文件，例如Segmented.vue
2. 在文件中定义组件的模板和样式
3. 使用props属性将数据传递到组件中
4. 使用$emit来传递事件

下面是一个示例组件的代码：

<template>
<div class="segmented">
<div v-for="(item, index) in items" :key="index"
:class="{ 'active': index === activeIndex }"
@click="handleClick(index)">
{{ item }}
</div>
</div>
</template>

<script>
export default {
props: {
items: Array,
activeIndex: Number,
},
methods: {
handleClick(index) {
this.$emit('update:activeIndex', index);
},
},
};
</script>

<style>
.segmented {
display: flex;
justify-content: space-between;
border: 1px solid #ccc;
}

.segmented div {
flex: 1;
text-align: center;
padding: 10px 0;
}

.segmented div.active {
background-color: #ccc;
}
</style>

希望这能对你有所帮助！