需求
当用户输入的时候,我们需要自动去掉输入框两边的空格, 注意,中间是能输入空格的
我们一般使用的是 v-model.trim
<!-- 原生标签去空格 --->
<input type="text" v-model.trim="title" placeholder="请输入标题" />
这种原生标签input
能实现去空格,但是封装的不行了,比如使用 ElementUI
的input
<!-- 有缺陷,不能实现中间输入空格, 比如要输入 “你好啊 中国” 这中间有空格,会输入不了 --->
<el-input type="text" v-model.trim="title" placeholder="请输入标题" />
实现
封装成指令 v-trim
/**
* 去除两边空格
* 使用 <el-input v-model="xxx" v-trim></el-input>
*/
function getInput(el) {
let inputEle
if (el.tagName !== 'INPUT') {
inputEle = el.querySelector('input')
} else {
inputEle = el
}
return inputEle
}
function dispatchEvent(el, type) {
let evt = document.createEvent('HTMLEvents')
evt.initEvent(type, true, true)
el.dispatchEvent(evt)
}
const Trim = {
inserted: el => {
let inputEle = getInput(el)
const handler = function(event) {
const newVal = event.target.value.trim()
if (event.target.value != newVal) {
event.target.value = newVal
dispatchEvent(inputEle, 'input')
}
}
el.inputEle = inputEle
el._blurHandler = handler
inputEle.addEventListener('blur', handler)
},
unbind(el) {
const { inputEle } = el
inputEle.removeEventListener('blur', el._blurHandler)
}
}
Trim.install = function(Vue) {
Vue.directive('trim', Trim)
}
export default Trim
使用
<template>
<div class="container">
测试页面
<el-form>
<el-form-item>
<input type="text" v-model.trim="inputs._a" placeholder="原生input,v-model.trim能实现" />
</el-form-item>
<el-form-item>
<input type="text" v-model="inputs.aaa" placeholder="普通inut" v-trim />
</el-form-item>
<el-form-item>
<el-input v-model="inputs.bbb" placeholder="el-input" v-trim />
</el-form-item>
<el-form-item v-trim>
<el-input v-model="inputs.ccc" placeholder="外层使用" />
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'TestPage',
data() {
return {
inputs: {
aaa: '',
bbb: '',
ccc: '',
},
}
},
}
</script>
<style lang="scss" scoped>
.el-form {
padding-top: 100px;
max-width: 500px;
margin: 0 auto;
input {
width: 100%;
padding: 0 20px;
height: 40px;
}
}
</style>
效果预览