el-date-picker 图标移动到右侧。有数据时悬浮显示x,没数据或者不悬浮时显示日期图标
Posted on 2021-10-29 13:51 魏什么呀 阅读(1467) 评论(0) 收藏 举报有数据时候
有数据悬浮时
没数据时候悬浮不悬浮
样式:
.date-picker-icon {
width: 100%;
.el-input__inner {
padding-left: 15px;
padding-right: 30px;
}
.el-input__prefix {
color: blue;
left: initial;
right: 5px;
}
&.date-close {
.el-icon-date {
display: none;
}
}
}
页面:
<el-date-picker :class="[ 'date-picker-icon', dateVisableArray=='true' ? 'date-close' : '' ]" v-model="preparationTime" type="date" :placeholder="'请选择'" prefix-icon="el-icon-date" @mouseover.native="setDateIcon" @mouseleave.native="dateVisableArray='false'" />
setDateIcon() {
if (this.preparationTime == '' || this.preparationTime == null) {
return false;
}
this.dateVisableArray = 'true';
},
浙公网安备 33010602011771号