qiaopengfei

packages/agDatePicker/src/index.vue

@@ -1,5 +1,6 @@
 <template>
   <el-date-picker
+    :style="{ width }"
     class="ag-date-picker"
     v-model="dateArr"
     v-bind="attrs"
@@ -23,6 +24,7 @@ export default {
   },
   data() {
     return {
+      width: "160px",
       dateArr: [null, null],
     };
   },
@@ -36,6 +38,7 @@ export default {
         "start-placeholder": "开始日期",
         "end-placeholder": "结束日期",
         "range-separator": "-",
+        "prefix-icon": " ag-el-icon-prefix",
         "picker-options": {
           disabledDate(time) {
             return (
@@ -125,7 +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 || ""];
@@ -142,4 +150,50 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+::v-deep {
+  [class*="el-icon-"] {
+    font-family: element-icons !important;
+    speak: none;
+    font-style: normal;
+    font-weight: 400;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    vertical-align: baseline;
+    display: inline-block;
+    -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;
+    &:hover {
+      border-radius: 50%;
+      color: #c0c4cc;
+      background: #ecedee;
+    }
+  }
+
+  .ag-el-icon-prefix {
+    width: 16px;
+    font-size: 16px;
+    margin-left: -5px;
+    line-height: 38px;
+    position: absolute;
+    right: 8px;
+    top: 0;
+    &:before {
+      content: "\e78e";
+    }
+  }
+
+  .el-icon-circle-close:before {
+    content: "\e6db";
+  }
+}
+</style>

packages/agInput/src/index.vue

@@ -69,6 +69,29 @@ export default {
 </script>
   
   <style lang="scss" scoped>
-@import url("~@/static/index.scss");
+@import "../../../src/static/index.scss";
+::v-deep {
+  .el-input__suffix {
+    @include sjf;
+    .el-input__suffix-inner {
+      .el-input__icon {
+        font-size: 12px;
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        @include cj1;
+        right: 5px;
+        &:hover {
+          border-radius: 50%;
+          color: #c0c4cc;
+          background: #ecedee;
+        }
+      }
+    }
+  }
+  .el-icon-circle-close:before {
+    content: "\e6db";
+  }
+}
 </style>
   

packages/agSelect/src/index.vue

@@ -75,4 +75,29 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+::v-deep {
+  .el-input__inner {
+    width: none;
+  }
+  .el-input__suffix {
+    .el-input__suffix-inner {
+      .el-input__icon {
+        font-size: 12px;
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        right: 5px;
+        &:hover {
+          border-radius: 50%;
+          color: #c0c4cc;
+          background: #ecedee;
+        }
+      }
+    }
+  }
+  .el-icon-circle-close:before {
+    content: "\e6db";
+  }
+}
+</style>

src/App.vue

@@ -1,20 +1,20 @@
 <template>
   <div>
-    <el-button type="text" @click="abb = true">点击打开 Dialog</el-button>
+    <!-- <el-button type="text" @click="abb = true">点击打开 Dialog</el-button> -->
-    <agTabs ref="ref_Pedestal" :visible.sync="abb">
+    <agTabs ref="ref_Pedestal" v-model="value" size="mini" :options="options">
       <!-- <span slot="footer">房价大降分类数据</span> -->
     </agTabs>
-    <div class="div"><span>888</span></div>
+    <!-- <div class="div"><span>888</span></div> -->
   </div>
 </template>
 
 <script>
-import agTabs from "../packages/agDialog/src/index.vue";
+import agTabs from "../packages/agDatePicker/src/index.vue";
 export default {
   components: { agTabs },
   data() {
     return {
-      value: "",
+      value: [],
       options: [
         {
           label: "热门城市",
@@ -122,28 +122,28 @@ export default {
       ],
       abb: false,
       innerVisible: false,
-      // options: [
+      options: [
-      //   {
+        {
-      //     value: "选项1",
+          value: "选项1",
-      //     label: "黄金糕",
+          label: "黄金糕",
-      //   },
+        },
-      //   {
+        {
-      //     value: "选项2",
+          value: "选项2",
-      //     label: "双皮奶",
+          label: "双皮奶",
-      //   },
+        },
-      //   {
+        {
-      //     value: "选项3",
+          value: "选项3",
-      //     label: "蚵仔煎",
+          label: "蚵仔煎",
-      //   },
+        },
-      //   {
+        {
-      //     value: "选项4",
+          value: "选项4",
-      //     label: "龙须面",
+          label: "龙须面",
-      //   },
+        },
-      //   {
+        {
-      //     value: "选项5",
+          value: "选项5",
-      //     label: "北京烤鸭",
+          label: "北京烤鸭",
-      //   },
+        },
-      // ],
+      ],
     };
   },
   methods: {
@@ -158,7 +158,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../src/static/index.scss';
+// @import '../src/static/index.scss';
 body {
   background: #918d8d;
 }
@@ -168,4 +168,5 @@ body {
     width: 50px;
   }
 }
+
 </style>

src/static/index.scss

@@ -1,29 +1,3 @@
-// 当超过宽度时，显示省略号
-@mixin ell() {
-    overflow: hidden;
-    -ms-text-overflow: ellipsis;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: inline-block;
-}
-
-// 当超过n行时，显示省略号
-@mixin elln($n) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: $n;
-}
-
-// 清除浮动
-.clearfix {
-    & after {
-        display: table;
-        clear: both;
-        content: "";
-    }
-}
 
 @mixin cj1 {
     position: absolute;