3405 手写tab

src/views/user/welcome-pack.vue

@@ -2,16 +2,33 @@
   <div v-loading="loading" class="dec">
     <div class="dec-header" style="">
       <div class="classification">
-        <el-tabs id="el-tabs" ref="elTabs" v-model="activeName" @tab-click="handleClick">
+        <el-tabs v-if="changeTabs" id="el-tabs" ref="elTabs" v-model="activeName" @tab-click="handleClick">
           <el-tab-pane
             v-for="(item, index) in tabList"
             :key="index"
             :label="item.title"
             :name="item.name"
+            class="tab"
+            :class="{ active: activeName == item.name }"
+            @click="handleClick(item)"
           >
             {{ item.title }}
-          </el-tab-pane>
+      </el-tab-pane>
         </el-tabs>
+        <div class="decTabs flexJcfsAc">
+          <div
+              v-for="(item, index) in tabList"
+              :key="index"
+              :label="item.title"
+              :name="item.name"
+              class="tab"
+              :class="{ active: activeName == item.name }"
+              @click="handleClick(item)"
+            >
+             <span>{{ item.title }}</span> 
+        </div>
+        </div>
+       
         <div class="openAllClassification flexfc" @click="drawer = true">
           <span class="">全部</span>
           <i class="el-icon-more-outline"></i>
@@ -90,45 +107,46 @@ export default {
       activeName: "1",
       tabList: [
         {
-          title: "Tab 1",
+          title: "Tab1",
           name: "1",
         },
         {
-          title: "Tab 2",
+          title: "Tab2",
           name: "2",
         },
         {
-          title: "Tab 3",
+          title: "Tab3",
           name: "3",
         },
         {
-          title: "Tab 4",
+          title: "Tab4",
           name: "4",
         },
         {
-          title: "Tab 5",
+          title: "Tab5",
           name: "5",
         },
         {
-          title: "Tab 6",
+          title: "Tab6",
           name: "6",
         },
         {
-          title: "Tab 7",
+          title: "Tab7",
           name: "7",
         },
         {
-          title: "Tab 8",
+          title: "Tab8",
           name: "8",
         },
         {
-          title: "Tab 9",
+          title: "Tab9",
           name: "9",
         },
       ],
       drawer: false,
       direction: "ttb",
       drawerWidth: "50%",
+      changeTabs:true,
       // new end
       loading: false,
       tool: tool,
@@ -286,7 +304,9 @@ export default {
   watch: {
     // 监听被选中的类目标签，使被选中的标签始终在屏幕中间显示
     activeName: {
-      handler: function () {
+      handler: function (newValue, old) {
+      
+       console.log("newValue--" + newValue + '---' + this.changeTabs)
 
       },
     },
@@ -305,16 +325,34 @@ export default {
   },
   methods: {
     //new start
-    handleClick(tab) {
-      console.log(tab);
+    handleClick(item) {
+      console.log(item);
+      this.activeName = item.name;
+
     },
     drawerClassification(item, index) {
-      this.handleClick(this.$refs.elTabs.$children[index]);
-      console.log('获取组件内的DOM',this.$refs.elTabs.$children[index]);
-
-      console.log(this.activeName);
-
-      this.drawer = false;
+      let x = index * 75
+      // this.handleClick(this.$refs.elTabs.$children[index]);
+      // console.log('获取组件内的DOM',this.$refs.elTabs.$children[index]);
+      this.changeTabs = false;
+      this.activeName = item.name;
+      console.log("this.activeName--" + this.activeName + '---' + this.changeTabs)
+     
+      setTimeout(() => {
+        this.changeTabs = true;
+        this.drawer = false;
+      }, 500);
+      // let sectionsWrapper = document.getElementsByClassName("el-tabs__nav is-top");
+      //   console.log(sectionsWrapper)
+      //   // sectionsWrapper[0].style.transform ="translateX(" + x + "px)";
+      //   // // sectionsWrapper[0].style[0] ="transform: translateX(" + x + "px)";
+      //   // sectionsWrapper[0].style.webkitTransform ="translateX(" + x + "px)";
+        
+      //   // sectionsWrapper[0].style.cssText ="transform: translateX(" + x + "px)";
+      //   sectionsWrapper[0].style.color = 'red'
+      //   this.$forceUpdate();
+      //   console.log(sectionsWrapper[0].style)
+        // console.log(sectionsWrapper[0].style.0)
     },
     onConfirm(val) {
       console.log(val);
@@ -714,12 +752,19 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
+.flexJcfsAc {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
 .flexFwW {
   display: flex;
   flex-wrap: wrap;
 }
 .active {
-  color: #1890ff;
+  color: #1890ff!important;
+  // border-bottom: 2px solid #1890ff;
+
 }
 .dec {
   width: 100%;
@@ -728,24 +773,45 @@ export default {
 .dec-header {
   width: 100%;
   height: 100%;
-  position: relative;
-
+  // position: relative;
+.decTabs{
+  width: 100%;
+  height: 60px;
+  overflow-x: auto;
+  .tab{
+    height: 20px;
+    padding: 0 20px 0 20px;
+    box-sizing: border-box;
+    // line-height: 40px;
+    display: inline-block;
+    list-style: none;
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+    // position: relative;
+  }
+  .tab:hover {
+    color: #1890ff;
+    cursor: pointer;
+}
+}
   .classification {
     width: 90%;
-    // overflow: hidden;
+    overflow: hidden;
     /* 可以使窗口平稳滚动 */
     // scroll-behavior: smooth;
-    position: relative;
     .openAllClassification {
-      width: 30px;
+      // width: 30px;
       height: 60px;
       // box-shadow: 0px 0px 20px  rgba(0,0,0,.1);
       cursor: pointer;
-      align-self: baseline;
-      position: absolute;
-      top: 50%;
-      right: -10%;
-      transform: translate(-50%, -50%);
+      // align-self: baseline;
+      // position: absolute;
+      position: fixed;
+      top: 60px;
+      right: 5%;
+      z-index: 100;
+      // transform: translate(-50%, -50%);
       span {
         writing-mode: vertical-lr;
       }
@@ -763,13 +829,16 @@ export default {
       justify-content: center;
       align-items: center;
       width: 100%;
-      overflow: hidden;
+      // overflow: hidden;
+    }
+    .el-tabs__nav{
+
     }
     .el-tabs__nav-scroll {
       width: 100%;
       // overflow-x: scroll;
       // overflow-y: hidden;
-      overflow-x: auto;     /* winphone8和android4+ */
+      overflow: auto;     /* winphone8和android4+ */
       -webkit-overflow-scrolling: touch;    /* ios5+ */
     }
     ::-webkit-scrollbar {