el-date-picker删除icon图标
时间: 2023-10-21 21:25:20 浏览: 85
根据提供的引用信息,el-date-picker删除icon图标是通过添加划入和划出的事件来实现的。通过判断时间日期选择是否存在值,返回一个布尔值,并根据该布尔值来改变display样式来显示或隐藏右侧的icon图标和清除选择图标,以达到删除icon图标的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [el-date-picker设置右侧显示图标,自定义右侧图标,时间选择后:滑入显示清除icon,隐藏右侧自定义图标](https://blog.csdn.net/qq_52140056/article/details/125273383)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关问题
el-date-picker添加icon
要为el-date-picker添加图标,您可以按照以下步骤进行操作:
1. 首先,将Element UI的日期选择器组件引入到您的代码中:
```html
<el-date-picker class="wp-date-range" v-model="updateDateRange" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
```
2. 接下来,您可以使用CSS隐藏左侧的图标。您可以在样式表(style标签)中添加以下代码:
```css
::v-deep .el-date-editor .el-input__icon:nth-child(1) {
display: none;
}
```
3. 最后,在mounted生命周期函数中添加以下代码:
```javascript
mounted() {
let ElRangeCloseIcon = document.getElementsByClassName('el-range__close-icon')[0];
ElRangeCloseIcon.innerHTML = '<i class="el-icon-time"></i>';
}
```
通过这些步骤,您将成功为el-date-picker添加图标。
el-date-picker图标
对于el-date-picker组件,你可以通过设置属性`prefix-icon`和`clear-icon`来自定义图标。
`prefix-icon`属性用于设置日期选择器的前缀图标,你可以传入图标的类名或者使用Element UI提供的图标库。例如,你可以使用`<i class="el-icon-date"></i>`来设置一个日历图标作为前缀图标。
`clear-icon`属性用于设置清除按钮的图标,同样可以传入图标的类名或者使用Element UI提供的图标库。例如,你可以使用`<i class="el-icon-circle-close"></i>`来设置一个关闭图标作为清除按钮的图标。
以下是一个示例代码:
```html
<el-date-picker
prefix-icon="el-icon-date"
clear-icon="el-icon-circle-close"
></el-date-picker>
```
这样就可以自定义el-date-picker组件的图标了。你可以根据自己的需求选择合适的图标。