前言
假如有个需求，输入框在输完内容后进行判断是否为纯空格，如果是纯空格，就要清空输入框，对于el-form组件的表单验证，在rules中的required为true时，纯空格也能检验通过，于是开始对el-input组件进行二次封装。
1、一般说到二次封装，很多人是这样封装的，我以前也是：
- 父级
main.vue
<template>
<my-input v-model="value"></my-input>
</template>
<script>
import MyInput from './my-input.vue;
export default {
components: {
MyInput
},
data() {
return {
value: ''
}
}
}
</script>
- 子组件
my-input.vue
<template>
<el-input></el-input>
</template>
你会发现这个输入框你不能输入任何东西，因为子组件my-input并没有支持任何传参，于是接着改：
<template>
<el-input :value="value" @input="handleInput" @change="handleChange"></el-input>
</template>
<script>
export default {
props() {
value: [String, Number]
}，
methods: {
handleInput() {
this.$emit('input', $event)
},
handleChange(value) {
//处理纯空格
if (Object.prototype.toString.call(value) === '[object String]' && value.trim() === '') {
this.$emit('input', '')
}
}
}
}
</script>
如果要全部输入框都支持“不允许输入纯空格”，就将它封装成全局组件，看似完美，但是你会发现，el-input组件除了可以进行值的双向绑定，它还支持size、readonly、disabled...等18个属性，7个事件，于是接着写一大堆“中间代码”来继承原有el-input的各种属性、事件。
2、改进： 利用 v-bind="$attrs" 和 v-on="$listeners" 来“继承” el-input 组件的属性和事件
<template>
<el-input v-bind="$attrs" v-on="$listeners" @change="handleChange"></el-input>
</template>
<script>
export default {
methods: {
handleChange(value) {
if (Object.prototype.toString.call(value) === '[object String]' && value.trim() === '') {
this.$emit('input', '')
}
}
}
}
</script>
如果将这样的组件覆盖原有的el-input，那就会出问题，它并不支持插槽...，有想翻桌子的冲动。那么，有没有一种只想改我想改的部分，其它的不动，不需要自己手写代码去“继承”呢？
3、使用 extends 选项对组件进行扩展
- 雏形
<template>
//这里复制element-ui中el-input的源码，太长了，不好展示
</template>
<script>
import { Input } from 'element-ui'
export default {
extends: Input,
created() {
this.$on('change', (value)=> {
if (Object.prototype.toString.call(value) === '[object String]' && value.trim() === '') {
this.$emit('input', '')
}
})
}
}
</script>
这样就能对组件各种改改改；
template里面的内容是复制过来的，一般不需要改动，如果需要改的话当然也可以这么做。
- 改进
如果不需要template，那就写在“*.js”文件中
import Vue from 'vue';
import ElementUI from 'element-ui';
Vue.component('el-input', {
extends: ElementUI.Input,
created() {
this.$on('change', (value)=> {
if (Object.prototype.toString.call(value) === '[object String]' && value.trim() === '') {
this.$emit('input', '')
}
})
}
})
这下简洁多了！
- 局部组件
<template>
<div>
内容...
<my-input></my-input>
</div>
</template>
<script>
import { Input } from 'element-ui'
export default {
components: {
myInput: {
extends: Input,
...
}
}
}
</script>
