需求
当用户输入的时候，我们需要自动去掉输入框两边的空格， 注意，中间是能输入空格的
我们一般使用的是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 inputEleif (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 = newValdispatchEvent(inputEle, 'input')}}el.inputEle = inputEleel._blurHandler = handlerinputEle.addEventListener('blur', handler)},unbind(el) {const {inputEle } = elinputEle.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="c" 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>
效果预览
