vue input框加清空

### 创建带清除按钮的 Input 输入框组件

为了实现在 Vue 中创建一个带有清空功能的 `input` 输入框组件，可以利用 Vue 的组合式 API 或选项式 API 来构建此组件。这里提供一种基于 Vue 3 的解决方案，并借鉴了相关资料中的设计思路。

#### 组件结构概述

该组件应具备以下特性：

- 当输入框中有内容时展示清除图标；
- 用户点击清除图标可清空当前输入框的内容；
- 支持双向数据绑定 (`v-model`) 实现父级与子级之间的交互；
- 良好的用户体验和视觉效果[^2]。

#### HTML 结构与样式

首先定义基本的模板结构以及简单的 CSS 样式来美化组件外观并控制清除图标的可见性逻辑。

<template>
  <div class="custom-input-container">
    <!-- 输入框 -->
    <el-input v-bind="$attrs" :model-value="currentValue" @update:model-value="handleInput"></el-input>
    
    <!-- 清除按钮 -->
    <i v-if="showClearButton && currentValue !== ''"
       class="clear-icon el-icon-circle-close"
       @click.stop.prevent="clearInput"></i>
  </div>
</template>

<style scoped>
.custom-input-container {
  position: relative;
}

.clear-icon {
  cursor: pointer;
  font-size: 16px;
  color: #c0c4cc;
  transition: all .3s ease-in-out;

  &:hover {
    color: red; /* 鼠标悬停变红 */
  }

  &::before { content: ''; }
}
</style>

上述代码片段展示了如何设置清除按钮仅当存在有效输入值时才显示，并为其添加鼠标指针样式以便于识别其为可操作元素。同时设置了颜色变化动画以增强交互反馈体验。

#### JavaScript 行为逻辑

接下来编写处理用户交互的行为逻辑部分，包括更新内部状态、响应外部传入的数据模型变更等。

<script setup lang="ts">
import { ref, watch } from 'vue';

// 定义 props 接收来自父组件传递下来的初始值或其他配置项
const props = defineProps({
  modelValue: String,
});

let emit = defineEmits(['update:modelValue']);

// 内部维护的实际输入值副本
let currentValue = ref(props.modelValue || '');

watch(() => props.modelValue, (newValue) => {
  currentValue.value = newValue ?? '';
}, { immediate: true });

function handleInput(eventOrValue) {
  const value = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
  
  // 更新本地状态的同时通知父组件发生改变
  currentValue.value = value;
  emit('update:modelValue', value);
}

function clearInput() {
  // 执行实际清理动作并向外发送新值为空字符串的通知
  currentValue.value = '';
  emit('update:modelValue', '');
}
</script>

这段脚本实现了对输入框内文本的变化追踪机制，确保无论何时何地发生的更改都能被及时反映出来。此外还包含了针对清除按钮点击事件的具体处理器函数——它负责重置字段并将最新情况同步给上级作用域内的关联变量。

#### 使用方式说明

最后，在其他地方使用这个自定义组件非常简单直观，只需像平常一样引入并注册即可正常使用。

<!-- ParentComponent.vue -->
<CustomInputWithClear v-model="searchText"/>

通过这种方式就可以轻松获得具有清除功能的输入控件啦！