默认效果图
期待结果
实现过程
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'">
</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 深度监听一下
