项目区分环境的需要注意自己的打包环境里面的源码都需要修改。
需求:
将饿了么组件的单个日期选择器的日期小图标放到右侧,未选中数据时显示图标,选中数据后鼠标悬浮显示清除按钮,离开显示日期图标.
代码调整:
/**********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:以上代码针对的是日期范围控件