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

原创已于 2023-04-18 19:05:31 修改 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

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

vue 专栏收录该内容

27 篇文章

订阅专栏

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

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%);
    }
  }