Vue 3 中可纯组合式 API 封装带清除按钮的输入框：通过 ref 获取 DOM、v-model 双向绑定、计算 showClear 控制图标显隐，点击清除时清空值并聚焦，手动派发 change 事件，支持 allowClear、disabled、原生属性透传及 suffix 插槽。
Vue 3 中封装带清除按钮的输入框，核心是结合 v-model 双向绑定、ref 获取原生 DOM、监听输入与点击事件，并控制清除图标的显隐逻辑。不需要依赖 Element Plus，纯组合式 API 即可实现。
基础结构与响应式控制
用 ref 绑定输入值，用另一个 ref 跟踪是否显示清除图标（即输入框有内容且未禁用）：
- 定义
modelValueprop 接收 v-model 值，同时用defineModel（Vue 3.4+）或emit('update:modelValue')同步更新 - 用
const inputRef = ref拿到原生 input 元素，用于聚焦和清空时触发原生行为() -
showClear是计算属性：当modelValue非空、且组件未被disabled时为 true
清除按钮交互逻辑
点击清除图标时，清空值并自动聚焦回输入框（提升体验）：
Antd Vue Components
下载
学习并查找 ant-design-vue（Vue 3）组件的使用方式，包括变体、运行示例、Vue 3 SFC 代码以及关键 props/events/slots。当用户询问如何使用 ant-design-vue 时使用。
- 绑定
@click="handleClear"，内部执行modelValue.value = '' - 调用
inputRef.value?.focus()，避免清空后光标丢失 - 注意：清除操作应触发
change和input事件（尤其表单校验依赖 change）——可手动inputRef.value?.dispatchEvent(new Event('change', { bubbles: true }))
支持常见扩展能力
让组件更实用，建议预留以下能力接口：
-
allowClear：布尔 prop，控制是否启用清除功能（默认 true） -
disabled：禁用时隐藏清除图标、阻止点击 -
placeholder、maxlength、type等原生属性透传给内部 - 支持插槽：
v-slot:suffix可自定义清除图标（比如用 Icon 组件），默认用 × 或
样式与细节优化
清除图标需精准定位，且不干扰输入体验：
- 外层用
position: relative，清除图标position: absolute; right: 8px; top: 50%; transform: translateY(-50%) - 图标添加
cursor: pointer和 hover 效果（如颜色变深） - 输入框
padding-right需留出图标空间（例如 32px），避免文字被遮挡 - 图标点击区域建议不小于 24×24px，适配触屏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
