技术栈

vue3 element-plus 输入框 clearable属性 聚焦时宽度会变化

余道各努力,千里自同风2023-12-25 2:01

解决办法

因为你的代码中el-input是没有宽度的, 所以实际渲染出来的 el-input宽度 = 原生input宽度 + 前缀图标宽度 + 后缀图标宽度。 可以写css固定el-input宽度来处理。

复制代码
:deep.el-input.el-input--default.el-input--suffix {
  // 固定宽度
  width: 200px !important;
}
上一篇:矩阵的转置
下一篇:5. 行为模式 - 备忘录模式
相关推荐
dsyyyyy1101
1 天前
JavaScript变量
开发语言·javascript·ecmascript
kyriewen
1 天前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
胡志辉的博客
1 天前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖
1 天前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty
1 天前
Vue2与Vue3之间API差异
前端·javascript·vue.js
老毛肚
1 天前
软件测试期末考试
vue.js
小二·
1 天前
Next.js 15 全栈开发实战
开发语言·javascript·ecmascript
杨若瑜
1 天前
本地开发环境慢?localhost的锅!
vue.js
Rain509
1 天前
2.1 Nest.js 项目初始化与模块化架构
开发语言·前端·javascript·后端·架构·数据分析·node.js
拾年275
1 天前
从零手写 Ajax:用原生 XHR 搭建前后端交互全流程
前端·javascript·ajax
热门推荐
01HTTP 与 HTTPS 的区别:从原理到实战详解022026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?03【AI】2026 年具身智能模型和世界模型总结042026年6月AI行业全景:从百模大战到Agent元年,这30天发生了什么?05GitHub 镜像站点06AI科技热点日报 | 2026年6月1日07《置身钉内》原文-可播放阅读08Claude Code、Codex、Cursor三分天下:2026年AI编程Agent生态全景剖析092026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf10AI一周事件 · 2026-06-03 至 2026-06-09