packages/agDatePicker/src/index.vue

@@ -1,6 +1,5 @@
 <template>
   <el-date-picker
-    :style="{ width }"
     class="ag-date-picker"
     v-model="dateArr"
     v-bind="attrs"
@@ -24,7 +23,6 @@ export default {
   },
   data() {
     return {
-      width: "160px",
       dateArr: [null, null],
     };
   },
@@ -38,7 +36,6 @@ export default {
         "start-placeholder": "开始日期",
         "end-placeholder": "结束日期",
         "range-separator": "-",
-        "prefix-icon": " ag-el-icon-prefix",
         "picker-options": {
           disabledDate(time) {
             return (
@@ -128,12 +125,7 @@ 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 || ""];
@@ -150,50 +142,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-::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,29 +69,6 @@ export default {
 </script>
   
   <style lang="scss" scoped>
-@import "../../../src/static/index.scss";
+@import url("~@/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,29 +75,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-::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" v-model="value" size="mini" :options="options">
+    <agTabs ref="ref_Pedestal" :visible.sync="abb">
       <!-- <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/agDatePicker/src/index.vue";
+import agTabs from "../packages/agDialog/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,5 +168,4 @@ body {
     width: 50px;
   }
 }
-
 </style>

src/static/index.scss

@@ -1,3 +1,29 @@
+// 当超过宽度时，显示省略号
+@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;