el-date-picker设置右侧显示图标，时间选择后：滑入显示清除icon，显示清除图标

默认效果图

期待结果

实现过程

html

<el-form-item label="日期：" class="date_box">

<el-date-picker

v-model="queryParams.startTime"

type="date"

prefix-icon="''"

:clearable="true"

align="right"

placeholder="请选择日期"

value-format="yyyy/MM/dd"

@mouseover.native="setTimeIcon"

扫描二维码关注公众号，回复： 15106814 查看本文章

@mouseleave.native="iconVisable='false'">

</el-date-picker>

<i :class="['el-icon-date',iconVisable=='false'?'data_icon':'data_display']"></i>

</el-form-item>

prefix-icon="''" 这里放了一个空字符，让默认图标不显示

自定义数据

data() {

return {

iconVisable:'false',

queryParams: {

pageNum: 1,

pageSize: 1,

startTime: ''

},

},

方法

methods: {

setTimeIcon(){

if (this.queryParams.startTime == '' || this.queryParams.startTime == null) {

return false;

}

this.iconVisable='true';

},

}

这里给节点添加了滑入和滑出的事件，判断这个时间日期选择是否存在值，来返回一个布尔值，改变display样式来控制图标显示和隐藏。

css

.date_box {

position: relative;

width: fit-content;

}

.data_icon {

display: block;

position: absolute;

top: 50%;

right: 8px;

z-index: 9;

color: #c0c4cc;

font-size: 14px;

transform: translateY(-50%);

}

.data_display{

display: none;

}

样式如果不生效可以加 ::v-deep 深度监听一下