el-input图标
时间: 2023-10-07 10:13:34 浏览: 77
el-input组件可以通过suffix-icon属性或prefix-icon属性来添加图标。例如,在代码引用中,suffix-icon="el-icon-date"表示在el-input组件的末尾添加了一个日期图标,而prefix-icon="el-icon-search"表示在el-input组件的开头添加了一个搜索图标。同样,在引用和引用中,也使用了类似的方式来添加图标。
相关问题
el-input图标左侧顶格
你可以使用 `prefix-icon` 属性和 CSS 来将 `el-input` 组件的图标左侧顶格。
首先,设置 `prefix-icon` 属性为你想要的图标,例如:
```html
<el-input prefix-icon="el-icon-search"></el-input>
```
然后,使用 CSS 来调整图标的位置:
```css
.el-input__prefix {
margin-left: 0;
}
```
这样就能将图标左侧顶格显示在 `el-input` 组件中了。
在el-input里加图标
在el-input中加入图标可以通过suffix-icon和prefix-icon属性或者slot来实现。suffix-icon和prefix-icon属性可以在input组件的首部和尾部增加显示图标,例如suffix-icon="el-icon-date"对应日期图标,prefix-icon="el-icon-search"对应搜索图标。而通过slot可以自定义图标的位置和样式,例如在搜索框头部加入图标可以使用以下代码:
```
<el-input v-model="queryParams.detailQuery" placeholder="可查询SAP物料号/产品名称" clearable size="small" class="search-input1" @keyup.enter.native="handleQuery" suffix-icon="el-icon-search">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
```
其中,i标签的class属性为"el-input__icon el-icon-search",可以根据需要更改。同时,也可以通过CSS样式来调整图标的位置和样式。