修改elementUI日期选择器源码，将Element单个,多个日期选择器图标放右侧, 与清除图标交替出现

本文链接：https://blog.csdn.net/weixin_55977434/article/details/127609816

项目区分环境的需要注意自己的打包环境里面的源码都需要修改。

需求:

将饿了么组件的单个日期选择器的日期小图标放到右侧,未选中数据时显示图标,选中数据后鼠标悬浮显示清除按钮,离开显示日期图标.

代码调整:

/**********css：全局配置样式***********/

.el-date-editor{
    .el-input__inner{
        padding-left: 10px;
    }
    .el-input__prefix{
        left: initial;
        right: 5px;
    }
}

/********** js源码调整:**********/
/**********node_modules\element-ui\lib\date-picker.js***********/

将
_c("i", {
        staticClass: "el-input__icon",
        class: _vm.triggerClass,
        attrs: { slot: "prefix" },
        on: { click: _vm.handleFocus },
        slot: "prefix"
}),

替换为：

_c("i", {
        staticClass: "el-input__icon",
        class: [_vm.showClose ? "" : "" + _vm.triggerClass],
        attrs: { slot: "prefix" },
        on: { click: _vm.handleFocus },
        slot: "prefix"
}),

tips:以上代码针对的是单日期控件

需求:

日期范围选择器的日期小图标放到右侧,未选中数据时显示图标,选中数据后鼠标悬浮显示清除按钮,离开显示日期图标.

/**********css：全局配置样式***********/

.el-date-editor--daterange {

    .el-input__icon {

      position: absolute;

      right: 10px;

    }

    .el-input__icon.el-range__close-icon {

      position: absolute;

      right: 10px;

      z-index: 999;

    }

  }

/********** js源码调整：***********/
/**********node_modules\element-ui\lib\date-picker.js***********/     

将 

 _c("i", {

            class: ["el-input__icon", "el-range__icon", _vm.triggerClass]

          }),



替换为:



 _c("i", {

            class: ["el-input__icon", "el-range__icon",_vm.showClose ? "" : "" + _vm.triggerClass],

          }),

tips:以上代码针对的是日期范围控件