Element UI 搜索面板宽度聚焦扩展：实现向右延伸效果

在使用 Element UI 的搜索面板时，我们可能需要实现一种交互效果：当输入框获得焦点时，搜索面板的宽度向右延伸，以便提供更宽阔的输入区域。本文将提供实现该效果的 CSS 样式代码。

原有样式

.search-panel {
    padding-left: 120px;
    display: flex;
    position: relative;
    :deep(.el-input__wrapper) {
        box-shadow: none;
    }
    .el-button {
        position: absolute;
        right: 0;
        border: none;
        background: none;
        color: var(--el-color-primary);
    }
}

扩展样式

为了实现宽度扩展效果，我们需要在原有样式的基础上添加以下 CSS 样式：

.search-panel .el-input__inner:focus {
  width: 300px;
  transition: width 0.3s ease;
}

.search-panel .el-input__suffix {
  right: 30px;
  transition: right 0.3s ease;
}

解释

.search-panel .el-input__inner:focus：选中搜索面板的输入框，当获得焦点时（ :focus）应用以下样式。
width: 300px：设置输入框的宽度为 300px。
transition: width 0.3s ease：添加一个过渡动画，使宽度变化平滑，时间为 0.3 秒，过渡函数为 ease。
.search-panel .el-input__suffix：选中搜索面板的输入框后缀（例如清除按钮）元素。
right: 30px：设置后缀元素的右偏移量为 30px，以确保后缀元素在扩展宽度后仍保持在输入框右侧。
transition: right 0.3s ease：添加一个过渡动画，使后缀元素的右偏移量变化平滑，时间为 0.3 秒，过渡函数为 ease。

注意：以上样式需要在原有样式基础上添加，不能替换原有样式。

通过添加以上 CSS 样式，就能实现搜索面板宽度聚焦扩展的效果。当用户点击输入框获得焦点时，搜索面板会向右延伸，并伴随平滑的动画效果，提升用户体验。