打造无冗余空格输入体验：Element UI/Plus 自定义 el-input 组件教程

在使用 Element UI 时，如果你想要对 el-input 组件进行扩展，以便在用户输入时自动去除多余的空格（包括首尾空格以及中间的连续空格），你可以通过继承 el-input 组件并添加自定义逻辑来实现这一功能。这里，我将向你展示如何创建一个新的 Vue 组件来继承 el-input 并添加去空格的功能。

首先，确保你已经正确安装了 Element UI 并在你的 Vue 项目中进行了配置。

步骤 1: 创建新的 Vue 组件

在你的 Vue 项目中，创建一个新的 Vue 组件，比如命名为 CustomInput.vue。

<template>
  <el-input
    :value="trimmedValue"
    @input="handleInput"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot></slot>
  </el-input>
</template>

<script>
import { ElInput } from 'element-plus'; // 注意：如果是 Element UI 2.x，请使用 import { ElInput } from 'element-ui';

export default {
  name: 'CustomInput',
  components: {
    ElInput
  },
  props: {
    value: [String, Number], // 继承父组件的 value 属性
    // 可以添加更多 props 来满足你的需求
  },
  computed: {
    trimmedValue: {
      get() {
        return this.value ? this.value.trim().replace(/\s+/g, ' ') : '';
      },
      set(value) {
        this.$emit('input', value.trim().replace(/\s+/g, ' '));
      }
    }
  },
  methods: {
    handleInput(value) {
      // 在这里你可以添加更多的输入处理逻辑
      // 然后通过 $emit 触发 input 事件，传递处理后的值
      this.$emit('input', value.trim().replace(/\s+/g, ' '));
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加 CSS 样式 */
</style>

注意：如果你使用的是 Element Plus（Element UI 的 Vue 3 版本），请确保导入路径和组件名称正确。如果你使用的是 Element UI 2.x，则导入路径应为 'element-ui'。

步骤 2: 在你的应用中使用 CustomInput

现在，你可以在你的 Vue 应用中的任何地方使用 CustomInput 组件，并享受自动去除空格的功能了。

<template>
  <div>
    <custom-input v-model="inputValue" placeholder="请输入内容"></custom-input>
    <p>你输入的内容是: {{ inputValue }}</p>
  </div>
</template>

<script>
import CustomInput from './components/CustomInput.vue';

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

这样，每当用户在 CustomInput 组件中输入内容时，首尾空格和连续的空格都会被自动去除。这个组件通过监听 input 事件，并在事件触发时处理输入值，然后更新 v-model 绑定的变量，从而实现了这一功能。