<div class="deep-input">
<el-input
v-model="formInline.fileName"
class="input-class"
style="min-width: 280px"
placeholder="请输入文件/任务名称按回车搜素"
>
<template #append>
<el-button @click="searchMusic">
<el-icon>
<Search />
</el-icon>
</el-button>
</template>
</el-input>
</div>
css代码,⚠️不要加scoped
<style >
.deep-input {
border: 1px solid #409eff;
border-radius: 30px;
width: 300px;
}
.input-class {
display: flex;
justify-content: center;
align-items: center;
}
.input-class .el-input-group__prepend {
border-radius: 30px;
border: 0;
box-shadow: 0 0 0 0px;
}
.input-class .el-input-group__prepend {
border-radius: 30px;
border: 0;
box-shadow: 0 0 0 0px;
}
.input-class .el-input__inner {
text-align: center;
}
.input-class .el-input__wrapper {
border-radius: 30px;
border: 0;
box-shadow: 0 0 0 0px;
}
.input-class .el-input-group__append {
border-radius: 30px;
border: 0;
box-shadow: 0 0 0 0px;
}
</style>
效果图