Compare commits

...

2 Commits

Author SHA1 Message Date
qiaopengfei ecc128e51a Merge pull request '租金按' (#6) from qiaopengfei into master
Reviewed-on: #6
2024-07-08 17:19:39 +08:00
qiaopengfei b6cd1c207b 租金按 2024-07-08 17:19:16 +08:00
2 changed files with 52 additions and 29 deletions

View File

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

View File

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