滚动条处理

src/views/projectAdmin/fourEngin/command/leftThree/index.vue

@@ -1,20 +1,29 @@
 <template>
-    <div class="container" ref="Process">
-      <Process style="transform: translateX(0)" :list="stageList" />
+  <div class="container" ref="Process">
+    <div class="process">
+      <vue-scroll :ops="ops" ref="stageScroll">
+        <Process style="transform: translateX(0)" :list="stageList" />
+      </vue-scroll>
     </div>
+  </div>
 </template>
 
 <script>
-import Process from './Process'
-import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
-
+import Process from "./Process";
+import { listProgressOfTheTask } from "@/assets/js/api/zhongjianFourth";
 
 export default {
   components: { Process },
   data() {
     return {
-       // projectData.constructionStage 
-       stageList: this.$t('message.companyDiagram.CONSTRUCTIONSTAGE'),
+      ops: {
+        vuescroll: {
+          // wheelScrollDuration: 0,
+          wheelDirectionReverse: true
+        }
+      },
+      // projectData.constructionStage
+      stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
       list: [
         // { endTime: '2022-01-01', subitemProjectName: '基础工程', state: true ,},
         // { endTime: '2022-02-14', subitemProjectName: '主题结构施工', state: true, },
@@ -22,29 +31,32 @@ export default {
         // { endTime: '2022-07-31', subitemProjectName: '机械设备安拆工程', state: true, },
         // { endTime: '2022-21-31', subitemProjectName: '室内装饰装修工程' }
       ],
-      index: 0
-    }
+      index: 0,
+    };
   },
   mounted() {
     const progress = this.$refs.Process;
     progress.scrollLeft = 48;
-    this.getData()
+    this.getData();
   },
-  methods:{
-    getData(){
-      listProgressOfTheTask({ projectSn: this.$store.state.projectSn ,isNoStart: false}).then(res => {
+  methods: {
+    getData() {
+      listProgressOfTheTask({
+        projectSn: this.$store.state.projectSn,
+        isNoStart: false,
+      }).then((res) => {
         // state 0未开始, 1进行中, 2已完成
-        res.result.forEach((item)=>{
-          if(item.state == 2){
-            item.state = true
+        res.result.forEach((item) => {
+          if (item.state == 2) {
+            item.state = true;
           }
-        })
-        console.log('进度条的返回值',res)
-        this.list = res.result
-      })
-    }
-  }
-}
+        });
+        console.log("进度条的返回值", res);
+        this.list = res.result;
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -53,6 +65,15 @@ export default {
   place-items: center;
   width: 100%;
   height: 100%;
-  overflow: auto;
+  // overflow: auto;
+  .process {
+    margin-top: 5%;
+    width: 95%;
+    height: 85%;
+    overflow: hidden;
+  }
+  .process:hover{
+    overflow-x: auto;
+  }
 }
 </style>