uv-input去空格

### 实现 UV-Input 组件中去除空格

为了实现 `uv-input` 组件输入内容去空格的功能，可以利用 Vue 的计算属性和修饰符来处理输入值。具体来说，通过使用 `computed` 属性结合自定义的 getter 和 setter 方法能够有效地控制输入框内的数据显示形式[^1]。

对于仅移除字符串两端空白的情况，在模板部分绑定 v-model 至本地数据变量的同时应用 `.trim` 修饰符即可达成目的：

<template>
  <div id="app">
    <!-- 使用 .trim 移除首尾空格 -->
    <uv-input v-model.trim="message"></uv-input>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: ''
    }
  },
}
</script>

如果目标是在获取用户输入时彻底清除所有类型的空白字符，则需采用更复杂的逻辑——即创建一个带有过滤功能的方法，并将其应用于 `v-model` 所关联的数据字段上。下面是一个完整的例子说明如何做到这一点：

<template>
  <div id="app">
    <!-- 自定义方法 removeSpaces 来删除所有的空格 -->
    <uv-input :value="noSpaceMessage" @input="updateMessageWithoutSpaces"></uv-input>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      originalMessage: '',
    };
  },
  computed: {
    noSpaceMessage() {
      // 返回不带任何空格的消息副本
      return this.originalMessage.replace(/\s+/g, '');
    },
  },
  methods: {
    updateMessageWithoutSpaces(event) {
      // 更新原始消息并触发视图重新渲染
      this.originalMessage = event.target.value;
    },
  },
};
</script>

上述代码片段展示了两种不同的方式来管理 `uv-input` 中的空格问题：一种简单地依靠内置的 `.trim` 修饰符；另一种则是借助于计算属性与事件监听器组合而成的手动解决方案，适用于需要更加精细控制场景下的需求。