Vue封装指令去掉输入框前后空格、支持el-input

需求

当用户输入的时候，我们需要自动去掉输入框两边的空格， 注意，中间是能输入空格的
我们一般使用的是 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>

效果预览