Default rendering
look forward to the result
Implementation process
html
<el-form-item label="日期：" class="date_box">
<el-date-picker
v-model="queryParams.startTime"
type="date"
prefix-icon="''"
:clearable="true"
align="right"
placeholder="Please select a date"
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="''" put an empty character here, so that the default icon is not displayed
custom data
data() {
return {
iconVisable:'false',
queryParams: {
pageNum: 1,
pageSize: 1,
startTime: ''
},
},
method
methods: {
setTimeIcon(){
if (this.queryParams.startTime == '' || this.queryParams.startTime == null) {
return false;
}
this.iconVisable='true';
},
}
Here, slide-in and slide-out events are added to the node to determine whether there is a value for this time and date selection, to return a Boolean value, and to change the display style to control the display and hiding of icons.
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;
}
If the style does not take effect, you can add ::v-deep to monitor deeply