el-input修改图标到input框左上方 代码
时间: 2023-07-15 19:10:17 浏览: 50
你可以通过使用 `prefix` 属性来将图标放置在输入框的左侧。以下是一个示例代码:
```html
<el-input placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
```
这将在输入框左侧添加一个搜索图标。你可以将 `prefix-icon` 属性设置为任何你想要的图标类名。如果你想要更改图标的大小,可以使用 `prefix-icon-class` 属性。
如果你想要将图标放置在输入框上方,你可以使用相同的方法,并将 `prefix` 属性设置为一个包含图标的元素。例如:
```html
<el-input placeholder="请输入内容">
<template slot="prefix">
<i class="el-icon-search"></i>
</template>
</el-input>
```
这将在输入框上方添加一个搜索图标。你可以使用 `slot` 属性将元素插入到输入框的特定位置。
相关问题
el-input修改图标位置
如果你想要修改 `el-input` 组件中的图标位置,可以使用 `append` 和 `prepend` 属性设置。这两个属性接受一个 HTML 元素作为参数,可以将这个元素放置在输入框的左右两侧。
例如,如果你想将 `el-input` 组件中的清空图标(默认在右侧)移到左侧,可以这样做:
```html
<el-input
v-model="inputValue"
clearable
:prepend="clearIcon"
></el-input>
```
```javascript
data() {
return {
inputValue: '',
clearIcon: '<i class="el-icon-circle-close"></i>'
}
}
```
这里我们将清空图标作为一个 HTML 字符串保存到 `clearIcon` 变量中,并将它赋给 `el-input` 组件的 `prepend` 属性,这样清空图标就会出现在输入框左侧。
同样的,如果你想将 `el-input` 组件中的搜索图标(默认在左侧)移到右侧,可以这样做:
```html
<el-input
v-model="inputValue"
:append="searchIcon"
></el-input>
```
```javascript
data() {
return {
inputValue: '',
searchIcon: '<i class="el-icon-search"></i>'
}
}
```
这里我们将搜索图标作为一个 HTML 字符串保存到 `searchIcon` 变量中,并将它赋给 `el-input` 组件的 `append` 属性,这样搜索图标就会出现在输入框右侧。
在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样式来调整图标的位置和样式。