Vue | Element UI Plus 实现椭圆形搜索框

实现如图样式：

代码如下，建议直接封装成.vue文件使用。

<template>

<el-input

  v-model="searchInput"

  placeholder="Type something"

  clearable

>

<template #suffix>

<div class="circular-icon-container">

  <Search class="icon-search" style="width: 1em; height: 1em" />

</div>

</template>

</el-input>

</template> <script setup lang="ts"> import { ref } from 'vue' const searchInput = ref('') </script> <style scoped> .el-input { width: 600px; height: 44px; align-self: center; display: flex; } :deep(.el-input__wrapper) { margin-left: 5px; font-size: 15px; background-color: rgba(255, 255, 255, 0);/*覆盖原背景颜色，设置成透明 */ border-radius: 120px; box-shadow: 2 2 2 2px; } :deep(.el-input__inner) { margin-left: 10px; } .circular-icon-container { display: inline-block; width: 24px; /* 调整此值以适应你的图标大小 */ height: 24px; line-height: 24px; border-radius: 50%; cursor: pointer; transition: box-shadow 0.3s ease; &:hover { box-shadow:0 0 0 4px rgba(0, 0, 0, 0.1); } .icon-search { margin-top: 4px; } } </style>

** 代码为Vue3** 组合式API风格