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

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

你可能感兴趣的:(vue,elementui)