Compare commits

..

No commits in common. "ecc128e51a9aa2da2d7438f6f5955c1dc917f44c" and "e07b7df8da426ff55ea68ec8211b9d28e60c632c" have entirely different histories.

2 changed files with 29 additions and 52 deletions

View File

@ -1,12 +1,10 @@
<template>
<el-date-picker
:style="{ width }"
:prefix-icon="iconClass"
class="ag-date-picker"
v-model="dateArr"
v-bind="attrs"
v-on="inputListeners"
@mouseenter.native="mousetrue = true"
@mouseleave.native="mousetrue = false"
/>
</template>
@ -28,8 +26,6 @@ export default {
return {
width: "160px",
dateArr: [null, null],
date_picker: false,
mousetrue: true,
};
},
computed: {
@ -42,7 +38,7 @@ export default {
"start-placeholder": "开始日期",
"end-placeholder": "结束日期",
"range-separator": "-",
"prefix-icon": " ag-el-icon-prefix",
"picker-options": {
disabledDate(time) {
return (
@ -125,11 +121,6 @@ export default {
},
});
},
iconClass() {
return this.date_picker && this.mousetrue
? "ag-icon-prefix-hide"
: "ag-icon-prefix-show";
},
},
watch: {
value: {
@ -137,6 +128,14 @@ export default {
if (!Array.isArray(newVal)) {
throw new Error("agDatePicker date请传入数组");
}
console.log(newVal,'newVal');
newVal.length > 0 &&
newVal.some(
(item) => item !== null && item !== undefined && item !== ""
)
? (this.width = "205px")
: (this.width = "160px");
let [date1, date2] = newVal;
if (!this.dateArr) {
this.dateArr = [date1 || "", date2 || ""];
@ -148,40 +147,14 @@ export default {
immediate: true,
deep: true,
},
dateArr: {
handler(newVal) {
if (
newVal &&
newVal.length > 0 &&
newVal.some(
(item) => item !== null && item !== undefined && item !== ""
)
) {
this.width = "205px";
this.date_picker = true;
} else {
this.width = "160px";
this.date_picker = false;
}
},
immediate: true,
deep: true,
},
},
methods: {
mouseleave() {
console.log(999);
},
mousemove() {
console.log(888);
},
},
methods: {},
};
</script>
<style lang="scss" scoped>
::v-deep {
[class*="ag-icon-"] {
[class*="el-icon-"] {
font-family: element-icons !important;
speak: none;
font-style: normal;
@ -194,33 +167,35 @@ export default {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ag-datePicker {
color: red;
.el-range-editor.is-active:hover{
border: #8a1818;
}
.el-input__icon.el-range__close-icon {
position: absolute;
font-size: 12px;
width: 14px;
height: 14px;
line-height: 14px;
right: 5px;
&:hover {
.ag-el-icon-prefix-hide {
display: none;
border-radius: 50%;
color: #c0c4cc;
background: #ecedee;
}
}
}
// .el-input__icon,
// .el-range__close-icon {
// }
.ag-icon-prefix-show {
.ag-el-icon-prefix {
width: 16px;
font-size: 16px;
margin-left: -5px;
line-height: 38px;
position: absolute;
right: 8px;
top: 1px;
top: 0;
&:before {
content: "\e78e";
}
}
.ag-icon-prefix-hide {
display: none;
}
.el-icon-circle-close:before {
content: "\e6db";

View File

@ -6,6 +6,8 @@
<ag-input :visible.sync="abb"> </ag-input>
<ag-select :visible.sync="abb" :options="a_options" v-model="value">
</ag-select>
<div class="div"><span>888</span></div>
</div>
</template>