vue3项目如何去除el-input前后空格

本文主要讲解关于vue3项目如何去除el-input前后空格相关内容，让我们来一起学习下吧！

一看到这个需求，心想这个多简单呀。第一想法就是v-model.trim。然而被测试同学打回来了。

需求是：去除前后空格，但是可以保留中间部分的空格。

解决方法：

方法一：

如果没有其他复杂的需求，仅仅在页面使用el-input组件，那么可以全局二次封装一个简单的处理方法。

<template>
  <el-input v-model="modelValue" @blur="hBlur" v-bind="$attrs">
    
  </el-input>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
});
const emit = defineEmits(['update:modelValue']);
const modelValue = computed({
  get() {
    return props.modelValue;
  },
  set(v) {
    emit('update:modelValue', v);
  },
});
const hBlur = () => {
  modelValue.value = modelValue.value.trim();
};
</script>

缺点：
这种方式如果是涉及到#append等自定义内容，还得去重复封装一下。（关键是我是系统全部功能都开发完了之后，才接收到这个bug的，难道我要一个个页面去调试替换么？）对于我那么懒惰的人来说是绝对不可能的。

方法二（懒人推荐）：

全局指令

function getInput(el: any) {
  let inputEle;
  if (el.tagName !== 'INPUT') {
    inputEle = el.querySelector('input');
  } else {
    inputEle = el;
  }
  return inputEle;
}
function clearTrim(inputEle: any) {
  inputEle.value = inputEle.value.trim(); //这里会存在input框中的内容改了，但是v-model绑定的值没有被更改到
}
export const trim: Directive = {
  mounted(el) {
    let inputEle = getInput(el);
    const blurHandler = function () {
      clearTrim(inputEle);
    };
    const enterHandler = function (e: { keyCode: number }) {
      if (e.keyCode === 13) {
        clearTrim(inputEle);
      }
    };
    inputEle._blurHandler = blurHandler;
    inputEle._enterHandler = enterHandler;
    inputEle.addEventListener('blur', blurHandler);
    inputEle.addEventListener('keydown', enterHandler);
  },
  unmounted(el) {
    let inputEle = getInput(el);
    inputEle.removeEventListener('blur', inputEle._blurHandler);
    inputEle.removeEventListener('keydown', inputEle._enterHandler);
  },
};

遇到的问题：input框中的内容改了，但是v-model绑定的值没有被更改到

function dispatchEvent(el, type) {
      let evt = document.createEvent('HTMLEvents')
      evt.initEvent(type, true, true)
      el.dispatchEvent(evt)
}

 // 修改value值之后调用
   dispatchEvent(inputEle, 'input')

问题：initEvent（）方式已经被弃用

正确解决方法：

function dispatchEvent(el: any, type: string) {
  let evt = new Event(type, {
    bubbles: true,
    cancelable: true,
    composed: true,
  });
  el.dispatchEvent(evt); //手动触发input时间
}

以上就是关于vue3项目如何去除el-input前后空格相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)