element plus input 设置clearable focus时闪烁问题

supming1

已于 2023-04-18 19:05:31 修改

阅读量1.8k

点赞数 4

分类专栏： vue 文章标签： elementui

于 2023-04-11 08:53:23 首次发布

本文链接：https://blog.csdn.net/supming1/article/details/130074905

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

当ElementPlus的input组件设置为clearable并聚焦时，由于清除按钮的v-if控制显示，输入框宽度会发生变化，特别是在行宽临界点可能导致闪烁。为解决此问题，可以将清除按钮设置为absolute定位，固定其位置，避免影响输入框的宽度，从而消除闪烁现象。

摘要由CSDN通过智能技术生成

element plus input 设置了clearable， focus的时候，输入框宽度会变成长，这是由于右侧的关闭按钮是靠v-if进行显示和隐藏的，其会把宽度撑开。一般情况下没有问题，但当长度刚好在换行临界点的时候，就会出闪烁问题。这是由于focus的时候变宽，导致换行，同时换行之后，又重新变短，变短之后，又重新缩回上一行，从而形成闪烁。

解决方法的话，可以通过下面代码，设置按钮为absolute

:deep(.el-input__wrapper) {
    position: relative;

    .el-input__inner {
      padding-right: 18px;
    }
    .el-input__suffix {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
    }
  }