el-date-picker的icon放右边显示

废话少说，先上图

image.png

el-date-picker的icon默认是居左显示，坑就坑在，elment竟然没有提供放居右显示的api。
但是，ui的设计又需要居右显示。没办法，只好css+js各显神通的去实现这个功能。闲言少叙，我直接上代码

css方式：

// dom层：

      
      


// css层：
.el-date-editor {
    .el-input__prefix {
       position: absolute;
        left: 282px; // left根据实际情况定值
        top: 0;
     }
     input {
       padding-left: 15px;
     }
}

效果：

image.png

效果很完美，但是用css方式不能与clearable联动使用，否则会出现css重叠的效果。如下图：

image.png

要解决这个问题需要使用js方式。

js方式：

// dom层

   

       
        
        
    


// 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%);
    }
 }

默认显示dateicon，当鼠标经过时，dateicon消失，会显示el-date-picker自带的clearicon

image.png

image.png