tabs

examples/main.js

@@ -2,13 +2,15 @@ import Vue from 'vue'
 import App from '../src/App.vue'
 
 //基于element组件封装，引入element组件库
-import { Input, Select, Option, OptionGroup, DatePicker } from 'element-ui';
+import { Input, Select, Option, OptionGroup, DatePicker ,Tabs,TabPane} from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(Input);
 Vue.use(Select);
 Vue.use(OptionGroup);
 Vue.use(Option);
 Vue.use(DatePicker);
+Vue.use(Tabs);
+Vue.use(TabPane);
 
 // 导入组件库
 import erp_element_ui from '../packages'

packages/agDatePicker/src/index.vue

@@ -3,7 +3,7 @@
     class="ag-date-picker"
     v-model="dateArr"
     v-bind="attrs"
-    @change="dataChange"
+    v-on="inputListeners"
   />
 </template>
 
@@ -18,12 +18,12 @@ export default {
   props: {
     value: {
       type: Array,
-      default: () => [],
+      default: () => [null, null],
     },
   },
   data() {
     return {
-      dateArr: ["", ""],
+      dateArr: [null, null],
     };
   },
   computed: {
@@ -103,6 +103,21 @@ export default {
         ...this.$attrs,
       };
     },
+    // 所有父级事件
+    inputListeners() {
+      return Object.assign({}, this.$listeners, {
+        input: (value) => {
+          let date1 = "";
+          let date2 = "";
+
+          if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
+            date1 = `${value[0]} 00:00:00`;
+            date2 = `${value[1]} 23:59:59`;
+          }
+          this.$emit("input", [date1, date2]);
+        },
+      });
+    },
   },
   watch: {
     value: {
@@ -123,18 +138,7 @@ export default {
       deep: true,
     },
   },
-  methods: {
+  methods: {},
-    dataChange(val) {
-      let date1 = "";
-      let date2 = "";
-
-      if (!isEmpty(val) && val.length === 2 && val[0] && val[1]) {
-        date1 = `${val[0]} 00:00:00`;
-        date2 = `${val[1]} 23:59:59`;
-      }
-      this.$emit("input", [date1, date2]);
-    },
-  },
 };
 </script>
 

packages/agTabs/src/index.vue

@@ -1,23 +1,43 @@
 <template>
-  <el-tabs class="ag-tabs" v-on="$listeners" v-bind="attrs"> </el-tabs>
+  <el-tabs class="ag-tabs" v-bind="$attrs" v-on="$listeners">
+    <slot v-if="!tabsData.length" name="default" />
+    <el-tab-pane
+      v-else
+      v-for="(item, index) in tabsData"
+      :key="index"
+      :name="item.name"
+      :lazy="item.lazy || false"
+      :disabled="item.disabled || false"
+      :closable="item.closable || false"
+    >
+      <template #label>
+        <span>
+          {{ item.label }}
+          <i :class="item.icon"></i>
+          <span v-if="item.remark" class="remark">{{ item.remark }}</span>
+        </span>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
 </template>  
-
 <script>
 export default {
   name: "agTabs",
+  props: {
+    tabsData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
   data() {
     return {};
   },
-  computed: {
+  computed: {},
-    attrs() {
-      return {
-        ...this.$attrs,
-      };
-    },
-  },
   methods: {},
 };
 </script>  
   
-<style scoped lang='scss'>
+<style scoped lang="scss">
 </style>

src/App.vue

@@ -1,17 +1,22 @@
 <template>
   <div>
-    <agDatePicker ref="ref_Pedestal" v-model="value" @blur="changeInput" >
+    <agTabs
-    </agDatePicker>
+      ref="ref_Pedestal"
+      v-model="value"
+      :before-leave="handleClick"
+      :tabsData="tabsData"
+    >
+    </agTabs>
   </div>
 </template>
 
 <script>
-import agDatePicker from "../packages/agDatePicker/src/index.vue";
+import agTabs from "../packages/agTabs/src/index.vue";
 export default {
-  components: { agDatePicker },
+  components: { agTabs },
   data() {
     return {
-      value: [],
+      value: "",
       options: [
         {
           label: "热门城市",
@@ -79,6 +84,44 @@ export default {
           },
         ],
       },
+      tabsData: [
+        {
+          label: "全部",
+          icon: "el-icon-phone",
+          disabled: true,
+          remark: "99",
+          name: "0",
+          total: 0,
+        },
+        {
+          label: "全部",
+          icon: "el-icon-phone",
+          remark: "99",
+          name: "100",
+          total: 0,
+        },
+        {
+          label: "全部",
+          icon: "el-icon-phone",
+          remark: "99",
+          name: "2",
+          total: 0,
+        },
+        {
+          label: "全部",
+          icon: "el-icon-phone",
+          remark: "99",
+          name: "3",
+          total: 0,
+        },
+        {
+          label: "全部",
+          icon: "el-icon-phone",
+          remark: "99",
+          name: "4",
+          total: 0,
+        },
+      ],
       // options: [
       //   {
       //     value: "选项1",
@@ -104,8 +147,8 @@ export default {
     };
   },
   methods: {
-    changeInput() {
+    handleClick() {
-      // console.log(this.value);
+      console.log(1111);
     },
   },
 };