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<htmlinputelement null>()</htmlinputelement>拿到原生 input 元素，用于聚焦和清空时触发原生行为 -
showClear是计算属性：当modelValue非空、且组件未被disabled时为 true
清除按钮交互逻辑
点击清除图标时，清空值并自动聚焦回输入框（提升体验）：
python-flask-vue-creator
下载
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、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等原生属性透传给内部<input> - 支持插槽：
v-slot:suffix可自定义清除图标（比如用 Icon 组件），默认用 × 或<svg></svg>
样式与细节优化
清除图标需精准定位，且不干扰输入体验：
- 外层用
position: relative，清除图标position: absolute; right: 8px; top: 50%; transform: translateY(-50%) - 图标添加
cursor: pointer和 hover 效果（如颜色变深） - 输入框
padding-right需留出图标空间（例如 32px），避免文字被遮挡 - 图标点击区域建议不小于 24×24px，适配触屏
