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”

@mouseleave.native=”iconVisable=’false‘”&gt;

</el–date–picker&gt;

<i :class=”[‘el-icon-date‘,iconVisable==’false’?’data_icon’:’data_display‘]”&gt;</i&gt;

</el-form–item&gt;

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 深度监听一下