项目场景:
设计要求将起始日期和结束日期的“小日历”图标改到右侧,并且选择日期后,清除输入的“x”图标也在右侧显示。
解决方案:
表单某一项,需要输入起始日期和结束日期提交给后台筛选数据,首先放html代码:
...
<el-form-item label="录入日期:" prop="timeRange">
<el-date-picker
v-model="searchForm.timeRange"
class="cus-date"
type="daterange"
:clearable="true"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00','23:59:59']"
></el-date-picker>
</el-form-item>
...
样式修改,日历小图标用的ui给的图,如果用组件自带的图标,可以参考调试content
属性
scss代码:
.cus-date{
position:relative;
width:fit-content;
/*将日期组件自带的小日历图标隐藏*/
.el-range__icon{
display:none;
}
/*使用“x”图标位置的after来放日历按钮*/
.el-range__close-icon{
position:absolute;
right:34px;
top:10%;
&&::after{
width:19px;
height:18px;
background:url('../../assets/pictures/cus_date_icon.png') center/100% 100% no-repeat;
}
}
/*当鼠标移入时,隐藏自定义“小日历”*/
.el-icon-circle-close{
&::after{
width:0;
height:0;
}
}
}
原理:
当输入框有内容时,鼠标移到输入框,“x”图标会显示,并通过.el-icon-circle-close
这个类给<i></i>
添加::before伪类,即“x”图标。
而这个“x”对应的<i></i>
标签::after的content:""
一直不变,如果使用这个标签的::after内容来定位,方便将“小日历”和“x”原地切换显示。
那么当.el-icon-circle-close
出现在<i></i>
上时,将::after的宽高改为0;当.el-icon-circle-close
消失时::after采用定义的宽高,就实现“x”和“小日历”图标的来回切换。
补充:
踩坑记录:尝试给组件绑定id来调整样式,但是发现,id无法添加在el-date-picker中