【3】Vite Vue3 用户、角色、岗位选择组件封装

**用户、角色、岗位选择组件封装**

在实际的项目开发中，我们经常需要实现一个复杂的选择组件，例如用户选择、角色选择、岗位选择等。这些组件通常包含多个选项，并且需要支持多种筛选和过滤功能。在本文中，我们将介绍如何使用 Vite 和 Vue3 来封装一个高效的选择组件。

**组件结构**

首先，我们需要定义组件的基本结构。我们可以创建一个名为 `SelectComponent.vue` 的文件，并在其中编写以下代码：

html<template>
 <div class="select-component">
 <!--选项列表 -->
 <ul>
 <li v-for="(option, index) in options" :key="index">
 {{ option.text }}
 </li>
 </ul>

 <!-- 筛选输入框 -->
 <input type="text" v-model="filterText" placeholder="请输入关键字">

 <!--选项过滤结果 -->
 <div class="filtered-options">
 <ul>
 <li v-for="(option, index) in filteredOptions" :key="index">
 {{ option.text }}
 </li>
 </ul>
 </div>

 <!--选择按钮 -->
 <button @click="handleSelect">选择</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 options: [
 { text: '选项1', value: 'option-1' },
 { text: '选项2', value: 'option-2' },
 { text: '选项3', value: 'option-3' }
 ],
 filterText: '',
 selectedOption: null };
 },
 computed: {
 filteredOptions() {
 return this.options.filter(option => option.text.includes(this.filterText));
 }
 },
 methods: {
 handleSelect() {
 // 处理选择逻辑 console.log('选中:', this.selectedOption);
 }
 }
};
</script>

<style scoped>
.select-component {
 padding:20px;
}

.filtered-options {
 margin-top:10px;
}
</style>

html<template>
 <div class="app">
 <!-- 使用 SelectComponent 组件 -->
 <select-component :options="userOptions" @selected="handleUserSelect"></select-component>

 <!-- 使用 SelectComponent 组件 -->
 <select-component :options="roleOptions" @selected="handleRoleSelect"></select-component>

 <!-- 使用 SelectComponent 组件 -->
 <select-component :options="postOptions" @selected="handlePostSelect"></select-component>
 </div>
</template>

<script>
import SelectComponent from './SelectComponent.vue';

export default {
 components: { SelectComponent },
 data() {
 return {
 userOptions: [
 { text: '用户1', value: 'user-1' },
 { text: '用户2', value: 'user-2' }
 ],
 roleOptions: [
 { text: '角色1', value: 'role-1' },
 { text: '角色2', value: 'role-2' }
 ],
 postOptions: [
 { text: '岗位1', value: 'post-1' },
 { text: '岗位2', value: 'post-2' }
 ]
 };
 },
 methods: {
 handleUserSelect(selectedOption) {
 console.log('用户选择:', selectedOption);
 },
 handleRoleSelect(selectedOption) {
 console.log('角色选择:', selectedOption);
 },
 handlePostSelect(selectedOption) {
 console.log('岗位选择:', selectedOption);
 }
 }
};
</script>

<style scoped>
.app {
 padding:20px;
}
</style>