对element的二次封装主要是提高组件的复用性,降低代码的复杂,引用的组件只需要传入必要的data
参数和settings
配置以及@select
事件即可
<template>
<div class="select-container">
<span v-if="settings.title">{{settings.title}}</span>
<el-select
v-model="value"
:size="settings.size||'mini'"
:style="{width:settings.width}"
@change="handeleChange"
:placeholder="settings.placeholder"
:multiple="settings.isMultiple"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label||item.value"
:value="item.value"
></el-option>
</el-select>
</div>
</template>
<script>
/*
settings:{
placeholder 提示语,默认 "请选择"
isSelected 是否以选项第一个作为当前项,默认false
isMultiple 是否多选,默认false,
title 选择器名称,
size: 选择器尺寸,默认mini
width 选择器宽度,默认element-ui自带的默认宽度
}
options:[
{ value 必填 , label 选填,如果不传,以value的值展示 }
]
*/
export default {
name: "",
props: {
data: { type: Array, default: () => [], required: true },
settings: {
type: Object,
default: () => {
return {
placeholder: "请选择",
isSelected: false,
isMultiple: false,
title: "",
size: "mini"
};
}
}
},
data() {
return {
value: this.settings.isSelected ? this.options[0].value : ""
};
},
methods: {
handeleChange(e) {
this.$emit("select", e);
}
}
};
</script>
<style scoped>
.select-container {
width: 15%;
}
</style>
使用实例
<template>
<div>
<v-select :data="options" :settings="settings" @select="handleSelect" />
</div>
</template>
<script>
import vSelect from "@/components/Select";
export default {
name: "",
data() {
return {
options: [
{ value: "选项1" },
{ value: "选项2" },
{ value: "选项3" },
{ value: "选项4" },
{ value: "选项5" }
],
settings: { title: "选择器" }
};
},
components: { vSelect },
methods: {
handleSelect(e) {
console.log(e);
}
}
};
</script>