packages/agDatePicker/src/index.vue

@@ -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";

src/App.vue

@@ -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>