租金按

Reviewed-on: #5

examples/main.js

@@ -5,6 +5,8 @@ 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,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,12 +137,6 @@ 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 || ""];
@@ -145,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;
@@ -165,32 +194,33 @@ export default {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-  .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

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

src/styles/element-variables.scss

@@ -0,0 +1,31 @@
+/**
+* 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;
+}