hd-idevvue3 3.0.2 → 3.0.4

package/src/views/layout/header/Navbar.vue

@@ -1,105 +1,101 @@
 <template>
   <el-menu class="navbar" mode="horizontal">
-    <tags-view style="width: calc(100%);height: 100%;"></tags-view>
+    <tags-view style="width: calc(100%); height: 100%"></tags-view>
   </el-menu>
 </template>
 
 <script>
-  import TagsView from './TagsView'
-
-  export default {
-    components: {
-      TagsView
-    },
-    data() {
-      return {}
-    },
-    computed: {},
-    methods: {
-    }
-  }
+import TagsView from './TagsView'
+
+export default {
+  components: {
+    TagsView,
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+}
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .navbar {
-    height: 30px; //jianglinghao 513
-    line-height: 40px;
-    border-radius: 0px !important;
-
-    .hamburger-container {
-      /*line-height: 40px;*/
-      /*height: 40px;*/
-      float: left;
-      padding: 0 10px;
-    }
+<style lang="scss" rel="stylesheet/scss" scoped>
+.navbar {
+  height: 30px; //jianglinghao 513
+  line-height: 40px;
+  border-radius: 0px !important;
+
+  .hamburger-container {
+    /*line-height: 40px;*/
+    /*height: 40px;*/
+    float: left;
+    padding: 0 10px;
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
 
-    .breadcrumb-container {
-      float: left;
+  .errLog-container {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+
+    &:focus {
+      outline: none;
     }
 
-    .errLog-container {
+    .right-menu-item {
       display: inline-block;
-      vertical-align: top;
+      margin: 0 8px;
     }
 
-    .right-menu {
-      float: right;
-      height: 100%;
+    .screenfull {
+      vertical-align: middle;
+      height: 40px;
+    }
 
-      &:focus {
-        outline: none;
-      }
+    .international {
+      vertical-align: top;
 
-      .right-menu-item {
-        display: inline-block;
-        margin: 0 8px;
+      .international-icon {
+        font-size: 20px;
+        cursor: pointer;
+        vertical-align: -5px;
       }
+    }
 
-      .screenfull {
-        vertical-align: middle;
-        height: 40px;
-      }
+    .theme-switch {
+      vertical-align: 15px;
+    }
 
-      .international {
-        vertical-align: top;
+    .avatar-container {
+      height: 40px;
+      margin-right: 30px;
 
-        .international-icon {
-          font-size: 20px;
-          cursor: pointer;
-          vertical-align: -5px;
-        }
-      }
+      .avatar-wrapper {
+        cursor: pointer;
+        margin-top: 5px;
+        position: relative;
 
-      .theme-switch {
-        vertical-align: 15px;
-      }
+        .user-avatar {
+          width: 30px;
+          height: 30px;
+          border-radius: 10px;
+        }
 
-      .avatar-container {
-        height: 40px;
-        margin-right: 30px;
-
-        .avatar-wrapper {
-          cursor: pointer;
-          margin-top: 5px;
-          position: relative;
-
-          .user-avatar {
-            width: 30px;
-            height: 30px;
-            border-radius: 10px;
-          }
-
-          .el-icon-caret-bottom {
-            position: absolute;
-            right: -20px;
-            top: 25px;
-            font-size: 12px;
-          }
+        .el-icon-caret-bottom {
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
         }
       }
     }
   }
+}
 </style>
-
-
-

package/src/views/layout/header/ScrollPane.vue

@@ -1,81 +1,103 @@
-<template>
-  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll" @DOMMouseScroll="handleFoxScroll">
-    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'scrollPane',
-    data() {
-      return {
-        left: 0,
-        tmpWrapperWidth: 0
-      }
-    },
-    updated: function () {
-      if (this.tmpWrapperWidth != this.$refs.scrollWrapper.offsetWidth) {
-        this.tmpWrapperWidth = this.$refs.scrollWrapper.offsetWidth;
-        if (this.$refs.scrollContainer.offsetWidth - this.$refs.scrollWrapper.offsetWidth < 100) {
-          this.left = this.$refs.scrollContainer.offsetWidth - this.$refs.scrollWrapper.offsetWidth - 100;
-        }
-      }
-    },
-    methods: {
-      handleScroll(e) {
-        e.preventDefault()
-        const $container = this.$refs.scrollContainer
-        const $containerWidth = $container.offsetWidth
-        const $wrapper = this.$refs.scrollWrapper
-        const $wrapperWidth = $wrapper.offsetWidth
-        if (e.wheelDelta > 0) {
-          this.left = Math.min(0, this.left + e.wheelDelta)
-        } else {
-          if ($containerWidth - 100 < $wrapperWidth) {
-            if (this.left < -($wrapperWidth - $containerWidth + 100)) {
-              this.left = this.left
-            } else {
-              this.left = Math.max(this.left + e.wheelDelta, $containerWidth - $wrapperWidth - 100)
-            }
-          } else {
-            this.left = 0
-          }
-        }
-      },
-      handleFoxScroll(e) {
-        e.preventDefault()
-        const $container = this.$refs.scrollContainer
-        const $containerWidth = $container.offsetWidth
-        const $wrapper = this.$refs.scrollWrapper
-        const $wrapperWidth = $wrapper.offsetWidth
-        let pos = e.detail * (-10);
-        if (pos > 0) {
-          this.left = Math.min(0, this.left + pos)
-        } else {
-          if ($containerWidth - 100 < $wrapperWidth) {
-            if (this.left < -($wrapperWidth - $containerWidth + 100)) {
-              this.left = this.left
-            } else {
-              this.left = Math.max(this.left + pos, $containerWidth - $wrapperWidth - 100)
-            }
-          } else {
-            this.left = 0
-          }
-        }
-      }
-    }
-  }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .scroll-container {
-    white-space: nowrap;
-    position: relative;
-    overflow: hidden;
-    .scroll-wrapper {
-      position: absolute;
-    }
-  }
-</style>
+<template>
+  <div
+    class="scroll-container"
+    ref="scrollContainer"
+    @mousewheel="handleScroll"
+    @DOMMouseScroll="handleFoxScroll"
+  >
+    <div
+      class="scroll-wrapper"
+      ref="scrollWrapper"
+      :style="{ left: left + 'px' }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'scrollPane',
+  data() {
+    return {
+      left: 0,
+      tmpWrapperWidth: 0,
+    }
+  },
+  updated: function () {
+    if (this.tmpWrapperWidth != this.$refs.scrollWrapper.offsetWidth) {
+      this.tmpWrapperWidth = this.$refs.scrollWrapper.offsetWidth
+      if (
+        this.$refs.scrollContainer.offsetWidth -
+          this.$refs.scrollWrapper.offsetWidth <
+        100
+      ) {
+        this.left =
+          this.$refs.scrollContainer.offsetWidth -
+          this.$refs.scrollWrapper.offsetWidth -
+          100
+      }
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      e.preventDefault()
+      const $container = this.$refs.scrollContainer
+      const $containerWidth = $container.offsetWidth
+      const $wrapper = this.$refs.scrollWrapper
+      const $wrapperWidth = $wrapper.offsetWidth
+      if (e.wheelDelta > 0) {
+        this.left = Math.min(0, this.left + e.wheelDelta)
+      } else {
+        if ($containerWidth - 100 < $wrapperWidth) {
+          if (this.left < -($wrapperWidth - $containerWidth + 100)) {
+            this.left = this.left
+          } else {
+            this.left = Math.max(
+              this.left + e.wheelDelta,
+              $containerWidth - $wrapperWidth - 100
+            )
+          }
+        } else {
+          this.left = 0
+        }
+      }
+    },
+    handleFoxScroll(e) {
+      e.preventDefault()
+      const $container = this.$refs.scrollContainer
+      const $containerWidth = $container.offsetWidth
+      const $wrapper = this.$refs.scrollWrapper
+      const $wrapperWidth = $wrapper.offsetWidth
+      let pos = e.detail * -10
+      if (pos > 0) {
+        this.left = Math.min(0, this.left + pos)
+      } else {
+        if ($containerWidth - 100 < $wrapperWidth) {
+          if (this.left < -($wrapperWidth - $containerWidth + 100)) {
+            this.left = this.left
+          } else {
+            this.left = Math.max(
+              this.left + pos,
+              $containerWidth - $wrapperWidth - 100
+            )
+          }
+        } else {
+          this.left = 0
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  .scroll-wrapper {
+    position: absolute;
+  }
+}
+</style>