租金按

This commit is contained in:
qiaopengfei 2024-07-08 17:19:16 +08:00
parent e07b7df8da
commit b6cd1c207b
2 changed files with 52 additions and 29 deletions

View File

@ -1,10 +1,12 @@
<template>
<el-date-picker
:style="{ width }"
class="ag-date-picker"
:prefix-icon="iconClass"
v-model="dateArr"
v-bind="attrs"
v-on="inputListeners"
@mouseenter.native="mousetrue = true"
@mouseleave.native="mousetrue = false"
/>
</template>
@ -26,6 +28,8 @@ export default {
return {
width: "160px",
dateArr: [null, null],
date_picker: false,
mousetrue: true,
};
},
computed: {
@ -38,7 +42,7 @@ export default {
"start-placeholder": "开始日期",
"end-placeholder": "结束日期",
"range-separator": "-",
"prefix-icon": " ag-el-icon-prefix",
"picker-options": {
disabledDate(time) {
return (
@ -121,6 +125,11 @@ export default {
},
});
},
iconClass() {
return this.date_picker && this.mousetrue
? "ag-icon-prefix-hide"
: "ag-icon-prefix-show";
},
},
watch: {
value: {
@ -128,14 +137,6 @@ 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 || ""];
@ -147,14 +148,40 @@ 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*="el-icon-"] {
[class*="ag-icon-"] {
font-family: element-icons !important;
speak: none;
font-style: normal;
@ -167,35 +194,33 @@ export default {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.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;
.ag-datePicker {
color: red;
&:hover {
border-radius: 50%;
color: #c0c4cc;
background: #ecedee;
.ag-el-icon-prefix-hide {
display: none;
}
}
}
// .el-input__icon,
// .el-range__close-icon {
// }
.ag-el-icon-prefix {
.ag-icon-prefix-show {
width: 16px;
font-size: 16px;
margin-left: -5px;
line-height: 38px;
position: absolute;
right: 8px;
top: 0;
top: 1px;
&:before {
content: "\e78e";
}
}
.ag-icon-prefix-hide {
display: none;
}
.el-icon-circle-close:before {
content: "\e6db";

View File

@ -6,8 +6,6 @@
<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>