examples/main.js

@@ -5,8 +5,6 @@ import App from '../src/App.vue'
 //基于element组件封装，引入element组件库
 import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import '../src/styles/element-variables.scss'//element 组件样式文件
-
 Vue.use(Input);
 Vue.use(Select);
 Vue.use(OptionGroup);

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,12 @@ export default {
         if (!Array.isArray(newVal)) {
           throw new Error("agDatePicker date请传入数组");
         }
+        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 +145,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 +165,32 @@ export default {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-  .ag-datePicker {
+  .el-input__icon.el-range__close-icon {
-    color: red;
+    position: absolute;
+    font-size: 12px;
+    width: 14px;
+    height: 14px;
+    line-height: 14px;
+    right: 5px;
     &:hover {
-      .ag-el-icon-prefix-hide {
+      border-radius: 50%;
-        display: none;
+      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

@@ -1,25 +1,20 @@
 <template>
   <div>
-    <el-button type="success" @click="abb = true">点击打开 Dialog</el-button>
+    <!-- <el-button type="text" @click="abb = true">点击打开 Dialog</el-button> -->
-    <ag-dialog :visible.sync="abb"> </ag-dialog>
+    <agTabs ref="ref_Pedestal" v-model="value" size="mini" :options="options">
-    <ag-datePicker :value="values"> </ag-datePicker>
+      <!-- <span slot="footer">房价大降分类数据</span> -->
-    <ag-input :visible.sync="abb"> </ag-input>
+    </agTabs>
-    <ag-select :visible.sync="abb" :options="a_options" v-model="value">
+    <!-- <div class="div"><span>888</span></div> -->
-    </ag-select>
   </div>
 </template>
 
 <script>
-import agDialog from "../packages/agDialog/src/index.vue";
+import agTabs from "../packages/agDatePicker/src/index.vue";
-import agDatePicker from "../packages/agDatePicker/src/index.vue";
-import agInput from "../packages/agInput/src/index.vue";
-import agSelect from "../packages/agSelect/src/index.vue";
 export default {
-  components: { agDialog, agDatePicker, agInput, agSelect },
+  components: { agTabs },
   data() {
     return {
-      value: "",
+      value: [],
-      values: [],
       options: [
         {
           label: "热门城市",
@@ -127,7 +122,7 @@ export default {
       ],
       abb: false,
       innerVisible: false,
-      a_options: [
+      options: [
         {
           value: "选项1",
           label: "黄金糕",
@@ -172,4 +167,5 @@ body {
     width: 50px;
   }
 }
+
 </style>

src/styles/element-variables.scss

@@ -1,31 +0,0 @@
-/**
-* I think element-ui's default theme color is too light for long-term use.
-* So I modified the default color and you can modify it to your liking.
-**/
-
-/* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #ffba00;
-$--color-danger: #ff4949;
-// $--color-info: #1E1E1E;
-
-$--button-font-weight: 400;
-
-// $--color-text-regular: #1f2d3d;
-
-$--border-color-light: #dfe4ed;
-$--border-color-lighter: #e6ebf5;
-
-$--table-border: 1px solid #dfe6ec;
-
-/* icon font path, required */
-$--font-path: "~element-ui/lib/theme-chalk/fonts";
-
-@import "~element-ui/packages/theme-chalk/src/index";
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-  theme: $--color-primary;
-}