廢話少說(shuō)，先上圖
image.png
el-date-picker的icon默認(rèn)是居左顯示路翻，坑就坑在，elment竟然沒(méi)有提供放居右顯示的api茄靠。
但是茂契，ui的設(shè)計(jì)又需要居右顯示。沒(méi)辦法嘹黔，只好css+js各顯神通的去實(shí)現(xiàn)這個(gè)功能账嚎。閑言少敘，我直接上代碼
css方式：
// dom層：
<el-form-item label="時(shí)間：">
<el-date-picker type="date"
suffix-icon="el-icon-date"
placeholder="選擇日期"
v-model="time"
class="datepicker"
style="width: 100%;">
</el-date-picker>
</el-form-item>
// css層：
.el-date-editor {
.el-input__prefix {
position: absolute;
left: 282px; // left根據(jù)實(shí)際情況定值
top: 0;
}
input {
padding-left: 15px;
}
}
image.png
image.png
要解決這個(gè)問(wèn)題需要使用js方式喂江。
js方式：
// dom層
<el-form-item label="實(shí)際到賬時(shí)間：">
<div class="date-box" style="width: 100%;"
@mouseover="onMouseOver()" @mouseleave="onMouseleave()">
<el-date-picker type="date"
prefix-icon="''"
placeholder="選擇日期"
v-model="comfirmForm.name"
class="datepicker"
style="width: 100%;">
</el-date-picker>
<i class="el-icon-date" ref="iconDate"></i>
</div>
</el-form-item>
// js 層
onMouseOver() {
this.$refs.iconDate.style.display = 'none';
},
onMouseleave() {
this.$refs.iconDate.style.display = 'block';
},
// css層：
.datepicker {
/deep/.el-input__inner {
padding-left: 15px;
}
}
.date-box {
position: relative;
width: 100%;
width: fit-content;
.el-icon-date {
position: absolute;
top: 50%;
right: 10px;
z-index: 9;
color: #c0c4cc;
font-size: 14px;
transform: translateY(-50%);
}
/deep/ .el-range__close-icon {
position: absolute;
right: 34px;
top: 54%;
transform: translateY(-50%);
}
}
默認(rèn)顯示dateicon召锈，當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，dateicon消失获询，會(huì)顯示el-date-picker自帶的clearicon
image.png
image.png
