packages/agDatePicker/src/index.vue

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

src/App.vue

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