以下是el-date-picker 自定义后置图标
时间: 2023-11-21 11:58:36 浏览: 163
以下是el-date-picker自定义后置图标的方法:
```html
<el-form-item>
<el-date-picker
v-model="dateRange"
suffix-icon="your-icon-class"
size="small"
style="width: 240px;margin-left:22px;"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
```
其中,`suffix-icon`属性可以设置自定义的后置图标的类名,例如`your-icon-class`。在样式中,可以通过设置该类名的样式来实现自定义后置图标的效果。例如:
```css
.your-icon-class {
background-image: url('your-icon-url');
background-repeat: no-repeat;
background-size: contain;
}
```
其中,`your-icon-url`为自定义图标的URL地址。如果需要在mounted钩子函数中动态修改后置图标,可以使用以下代码:
```javascript
mounted() {
document.getElementsByClassName('el-input__suffix')[0].classList.remove('el-icon-date');
document.getElementsByClassName('el-input__suffix')[0].classList.add('your-icon-class');
}
```
其中,`el-input__suffix`为后置图标的类名,`your-icon-class`为自定义图标的类名。这段代码会将后置图标的默认样式`el-icon-date`替换为自定义图标的样式`your-icon-class`。
阅读全文