持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情
写在前面的话
继上次input框的二次封装后，本文总结关于select选择框的封装，由于此次设计风格样式和交互均与element-ui相差甚远，所以本次封装则从零开始编写。
交代开发环境
本项目基于vue2.0+vuex+ts开发，使用vue-property-decorator风格。
封装思路
1.新建组件
2.样式开发
3.基本选择框功能开发
4.其他功能封装
开始开发
1.新建组件
首先，在components新建一个公用组件，我这边新建为SelectionBox。
这样，此后在业务界面中哪里需要用到就直接引入并使用即可。
2.样式开发
本次本人需要开发的风格样式如下：当滑动到选择框时，无需点击，会自动出现列表项。
大致代码随意贴图如下
3.基本功能代码开发
在SelectionBox子组件中：接受父组件传递过来的list列表值和index选中数值，当值发生变化，触发父组件的updateIndex方法
<template>
<div class="selection-container" :key="type">
……
<div class="list">
<div
class="li"
:class="{ 'li-active': b === index }"
v-for="(a, b) in list"
:key="type + '_' + b"
@click="$emit('updateIndex', b)"
>
{{ a["text"] || "全部" }}
</div>
</div>
</div>
</template>
………
<script lang="ts">
……
export default class SelectionBox extends Vue {
@Prop(String) private type?: string;
@Prop(Array) private list?: any;
@Prop(Number) private index?: number;
}
</script>
业务组件
<SelectionBox
type="exercise-subject"
list="SubjectList"
:index="SubjectIndex"
@updateIndex="updateSubjectIndex"
></SelectionBox>
这样一个基本的select选择框封装基本完成。
4.其他功能封装
基本的功能已完成，那么还有可以个性化封装的小功能。如
可个性化定制select的默认placeholder值，实现如下：
在子组件接受label变量，如有传入则使用传入的值，如无使用则默认Placeholder。具体实现如下：
SearchBox子组件
<template>
<div class="selection-container" :key="type">
<div class="label">
{{
list[index] && list[index][name || "text"]
? list[index][name || "text"]
: label || "全部"
}}
</div>
……
</div>
</template>
<script lang="ts">
……
export default class SelectionBox extends Vue {
@Prop(String) private label!: string;
……
业务组件
<SelectionBox
type="exercise-subject"
label="选科目"
:list="SubjectList"
:index="commonSubjectIndex"
@updateIndex="updateSubjectIndex"
></SelectionBox>
也可定制输入列表的name值，实现如下：
在子组件接受name变量，如有传入则使用传入的值，如无使用则默认“text”。具体实现如下：
SearchBox子组件
<template>
<div class="selection-container" :key="type">
……
<div class="list">
<div
class="li"
:class="{ 'li-active': b === index }"
v-for="(a, b) in list"
:key="type + '_' + b"
@click="$emit('updateIndex', b)"
>
{{ a[name || "text"] || "全部" }}
</div>
</div>
</template>
<script lang="ts">
……
export default class SelectionBox extends Vue {
@Prop(String) private name!: string;
……
业务组件
<SelectionBox
type="exercise-subject"
label="选科目"
:list="SubjectList"
:name="subject"
:index="commonSubjectIndex"
@updateIndex="updateSubjectIndex"
></SelectionBox>
那么，我们的列表项就不受限于一定要使用“text”作为key值了，可以更改为subject
subjectList: [
{
index: 1,
subject: "全部"
},
{
index: 2,
subject: "语文"
},
……
]
总结
到这里，一个基于select选择框组件开发基本完成。
