爱站程序员基地对element的二次封装主要是提高组件的复用性,降低代码的复杂,引用的组件只需要传入必要的
data
参数和
settings
配置以及
@select
事件即可
<template><div class=\"select-container\"><span v-if=\"settings.title\">{{settings.title}}</span><el-selectv-model=\"value\":size=\"settings.size||\'mini\'\":style=\"{width:settings.width}\"@change=\"handeleChange\":placeholder=\"settings.placeholder\":multiple=\"settings.isMultiple\"><el-optionv-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 是否以选项第一个作为当前项,默认falseisMultiple 是否多选,默认false,title 选择器名称,size: 选择器尺寸,默认miniwidth 选择器宽度,默认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>
